Imagen destacada para Open Graph de artículo en blog de Shopify
Con el siguiente código podrán hacer que el artículo para el blog en Shopify muestre en Open Graph la imagen destacada como la imagen predeterminada, o en su defecto, tome la primera imagen que encuentre en el contenido del artículo. Obviamente, deberán tener asignada la imagen destacada en su artículo para que funcione.
NOTA: Esto no hará nada para mostrar la imagen destacada dentro de la lista de artículos, sólo la mostrará en las etiquetas Open Graph.
Sólo deberán modificar el snippet fb-open-graph-tags.liquid de su tienda. Deberán entrar a Themes, dar clic en los 3 puntos horizontales y escoger Edit HTML/CSS. Luego buscan en el árbol de navegación: Snippets y ahí seleccionar el archivo fb-open-graph-tags.liquid.
Código a agregar:
{% if article.image %}
<meta property="og:image" content="http:{{ article.image | img_url: 'original' }}" />
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: 'original' }}" />
{% else %}
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% endif %}
Código Original:
{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title | strip_html | escape }}" />
{% for image in product.images %}
<meta property="og:image" content="http:{{ image.src | product_img_url: 'grande' }}" />
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'grande' }}" />
{% endfor %}
<meta property="og:price:amount" content="{{ product.price | money_without_currency }}" />
<meta property="og:price:currency" content="{{ shop.currency }}" />
{% elsif template contains 'article' %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ article.title | strip_html | escape }}" />
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% else %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page_title | escape }}" />
{% if settings.use_logo %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
{% endif %}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:site_name" content="{{ shop.name }}" />
Código Modificado:
{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title | strip_html | escape }}" />
{% for image in product.images %}
<meta property="og:image" content="http:{{ image.src | product_img_url: 'grande' }}" />
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'grande' }}" />
{% endfor %}
<meta property="og:price:amount" content="{{ product.price | money_without_currency }}" />
<meta property="og:price:currency" content="{{ shop.currency }}" />
{% elsif template contains 'article' %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ article.title | strip_html | escape }}" />
{% else %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page_title | escape }}" />
{% if settings.use_logo %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
{% endif %}
{% endif %}
{% if article.image %}
<meta property="og:image" content="http:{{ article.image | img_url: 'original' }}" />
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: 'original' }}" />
{% else %}
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:site_name" content="{{ shop.name }}" />
Los comentarios están cerrados.
Un comentario
Hola Luis,
He intentado seguir tus instrucciones para aplicar la funcionalidad del Open Graph en mi página web.
Sin embargo, en el apartado Snippet, no encuentro el archivo fb-open-graph-tags.liquid.
¿Sabes cómo podría resolverlo?
Gracias