Metadata - Bsale-IO/template-docs GitHub Wiki

Metadatos

En el están todas las descripciones necesarias para que tu sitio sea encontrado por google y compartido en redes sociales.

Revisar Metadatos

Para revisar como se verá tu sitio compartido en redes sociales puedes testearlo acá:

Componente Metadata

Este componente debe ponerlo dentro del Componente Head,

<!-- meta genérico versión JULIO 2023 -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="twitter:card" content="summary">
<meta name="autor" content="Bsale" />
<meta name="generator" content="Bsale" />
{% for rrss in site.social_networks %}
    {% if rrss.value contains 'https://twitter.com/' %}
        <meta name="twitter:site" content="{{rrss.value | replace: 'https://twitter.com/', '@' }}">
        {% break %}
    {%elsif rrss.value contains 'http://twitter.com/' %}
        <meta name="twitter:site" content="{{rrss.value | replace: 'http://twitter.com/', '@' }}">
        {% break %}
    {% endif %}
{% endfor %}
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<!-- URL -->
<meta property="og:url" content="{{canonical_url}}">
<meta property="og:site_name" content="{{ site.name }}" />
<link rel="canonical" href="{{canonical_url}}"/>

{% if pagination.prev %}
    <!-- prev page -->
    <link rel="prev" href="{{site.url | prepend:'https://' | append: pagination.prev }}"/>
{% endif -%}
{% if pagination.next %}
    <!-- next page -->
    <link rel="next" href="{{site.url | prepend:'https://' | append: pagination.next }}"/>
{% endif %}
<!-- robots -->
{% if current_url contains 'bsalemarket.com' or current_url contains '/products' or product.collections.size <= 0 %}
    <meta name="robots" content="noindex, nofollow" />
{% elsif current_url contains '/cart' or current_url contains '?'  %}
    <meta name="robots" content="noindex, follow" />
{%else%}
    <meta name="robots" content="index, follow" />
{%endif%}    
<!-- end meta generico -->
<!-- favicon-->
{% if site.favicon.size > 0 %}
    <!-- desktop favicon -->
    <link rel="icon" type="image/png" sizes="16x16"     href="{{site.favicon | image_url: "T"}}">
    <link rel="icon" type="image/png" sizes="32x32"     href="{{site.favicon | image_url: "T"}}">
    <link rel="icon" type="image/png" sizes="48x48"     href="{{site.favicon | image_url: "T"}}">
    <!-- android favicon -->
    <link rel="icon" type="image/png" sizes="192x192"   href="{{site.favicon | image_url: "S"}}">
    <link rel="icon" type="image/png" sizes="512x512"   href="{{site.favicon | image_url: "L"}}">
    <!-- apple ios -->
    <link rel="apple-touch-icon"      sizes="180x180"   href="{{site.favicon | image_url: "S"}}">
{% else %}
    <script>console.warn('%cBsale:','padding:3px;color:#fff;background-color:#ff6815','no tiene Favicon')</script>
{% endif %}
<!-- end favicon -->
{%if current_url contains 'product/' %}
<!-- meta producto-->
    {% if product.description.size > 0 %}
        {% assign product_description = product.description | strip_html %}
    {% else %}
        {% capture product_description %} {{product.title}} {{product.brand.name}} {{product.finalPrice | money_filter}} {% endcapture %}
    {% endif %}

    <meta property="og:type" content="product">
    <title>{{product.title}} | {{ site.name }}</title>
    <meta name="twitter:title" content="{{product.title}}"/>
    <meta property="og:title" content="{{product.title}}"/>
    <!--description-->
    <meta name="description" content="{{product_description | truncate: 250, "..." }}">
    <meta name="twitter:description" content="{{product_description | truncate: 250, "..." }}">
    <meta property="og:description" content="{{product_description | truncate: 250, "..." }}">
    <!--img-->
    <meta name="twitter:image" content="{{product.defaultImage | image_url: "F"}}">
    <meta property="og:image" content="{{product.defaultImage  | image_url: "F"}}">
<!-- end meta producto -->
{% elsif current_url contains '/article/' %}
<!-- meta articulo -->
    <meta property="og:type" content="article">
    <title>{{title}} | {{ site.name }}</title>
    <meta name="twitter:title" content="{{title}}"/>
    <meta property="og:title" content="{{title}}"/>
    <!--description-->
    <meta name="description" content="{{article.content | strip_html | truncate: 250, "..."}}">
    <meta name="twitter:description" content="{{article.content | strip_html | truncate: 250, "..."}}">
    <meta property="og:description" content="{{article.content | strip_html | truncate: 250, "..."}}">
    <!-- img -->
    {% if article.imagen.size > 0%}
        <meta name="twitter:image" content="{{article.imagen | image_url: "F"}}">
        <meta property="og:image" content="{{article.imagen | image_url: "F"}}">
    {% else %}
        <meta name="twitter:image" content="{{site.logo | image_url: "F"}}">
        <meta property="og:image" content="{{site.logo | image_url: "F"}}">
    {% endif %}
    
<!-- end meta articulo -->
{% elsif current_url contains '/brand/' or current_url contains '/collection/' or current_url contains 'search_text=' %}
    {% if collection.description.size > 0 %}
        {% assign collection_description = collection.description | strip_html %}
    {% else %}
        {% capture collection_description %}
            {{title}}: {%for product in collection%}{{product.title}}{% if forloop.last%}.{%else%}, {%endif%}{%endfor%}
        {%endcapture%}
    {%endif%}
<!-- meta brand, collection, search -->
    <meta property="og:type" content="website">
    {% if current_url contains 'search_text=' %}
        <title>Busqueda: {{title}} | {{ site.name }}</title>
        <meta name="twitter:title" content="Busqueda: {{title}}"/>
        <meta property="og:title" content="Busqueda: {{title}}"/>
    {% else %}
        <title>{{title}} | {{ site.name }}</title>
        <meta name="twitter:title" content="{{title}}"/>
        <meta property="og:title" content="{{title}}"/>
    {% endif %}
    <!--description-->
    <meta name="description" content="{{collection_description | truncate: 250, "..."}}">
    <meta property="og:description" content="{{collection_description | truncate: 250, "..."}}">
    <meta name="twitter:description" content="{{collection_description | truncate: 250, "..."}}" >
    <!-- image -->
    {% if collection.image %}
        <meta property="og:image" content="{{collection.image | image_url: "F"}}"/>
        <meta name="twitter:image" content="{{collection.image | image_url: "F"}}"/>
    {%else%}
        {% for product in collection %}
            {% if product.defaultImage.size > 0 %}
                {% comment %} Si no hay imagen usa la imagen por defecto del primer producto {%endcomment %}
               <meta property="og:image" content="{{product.defaultImage | image_url: "F"}}"/>
               <meta name="twitter:image" content="{{product.defaultImage | image_url: "F"}}"/>
               {% break %} 
            {% endif %}
        {%endfor%}
    {%endif%}
<!-- end meta brand, collection, search  -->
{% elsif current_url contains '/form/' %}
<!-- meta formulario -->
    <meta property="og:type" content="website">
    <title>{{title}} | {{ site.name }}</title>
    <meta name="twitter:title" content="{{title}}"/>
    <meta property="og:title" content="{{title}}"/>
    <!--description-->
    <meta name="description" content="{{title}}">
    <meta name="twitter:description" content="{{title}}">
    <meta property="og:description" content="{{title}}">
    <!-- img -->
    <meta name="twitter:image" content="{{site.logo}}">
    <meta property="og:image" content="{{site.logo}}">
<!-- end meta formulario -->
{% elsif current_url contains '/cart/' %}
<!-- carro -->
    <meta property="og:type" content="website">
    <title>Carro ({% if items %}{{items | round }}{%else%}0{%endif%}) | {{ site.name }}</title>
    <meta name="twitter:title" content="Tengo {{items}} mi carro en {{ site.name }}"/>
    <meta property="og:title" content="Tengo {{items}} mi carro en {{ site.name }}"/>
    <!-- description -->
    <meta name="description" content="{{site.description}}">
    <meta name="twitter:description" content="{{site.description}}">
    <meta property="og:description" content="{{site.description}}">
    <!-- img -->
    <meta name="twitter:image" content="{{site.logo}}">
    <meta property="og:image" content="{{site.logo}}">
<!-- carro -->
{% elsif current_url contains '/sheet/' %}
<!-- sheet -->
    <meta property="og:type" content="website">
    <title>{{ title }} | {{ site.name }}</title>
    <meta name="twitter:title" content="{{title}}"/>
    <meta property="og:title" content="{{title}}"/>
    <!--description-->
    <meta name="description" content="{{title}} {{site.description}}">
    <meta name="twitter:description" content="{{title}} {{site.description}}">
    <meta property="og:description" content=" {{title}} {{site.description}}">
    <!-- img -->
    <meta name="twitter:image" content="{{site.logo}}">
    <meta property="og:image" content="{{site.logo}}">
<!-- sheet -->
{% else %}
<!-- meta home -->
    <meta property="og:type" content="website">
    <title>{{ site.name }}</title>
    <meta name="twitter:title" content="{{ site.name }}"/>
    <meta property="og:title" content="{{ site.name }}"/>
    <!--description-->
    <meta name="description" content="{{site.description}}">
    <meta name="twitter:description" content="{{site.description}}">
    <meta property="og:description" content="{{site.description}}">
    <!-- img -->
    <meta name="twitter:image" content="{{site.logo | image_url: "F"}}">
    <meta property="og:image" content="{{site.logo | image_url: "F"}}">
<!-- end meta home -->
{% endif %}

Filtro de imagen

Las imágenes cuando son entregadas por metadata deben usar un filtro de tamaño {{ variable | image_url: "F" }} para evitar que se aplique gzip y de esta forma puedan ser previsualizadas al compartirse en redes sociales como Facebook, Twitter, Whatsapp, Instagram, etc.

{% comment %} Imagen para twitter {% endcomment %}
<meta name="Twitter:image" content="{{site.logo | image_url: "F"}}">
{% comment %} Imagen para facebook, instagram y whatsapp {% endcomment %}
<meta property="og:image" content="{{site.logo | image_url: "F"}}">