Herramienta general / 33

Generador de etiquetas meta SEO para Shopify y vista previa SERP

Genera títulos y meta descripciones optimizados para búsqueda en Shopify con vistas previas SERP por ancho en píxeles, Liquid reutilizable y salida HTML estática.

Generador de etiquetas meta SEO para Shopify y vista previa SERP: TOEA estima los anchos de título y descripción (límites de escritorio de ~600px y ~960px), y luego crea un snippet de Liquid con alcance por tipo de página que lee los objetos de Shopify en tiempo de renderizado. El panel de HTML estático es una vista previa de los valores introducidos aquí, no un reemplazo a nivel de tema. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas web
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Página de Shopify y detalles de metadatos

Tipo de página

Título de la página

Nombre de la tienda de Shopify

Meta descripción

Palabra clave objetivo

Precio (solo producto)Se usa solo para la vista previa estática del producto.

Moneda

Vista previa en tiempo real de la tarjeta de Google SERP

https://apexcoffeeroasters.myshopify.com› products ›granos-de-espresso-org-nicos-artesanales

Granos de espresso orgánicos artesanales | Apex Coffee Roasters

US$24.99 • Descubre nuestros granos de espresso orgánicos en lotes pequeños, tostados localmente, con notas de cata a chocolate negro y avellana. ¡Pide café fresco en línea hoy!

Ancho del título en píxeles482px / 600px

63 caracteres ✓ Dentro de los límites del título

Ancho de la meta descripción963px / 960px

166 caracteres ⚠️ Puede truncarse el texto del fragmento

Fragmento meta de Shopify Liquid

{% comment %} Shopify SEO Tags — reusable product output. Render this snippet from layout/theme.liquid <head> and remove overlapping title/meta tags. Values come from Shopify objects, not this preview. {% endcomment %}
{% if request.page_type == 'product' and product %}
{% assign seo_title = page_title | default: product.title %}
{% assign seo_description = page_description | default: product.description | strip_html %}
{% assign seo_og_type = 'product' %}
<title>{{ seo_title | escape }}{% if shop.name != blank and seo_title != shop.name %} | {{ shop.name | escape }}{% endif %}</title>
{% if seo_description != blank %}<meta name="description" content="{{ seo_description | escape }}" />{% endif %}

<meta property="og:site_name" content="{{ shop.name | escape }}" />
<meta property="og:type" content="{{ seo_og_type | escape }}" />
<meta property="og:title" content="{{ seo_title | escape }}" />
<meta property="og:description" content="{{ seo_description | escape }}" />
{% if product.selected_or_first_available_variant.price != blank %}
<meta property="og:price:amount" content="{{ product.selected_or_first_available_variant.price | money_without_currency | strip_html | escape }}" />
<meta property="og:price:currency" content="{{ cart.currency.iso_code | default: shop.currency | escape }}" />
{% endif %}
{% endif %}

Salida de la vista previa HTML estática

<!-- Static preview only; use the Liquid output for theme templates. -->
<title>Granos de espresso orgánicos artesanales | Apex Coffee Roasters</title>
<meta name="description" content="Descubre nuestros granos de espresso orgánicos en lotes pequeños, tostados localmente, con notas de cata a chocolate negro y avellana. ¡Pide café fresco en línea hoy!" />
<meta property="og:site_name" content="Apex Coffee Roasters" />
<meta property="og:type" content="product" />
<meta property="og:title" content="Granos de espresso orgánicos artesanales | Apex Coffee Roasters" />
<meta property="og:description" content="Descubre nuestros granos de espresso orgánicos en lotes pequeños, tostados localmente, con notas de cata a chocolate negro y avellana. ¡Pide café fresco en línea hoy!" />
<meta property="og:price:amount" content="24.99" />
<meta property="og:price:currency" content="USD" />

Dónde Shopify ya escribe estas etiquetas

La mayoría de los temas, incluido Dawn y los numerosos temas basados en él, ya generan el título, la meta descripción y las etiquetas Open Graph desde layout/theme.liquid y un fragmento como meta-tags.liquid. Añadir también este fragmento produce dos títulos y dos descripciones. Comenta o elimina las etiquetas propias del tema para los tipos de página que cubre el fragmento y, después, consulta el código fuente de la página para confirmar que solo queda una de cada tipo.

Títulos y descripciones desde el panel de administración

El panel de administración de Shopify tiene una sección de resultados del buscador para cada producto, colección y página, y Liquid expone esos valores como page_title y page_description. El fragmento los lee primero, por lo que el resultado escrito manualmente en el panel es el que ven los buscadores; si se deja vacío, se usan el título y la descripción propios del elemento. Si después cambias el resultado, solo tendrás que editarlo en el panel, no el tema. Los contadores del panel permiten 70 caracteres para el título y 320 para la descripción, más de lo que muestra una página de resultados, así que redacta el resultado usando aquí los medidores de píxeles.

La descripción de un producto puede ser mucho más larga que un fragmento, y los buscadores simplemente la truncarán. Comprueba el resultado con el comprobador de etiquetas meta cuando esté publicado.

Cómo se usa

Elige Product, Collection o Page y luego introduce el título, el nombre de la tienda, la descripción y la palabra clave principal.
Revisa la vista previa de la URL específica de la página, el precio del producto según la moneda y los medidores de truncamiento por ancho en píxeles.
Guarda el Liquid reutilizable como un snippet del tema y renderízalo desde layout/theme.liquid, o copia la salida HTML estática por separado para pruebas.

Privacidad y límites

Los datos de tu tienda y productos permanecen íntegramente en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Por qué medir los títulos por ancho en píxeles y no por número de caracteres?

Google trunca los títulos en la SERP según el ancho en píxeles del contenedor (~600px), no por un conteo exacto de caracteres. Los caracteres anchos ('W', 'M') ocupan más espacio que los estrechos ('i', 'l').

¿Dónde pego el snippet de Liquid?

Guárdalo como un snippet, por ejemplo snippets/toea-meta-tags.liquid, y luego renderízalo dentro del <head> de layout/theme.liquid. Lee los objetos product, collection, page, shop y currency en tiempo de ejecución, por lo que los valores de la vista previa no quedan codificados de forma fija. Sustituye los metadatos del tema que se solapen en lugar de añadir una segunda etiqueta title o description.

¿Puedo pegar la salida HTML estática en theme.liquid?

Usa el panel de HTML estático solo para vistas previas o pruebas controladas. Contiene los valores introducidos en esta herramienta; usa la salida de Liquid reutilizable en un tema en producción para que cada página obtenga sus propios datos de Shopify.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta