Generador de Meta Tags
Herramienta generadora de Meta tags del lado del navegador, compatible con title, description, keywords, canonical, Open Graph, Twitter Card, robots y otras etiquetas. Escapado automático de entidades HTML, indicadores de longitud en tiempo real con estado de color, copia y descarga con un clic.
Relacionado
Casos de uso
- Genera por lotes conjuntos completos de Meta tags para página de inicio, páginas de listado y páginas de detalle antes del lanzamiento de un nuevo sitio, completando rápidamente la configuración SEO básica
- Configura etiquetas Open Graph tipo article y Twitter Card tipo summary_large_image antes de publicar artículos de blog para mejorar el efecto al compartir en plataformas sociales
- Configura og:type product en páginas de productos de comercio electrónico, establece información estructurada como og:image, og:price:amount, optimizando la visualización de productos en redes sociales
- Regenera etiquetas canonical después de un rediseño del sitio o cambio de dominio para unificar la especificación de URL y evitar la dispersión de peso por contenido duplicado
- Configura theme-color para páginas web móviles para que la barra de direcciones de Chrome y Safari móvil coincida con los tonos de la marca
- Genera rápidamente código completo de Meta tags necesario para la configuración head al desarrollar con frameworks SSR/SSG como Next.js, Nuxt.js, Gatsby
- Configura manualmente Meta tags para plantillas de página personalizadas en sistemas CMS como WordPress y Shopify sin depender de plugins SEO
- Genera rápidamente combinaciones correctas de robots meta tag (como noindex,nofollow para entornos de prueba) al solucionar problemas de indexación del sitio
- Configura tarjetas de compartir para páginas de destino de campañas por parte de operadores de redes sociales, asegurando que la vista previa sea correcta al compartir en Facebook, Twitter/X, LinkedIn, WhatsApp, Slack y Discord
- Completa automáticamente el escapado de entidades de Meta tags al escribir plantillas de página HTML para desarrolladores frontend, evitando errores de sintaxis HTML causados por caracteres especiales
Cómo Usar
- En el área de «Etiquetas SEO Básicas», completa el title de la página (título, recomendado 50-60 caracteres), meta description (descripción, recomendado 120-160 caracteres), keywords (palabras clave separadas por comas), canonical URL (enlace canónico), author (autor)
- En el área de «Directivas de rastreo robots», selecciona reglas de indexación y seguimiento adecuadas: index/noindex (indexar o no), follow/nofollow (seguir enlaces o no), puedes marcar opciones adicionales como noarchive, nosnippet
- En el área de «Configuración de Color de Tema», ingresa o selecciona el valor de color hexadecimal para theme-color, usado para colorear la barra de direcciones del navegador móvil
- Cambia al área de «Etiquetas Open Graph», selecciona og:type (elige entre website/article/product/profile), completa og:title, og:description, og:image (URL de imagen para compartir, recomendado 1200×630 píxeles), og:url, og:site_name, og:locale
- Cambia al área de «Etiquetas Twitter Card», selecciona el tipo de twitter:card (elige entre summary/summary_large_image/app/player), completa la cuenta @twitter:site, twitter:title, twitter:description, twitter:image
- Durante la entrada de contenido, observa el área de vista previa en tiempo real a la derecha y las indicaciones de color del contador de caracteres: verde significa longitud óptima, naranja significa cerca del límite, gris significa demasiado corto o largo y necesita ajuste
- Después de confirmar que las etiquetas son correctas, haz clic en el botón «Copiar al portapapeles» para copiar todo el código y pegarlo en el área HTML head, o haz clic en «Descargar archivo HTML» para guardar como meta-tags.html para uso posterior
Características
- Escapado automático de entidades HTML: escapa de forma segura los caracteres especiales &, <, >, ", ' para evitar errores de sintaxis HTML en las etiquetas generadas
- Indicador inteligente de longitud de title: muestra verde (óptimo) en el rango de 50-60 caracteres, indicadores naranja/gris cuando excede o es demasiado corto, contador en tiempo real
- Indicador inteligente de longitud de meta description: muestra verde (rango óptimo de visualización) en 120-160 caracteres, cambio de color en tiempo real cuando es demasiado largo o corto
- Compatible con 4 opciones de og:type: website (sitio general), article (artículo/blog), product (página de producto), profile (perfil personal), adaptado a diferentes tipos de página
- Compatible con 4 tipos de twitter:card: summary (resumen con imagen pequeña), summary_large_image (resumen con imagen grande), app (tarjeta de aplicación), player (tarjeta de video/reproductor)
- Configuración combinada de directivas robots: combina libremente directivas de rastreo como index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
- Meta etiqueta author: admite configurar etiquetas de autoría como content-author, article:author, ideal para blogs y sitios de noticias
- Configuración de color de tema theme-color: establece el color de la barra de direcciones móvil del navegador, con selector de color y entrada de valor de color
- Configuración de nombre del sitio og:site_name: campo dedicado para el nombre del sitio en el protocolo Open Graph, muestra correctamente el nombre del sitio al compartir en redes
- Configuración de cuenta @twitter:site: permite ingresar el @handle oficial de la plataforma Twitter/X, vinculando tarjetas de compartir con la cuenta oficial
- Salida estructurada en tres secciones: muestra resultados en tres secciones claras: Primary SEO, Open Graph y Twitter Card, estructura clara a simple vista
- Copia al portapapeles con un clic: el código generado se copia con un clic sin selección manual, compatible con varios navegadores
- Descarga como meta-tags.html: descarga las etiquetas generadas como archivo HTML independiente, conveniente para guardar o importar directamente al proyecto
- Generación y vista previa en tiempo real: genera código de etiquetas instantáneamente al ingresar contenido, con vista previa sincronizada de resultados SERP y estilo de tarjetas sociales
Preguntas Frecuentes
¿El código generado por el Generador de Meta Tags se puede copiar directamente al sitio web para usar? ¿Necesita modificaciones?
Se puede copiar y usar directamente. El código generado por esta herramienta son Meta tags HTML en formato estándar, con escapado automático de entidades HTML completado, simplemente pégalo entre <head> y </head> de tu página web. Solo necesitas asegurarte de que las URL que completas (canonical, og:image, og:url, twitter:image) sean direcciones en línea reales de tu sitio web, no marcadores de posición de ejemplo. Si usas soluciones de gestión head de frameworks como Next.js, Nuxt.js, React Helmet, Vue Meta, puede que necesites ajustes menores según la sintaxis de plantillas JSX/Vue del framework, pero los atributos y valores de etiquetas se pueden reutilizar completamente.
¿Por qué es obligatorio completar la imagen og:image? ¿Qué pasa si no hay imagen?
og:image afecta directamente el efecto visual y la tasa de clics de la tarjeta de compartir en redes. Los enlaces sin og:image al compartirse en plataformas como Facebook, Twitter, LinkedIn, WeChat, etc., mostrarán un enlace de texto simple sin vista previa de imagen, o la plataforma extraerá aleatoriamente una imagen pequeña de la página (puede ser logo, avatar, imagen publicitaria o incluso imagen no relacionada), el efecto de visualización es muy malo, la tasa de clics generalmente es más de un 50% más baja que los compartidos con imagen de vista previa correcta. El tamaño recomendado de og:image es 1200×630 píxeles (proporción 1.91:1), debe ser una URL absoluta de acceso público, tamaño de archivo no mayor de 5MB.
¿Deben configurarse tanto Open Graph como Twitter Card? ¿Solo configurar OG es suficiente?
La plataforma Twitter/X realmente leerá etiquetas Open Graph como respaldo: si no configuras ninguna etiqueta con prefijo twitter:, Twitter intentará usar og:title, og:description, og:image para generar la tarjeta. Pero configurar Twitter Card dedicado tiene varios beneficios: ①puedes elegir el tipo de twitter:card más adecuado (especialmente el tipo de imagen grande summary_large_image, con OG puede que no use el estilo de imagen grande por defecto); ②puedes configurar twitter:site para vincular tu cuenta oficial de Twitter, aumentando conversiones de seguimiento; ③puedes optimizar la longitud del título y descripción específicamente para Twitter, distinguiéndolos de OG. Se recomienda configurar ambos, esta herramienta admite generación simultánea, la carga de trabajo es casi la misma.
¿Qué consecuencias tiene que title y meta description excedan el rango de longitud recomendado? ¿Serán penalizados?
Exceder la longitud no será penalizado por los motores de búsqueda, pero se truncará. En los resultados de búsqueda de Google, la parte de title que excede aproximadamente 600 píxeles de ancho (chino aproximadamente 50-60 caracteres) se truncará con puntos suspensivos, los usuarios no verán el título completo; meta description que excede aproximadamente 920 píxeles de ancho (chino aproximadamente 120-160 caracteres) también se truncará. El problema de ser demasiado corto es desperdiciar el valioso espacio de visualización, no pudiendo transmitir completamente el valor de la página y atraer clics. Nota que esto no es un límite de recuento de caracteres preciso, sino un límite de ancho de píxeles: caracteres de ancho completo, letras mayúsculas inglesas, letras anchas como W/M, emoji ocupan más ancho, la visualización real puede truncarse antes de lo que parece por recuento de caracteres. Las indicaciones de color de esta herramienta son referencia de mejores prácticas basadas en recuento de caracteres.
¿Qué significa escapado de entidades HTML? ¿Por qué la herramienta hace esto automáticamente?
En HTML ciertos caracteres tienen significado sintáctico especial, si se escriben directamente en valores de atributos romperán la estructura HTML: la comilla doble " es el terminador de valor de atributo, escribirla directamente causará que la etiqueta se cierre prematuramente; & es el carácter de inicio de escapado de entidades; < y > son caracteres de inicio y fin de etiqueta. Estos caracteres deben escribirse en forma de entidad para mostrarse correctamente: & → &, < → <, > → >, " → ", ' → '. Si tu title o description contiene caracteres especiales como &, comillas, corchetes angulares, escribir directamente sin escapar causará errores de sintaxis HTML, puede hacer que todas las etiquetas posteriores fallen. Esta herramienta procesa automáticamente estos escapados, simplemente ingresa el texto original directamente, no necesitas escapar manualmente.
¿Por qué los rastreadores de Facebook/Twitter no pueden capturar Meta tags de mi página escrita con React/Vue?
Porque frameworks frontend modernos como React, Vue, Angular por defecto son renderizado del lado del cliente (CSR): el código fuente HTML está vacío o solo tiene un div contenedor, las Meta tags se insertan dinámicamente en el DOM después de que el navegador ejecuta JavaScript. Pero la mayoría de los rastreadores de plataformas sociales como el rastreador de Facebook facebookexternalhit, Twitterbot, LinkedInBot, rastreador de WeChat no ejecutan JavaScript (o su capacidad de ejecución es muy limitada), en el HTML original que capturan no hay Meta tags, naturalmente no pueden generar tarjetas de compartir. Soluciones: ①usar SSR (renderizado del lado del servidor) o SSG (generación de sitios estáticos), como frameworks Next.js, Nuxt.js, Gatsby, Astro, que renderizan Meta tags completas en el código fuente HTML desde el lado del servidor; ②usar servicios de prerenderizado como prerender.io, Rendertron para devolver HTML estático a los rastreadores; ③usar servicios de generación de imágenes OG dedicados para generar etiquetas dinámicamente.
¿canonical y og:url de la misma página deben completarse igual?
Sí, deben ser consistentes. La etiqueta canonical es para motores de búsqueda, diciéndoles la URL preferida; og:url es para plataformas sociales, diciéndoles la URL única de este contenido para agregar recuentos de me gusta, comentarios y compartidos. Que ambos apunten a la misma URL es la mejor práctica, puede evitar dispersión de peso y fragmentación de recuentos sociales. Nota que ambas deben ser URL absolutas completas (incluyendo https://, dominio, ruta completa), no se pueden usar rutas relativas. Si hay URL con parámetros UTM, parámetros de seguimiento, tanto canonical como og:url deben apuntar a la URL limpia sin parámetros.
¿Los enlaces de páginas con noindex seguirán siendo rastreados por los rastreadores? ¿Transmitirán peso?
El significado de noindex es «no indexar esta página», no es «no rastrear» ni «no seguir enlaces». El rastreador aún rastreará páginas noindex (solo así puede ver la etiqueta noindex), si robots meta también establece follow (el valor predeterminado es follow), el rastreador continuará rastreando enlaces en la página. Pero sobre la transmisión de peso: la declaración oficial de Google es que las páginas noindex eventualmente se eliminarán del índice, y el peso de los enlaces en la página tampoco se transmitirá normalmente (porque la página en sí no está indexada). Así que si quieres que el rastreador llegue a otras páginas a través de una página pero no quieres que la página en sí se indexe, usar noindex,follow está bien, pero no esperes que las páginas noindex puedan transmitir peso como páginas normales.
¿En qué navegadores funciona theme-color? ¿iOS Safari lo admite?
Situación de compatibilidad actual de theme-color: navegadores con kernel Chromium como Chrome/Firefox/Edge/Brave para Android lo admiten desde hace mucho tiempo, con el efecto más obvio; Safari admite theme-color desde iOS 15 y macOS Monterey, pero la implementación de Safari es ligeramente diferente: ajusta automáticamente según el color de fondo de la página, también admite usar el atributo media para configurar colores separados para modo claro/oscuro. Chrome de escritorio también comenzó a aplicar theme-color en la barra de pestañas desde alguna versión. IE y navegadores antiguos no lo admiten, pero no pasa nada si no es compatible, solo no habrá efecto de color de tema, no afecta ninguna función. Se recomienda establecer el color de tema como el color del header/barra de navegación de tu sitio, visualmente más unificado.
¿Por qué a veces la descripción que se muestra en los resultados de búsqueda de Google no es la que escribí?
Google no garantiza usar al 100% la meta description que escribes. Cuando Google determina que la description que escribiste no es lo suficientemente relevante para la consulta de búsqueda del usuario, o la calidad de description no es alta (por ejemplo es relleno de palabras clave, igual en todo el sitio, no coincide con el contenido), Google extraerá automáticamente un fragmento del contenido del cuerpo de la página que considere más relevante para el término de búsqueda como descripción mostrada en los resultados de búsqueda. Este es el comportamiento normal de Google, no es un error. Para aumentar la probabilidad de que se use description: ①escribe description única y que describa con precisión el contenido para cada página; ②description incluye naturalmente palabras clave centrales de la página pero sin relleno; ③controla la longitud en un rango razonable no demasiado corto; ④el contenido de description realmente se refleja en el cuerpo de la página. Aunque Google a veces reescribe, aún debes escribir description cuidadosamente: es el principal medio que tienes para controlar activamente el efecto de visualización.
Después de configurar las etiquetas ¿cómo verificar si tienen efecto correctamente? ¿Qué herramientas de comprobación hay?
Verificar Meta tags tiene varios pasos y herramientas: ①primero usa «Ver código fuente de la página» en el navegador, busca en el código fuente HTML original si existen etiquetas como title, description, og: y si su contenido es correcto (nota: es código fuente no el panel Elements, porque el código fuente es el devuelto por el servidor, en CSR no se verán en el código fuente); ②usa Facebook Sharing Debugger para verificar etiquetas OG y actualizar caché; ③usa Twitter Card Validator para verificar Twitter Card; ④usa Google Rich Results Test para comprobar etiquetas básicas; ⑤usa la herramienta «Inspección de URL» de Google Search Console para ver la página que Google capturó realmente, estado de indexación; ⑥si es prueba local, puedes usar el cambio de user-agent del navegador para simular rastreadores de redes sociales, o usar el comando curl con UA de Facebook para capturar y ver el HTML devuelto.
¿Cada página necesita configurar Meta tags por separado? ¿Funciona usar un conjunto de etiquetas para todo el sitio?
¡Absolutamente no! Cada página debe tener title y meta description únicos. Si todas las páginas del sitio usan el mismo title y description, los motores de búsqueda no podrán distinguir los temas de contenido de diferentes páginas: ①los motores de búsqueda no saben de qué trata cada página, no podrán clasificar correctamente; ②en resultados de búsqueda todas las páginas muestran el mismo título y descripción, los usuarios no pueden distinguir en cuál hacer clic, CTR extremadamente bajo; ③puede ser juzgado por motores de búsqueda como sitio de baja calidad afectando el peso de todo el sitio. En principio las etiquetas OG y Twitter Card también deberían ser diferentes para cada página. Solo configuraciones a nivel de sitio como theme-color, og:site_name, twitter:site pueden unificarse en todo el sitio, otras etiquetas deben configurarse individualmente según el contenido de la página.
¿Todavía hay que escribir meta keywords ahora? ¿Cuántas son apropiadas?
Los principales motores de búsqueda como Google, Bing, Baidu en 2026 ya no usan meta keywords como factor de clasificación, si las escribes o no, qué escribas, básicamente no afecta el SEO. Si tu CMS o plantilla tiene este campo, tómate unos segundos para completar 3-5 palabras clave centrales, no dediques demasiado tiempo a reflexionar sobre la selección y densidad de palabras clave. Lo importante: no rellenes decenas de palabras clave, no repitas la misma palabra muchas veces, no escribas palabras populares no relacionadas con la página: aunque keywords en sí no se usa para clasificación, rellenar de forma demasiado excesiva puede ser considerado por los motores de búsqueda como señal de spam, no vale la pena. Si tu sitio web no tiene campo keywords o te da pereza completarlo, dejarlo completamente vacío también está bien, no tiene ningún impacto negativo en la clasificación.
¿Cuál es la diferencia entre robots meta tag y robots.txt? ¿Cuál tiene mayor prioridad?
Ambos tienen diferentes niveles de acción y mecanismos: ①robots.txt es un archivo de texto colocado en el directorio raíz del sitio, controla el comportamiento de rastreo a nivel de sitio o directorio, por ejemplo Disallow: /admin/ dice a todos los rastreadores que no rastreen el directorio /admin/; pero robots.txt es un «acuerdo de caballeros», los rastreadores conformes lo respetarán, y si páginas prohibidas de rastrear son apuntadas por enlaces externos, aún pueden ser indexadas solo sin descripción. ②robots meta es una etiqueta a nivel de página, colocada en el HTML head de cada página, puede controlar con precisión comportamientos de index/noindex/follow/nofollow de páginas individuales, con mayor prioridad que robots.txt. ③X-Robots-Tag es a nivel de encabezado de respuesta HTTP, con la misma función que robots meta pero devuelto a través de encabezados HTTP, puede usarse para control de indexación de archivos no HTML (como PDF, imágenes). Para evitar completamente que una página se indexe, debes usar noindex (meta o X-Robots-Tag), confiar solo en robots.txt Disallow no garantiza que no se indexe.
Al generar Meta tags con esta herramienta ¿todavía necesito configurar datos estructurados Schema.org (JSON-LD)?
Las Meta tags y los datos estructurados Schema.org son relaciones complementarias, no de sustitución. Las Meta tags resuelven principalmente: título y descripción en páginas de resultados de motores de búsqueda, tarjetas de compartir en redes sociales, control básico de rastreo. Los datos estructurados Schema.org (generalmente incrustados en la página en formato JSON-LD) resuelven: resultados de búsqueda enriquecidos (Rich Snippets), como calificación por estrellas de productos, precio e inventario, navegación de breadcrumb, fecha de publicación de artículos, bloques plegables FAQ, hora y lugar de eventos y otras visualizaciones mejoradas, estas pueden mejorar aún más el CTR. Se recomienda que páginas importantes configuren ambas simultáneamente: ①Meta tags básicas (contenido generado por esta herramienta); ②datos estructurados Schema.org correspondientes al tipo de página. Ambas no entran en conflicto, optimizando conjuntamente el efecto de visualización de búsqueda.
Solución de problemas
Al compartir enlaces en Facebook/Twitter/LinkedIn no se muestra imagen, o la imagen mostrada no es la og:image configurada
La URL de og:image usa ruta relativa o localhost/127.0.0.1/IP de red interna, los rastreadores de plataformas sociales no pueden acceder a direcciones de red pública La imagen está bloqueada por robots.txt, o el servidor/WAF/CDN/firewall intercepta los User-Agent de rastreadores de Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) El tamaño de imagen no cumple los requisitos: og:image menor de 200×200 píxeles será ignorado, imagen de summary_large_image menor de 300×157 se degradará El archivo de imagen es demasiado grande (más de 5MB-8MB) o formato no compatible (solo admite JPG/PNG/WebP/GIF, no admite SVG, algunas plataformas no admiten otros formatos) Las etiquetas se renderizan dinámicamente del lado del cliente con JavaScript, los rastreadores de plataformas sociales no ejecutan JS, solo SSR/SSG puede ser rastreado La URL de og:image devuelve error 404/403/5xx, o redirige a página de inicio de sesión/página de error La plataforma almacenó en caché la versión anterior sin imagen, después de modificar etiquetas no usaste la herramienta oficial Debugger para forzar Scrape Again y actualizar la caché
En los resultados de búsqueda de Google el title se muestra truncado e incompleto, o Google reescribió automáticamente el título
La longitud de title excede los 50-60 caracteres chinos (o aproximadamente 600 píxeles de ancho), la parte excedida se trunca con puntos suspensivos El title contiene símbolos especiales de ancho completo, emoji ocupan ancho adicional causando truncamiento temprano, la longitud real mostrada es más corta que el recuento de caracteres Relleno de palabras clave en title o no coincide con el contenido de la página, Google considera que tu título no es preciso y extraerá otro texto del cuerpo de la página o texto ancla para reescribir el título El title de cada página está repetido o es muy similar, Google no puede distinguir las páginas y generará automáticamente diferentes títulos El title solo tiene nombre de marca sin descripción del tema de la página, o el nombre de marca es demasiado largo ocupando demasiado espacio Se usaron demasiados separadores como |, -, _, o el método de separación no es estándar, causando que Google juzgue como relleno de separadores La página tiene jerarquía de títulos h1-h6 desordenada, o múltiples etiquetas h1, Google puede usar contenido h1 para reescribir title
Después de configurar Meta tags la página muestra caracteres chinos ilegibles, caracteres especiales anómalos, o errores de sintaxis HTML
No se declaró <meta charset="UTF-8">, o la posición de declaración no está al principio de head (debe estar antes de title) Los valores de atributo content como meta description, og:description contienen comillas dobles (") sin escapar, causando que la etiqueta se cierre prematuramente, estructura HTML desordenada El contenido contiene caracteres especiales como &, <, > pero no se escaparon como entidades HTML (& debe escribirse como &, < como <, > como >) La codificación de guardado real del archivo HTML no es UTF-8 (por ejemplo se guardó como GBK/GB2312), pero charset se declara como UTF-8 causando falta de coincidencia de codificación El encabezado Content-Type de la respuesta HTTP del servidor especificó codificación no UTF-8 como charset=GBK, anulando la declaración de meta charset Se usó escapado de entidades incorrecto (por ejemplo se escaparon comillas fuera de atributos con ", o se escaparon caracteres que no necesitaban escapado) El CMS o motor de plantillas escapó automáticamente repetidamente al escapar (por ejemplo & se convirtió en &amp;, mostrándose como & en lugar de &)
Se configuró la etiqueta canonical pero no tiene efecto, URL duplicadas siguen siendo indexadas, o canonical es ignorada por motores de búsqueda
La URL a la que apunta canonical devuelve error 404/403/5xx, o redirige a otras páginas, los motores de búsqueda no pueden acceder a la versión canónica La página A tiene canonical a B, la página B tiene canonical a A (canonical circular), o canonical en cadena A→B→C→D confunde a los motores de búsqueda canonical apunta a páginas con contenido muy diferente (no contenido altamente duplicado/idéntico), los motores de búsqueda consideran que canonical está configurada incorrectamente y la ignoran canonical usa ruta relativa (como href="/page") en lugar de URL absoluta completa (href="https://example.com/page") El sitio tiene múltiples versiones de protocolo/dominio (http/https, www/sin www) con canonical mutua, pero el redireccionamiento 301 no está bien configurado Páginas de paginación (como ?page=2, ?page=3) todas tienen canonical a la primera página, causando que el contenido posterior no se indexe en absoluto, los motores de búsqueda ignorarán esta canonical irrazonable La misma página declara diferentes URL canonical simultáneamente a través de etiqueta link en HTML, encabezado HTTP Link: <...>; rel="canonical" y Sitemap, conflicto de prioridad
Después de modificar Meta tags al volver a compartir todavía muestra el título, descripción o imagen antiguos, no ve el efecto de actualización
Las plataformas sociales (Facebook/Twitter/LinkedIn) almacenan en caché la información de OG/Twitter Card durante mucho tiempo (puede durar de varios días a varias semanas), no vuelven a rastrear cada vez que se comparte No se usaron las herramientas oficiales de depuración de las plataformas correspondientes (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) para ejecutar Scrape Again/nuevo rastreo para forzar actualización de caché CDN (Cloudflare, CDN de Alibaba Cloud, CDN de Tencent Cloud, etc.) almacenó en caché la página HTML antigua, los rastreadores capturaron la versión antigua en caché del CDN Caché del lado del servidor, caché SSR, complementos de caché de WordPress, caché de páginas Redis, etc. no se eliminaron, la salida sigue siendo HTML antiguo La URL de recursos como og:image no cambió pero el contenido de la imagen se actualizó, navegadores y plataformas almacenan en caché basándose en URL, agregar parámetros de versión como ?v=2 es necesario para forzar actualización Después de modificar etiquetas la página no se implementó correctamente en producción, se modificó el archivo local pero el entorno de producción sigue siendo la versión anterior Las Meta tags se colocaron en el área body del HTML o se insertaron dinámicamente con JS, los rastreadores ni siquiera leyeron las etiquetas nuevas, leyeron la versión almacenada en caché anteriormente
Se configuró accidentalmente noindex,nofollow causando que todo el sitio o páginas importantes no sean indexadas por Google, no se pueden encontrar en búsquedas
La etiqueta noindex,nofollow del entorno de desarrollo/prueba no se eliminó al lanzar, todo el sitio se publicó con noindex La opción «Aconsejar a los motores de búsqueda que no indexen este sitio» en el panel de administración de CMS como WordPress está marcada, agregando automáticamente noindex a todas las páginas robots.txt también estableció Disallow, causando que el rastreador ni siquiera capture la página y menos vea noindex, pero si hay enlaces externos apuntando aún puede ser indexado El encabezado de respuesta HTTP devolvió X-Robots-Tag: noindex (mayor prioridad que la etiqueta meta, mucha gente no nota los encabezados de respuesta), por ejemplo causado por configuración de Nginx/Apache, configuración de CDN CDN/WAF/complemento de seguridad agregaron automáticamente encabezado noindex a la página (parte de complementos de seguridad por operación errónea o configuración predeterminada) Se usaron directivas combinadas incorrectas, por ejemplo se escribió noindex como index pero otros parámetros entran en conflicto, o la plantilla de todo el sitio incluye noindex solo se eliminó en la página de inicio y las páginas internas todavía lo tienen Al migrar el sitio desde el entorno de staging/prueba al entorno de producción, no se actualizaron base URL, canonical, configuración de robots, el noindex del entorno de prueba permaneció en el entorno de producción
Glosario
- Meta tag
- Etiqueta meta HTML, colocada en el área head, usada para describir metadatos de la página, transmitiendo a navegadores, motores de búsqueda y plataformas sociales el título, descripción, autor, reglas de rastreo y otra información de la página.
- title
- Etiqueta de título HTML, define el título de la pestaña del navegador y el título cliqueable en la página de resultados del motor de búsqueda (SERP), es la etiqueta más importante para SEO, longitud recomendada 50-60 caracteres.
- meta description
- Etiqueta meta de descripción de página, muestra el texto de descripción debajo del título en SERP, no afecta directamente la clasificación pero afecta significativamente la tasa de clics (CTR), longitud recomendada 120-160 caracteres chinos.
- meta keywords
- Etiqueta meta de palabras clave, los primeros motores de búsqueda la usaban para juzgar el tema de la página, debido al abuso Google ya anunció en 2009 que no la usa más, ahora básicamente no tiene valor SEO.
- canonical
- Etiqueta de enlace canónico (rel="canonical"), dice a los motores de búsqueda qué URL es la versión preferida entre múltiples URL similares, usada para resolver problemas de contenido duplicado, URL con parámetros, dominio preferido, etc.
- Open Graph
- Protocolo de metadatos de compartir en redes lanzado por Facebook en 2010, usa etiquetas con prefijo og: para controlar el estilo de tarjeta al compartir enlaces en plataformas sociales, compatible con casi todas las plataformas como Facebook, LinkedIn, WhatsApp, Slack.
- Twitter Card
- Protocolo de tarjeta de compartir de la plataforma Twitter/X, usa etiquetas con prefijo twitter:, admite cuatro tipos de tarjeta: summary, summary_large_image, app, player, Twitter las lee con prioridad sobre etiquetas OG.
- og:type
- Etiqueta de tipo de página Open Graph, especifica el tipo de contenido, valores comunes son website (sitio general), article (artículo), product (producto), profile (perfil personal), determina cómo las plataformas sociales analizan el contenido.
- og:image
- Etiqueta de imagen de compartir Open Graph, especifica la URL de la imagen de vista previa de la tarjeta de compartir, tamaño recomendado 1200×630 píxeles (proporción 1.91:1), debe ser una URL absoluta de acceso público.
- twitter:card
- Etiqueta de tipo Twitter Card, especifica el tipo de tarjeta de compartir, valores son summary (imagen pequeña), summary_large_image (imagen grande), app (aplicación), player (reproductor), es etiqueta obligatoria para Twitter Card.
- robots meta
- Etiqueta meta de control de rastreo, dice a los motores de búsqueda a nivel de página si indexar (index/noindex), si seguir enlaces (follow/nofollow), si mostrar instantánea (noarchive), etc., con mayor prioridad que robots.txt.
- noindex
- Una de las directivas robots, prohíbe a los motores de búsqueda indexar la página, la página no aparecerá en resultados de búsqueda; el rastreador aún rastreará la página para leer esta etiqueta, pero no la indexará. Comúnmente usada en páginas de prueba, páginas internas, páginas de bajo valor.
- nofollow
- Una de las directivas robots, prohíbe a los rastreadores de motores de búsqueda seguir todos los enlaces de la página (a diferencia de rel="nofollow" para enlaces individuales), comúnmente usada en contenido generado por usuarios, enlaces publicitarios, páginas con enlaces externos no confiables.
- theme-color
- Etiqueta meta de color de tema del navegador, define el color de la barra de direcciones/barra de herramientas del navegador móvil, efectiva en navegadores como Android Chrome, Safari 15+, proporcionando una experiencia de marca más inmersiva.
- author meta
- Etiqueta meta de autor (name="author"), declara información del creador del contenido de la página, usada en blogs y sitios de noticias junto con article:author para identificar al autor del contenido.
- HTML entity
- Caracteres de escapado de entidades HTML, usados para mostrar caracteres especiales de forma segura en HTML, como & representa &, < representa <, > representa >, " representa ", ' representa ', evitando errores de sintaxis y problemas XSS.
- SERP
- Search Engine Results Page, página de resultados del motor de búsqueda, se refiere a la página de resultados devuelta después de que el usuario ingresa palabras clave en motores de búsqueda como Google/Baidu, que contiene elementos como título, descripción, URL, fragmentos multimedia enriquecidos.
- CTR
- Click-Through Rate, tasa de clics, se refiere a la proporción de clics de usuarios después de mostrarse los resultados de búsqueda. El CTR es uno de los indicadores centrales de SEO, directamente afectado por el atractivo de title y meta description, y también es una señal de usuario en el algoritmo de clasificación de Google.
- crawl budget
- Presupuesto de rastreo, el número de rastreos y cantidad de páginas que el motor de búsqueda asigna a tu sitio web en un tiempo determinado. Usar razonablemente robots meta, canonical, noindex puede evitar desperdiciar presupuesto de rastreo en páginas de bajo valor, permitiendo que páginas importantes se rastreen con mayor frecuencia.
- viewport
- Etiqueta meta de ventana gráfica (name="viewport"), etiqueta esencial para páginas web responsivas modernas, controla el ancho de renderizado y escala inicial de la página en dispositivos móviles, configuración estándar es width=device-width, initial-scale=1.0.
Tabla de lista de Meta tags comunes y descripción de atributos
| Nombre de etiqueta | Función | Ejemplo de atributo/escritura | Notas |
|---|---|---|---|
title | Título de página, título de pestaña del navegador y título SERP | <title>Título de página | Marca</title> | Recomendado 50-60 caracteres, palabras clave principales al principio, marca al final, único para cada página |
meta description | Descripción de página, texto de descripción mostrado en SERP | <meta name="description" content="..."> | Recomendado 120-160 caracteres chinos, incluye palabras clave y CTA, único para cada página |
meta keywords | Etiqueta de palabras clave | <meta name="keywords" content="palabra1,palabra2,palabra3"> | Motores de búsqueda principales como Google/Bing/Baidu ya no la usan, no es necesario configurarla con prioridad |
link canonical | Enlace canónico, especifica URL preferida | <link rel="canonical" href="https://example.com/page"> | Debe escribirse URL absoluta completa, resuelve problemas de contenido duplicado, no configurar en cadena |
meta robots | Control de rastreo, reglas de indexación/seguimiento a nivel de página | <meta name="robots" content="index,follow"> | Mayor prioridad que robots.txt, noindex es lo que realmente prohíbe la indexación |
meta charset | Declaración de codificación de caracteres | <meta charset="UTF-8"> | Debe colocarse al principio de head, páginas web modernas usan UTF-8 uniformemente |
meta viewport | Control de ventana gráfica móvil | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Esencial para páginas web responsivas, debe configurarse o la experiencia móvil será muy mala |
meta author | Información de autor de página | <meta name="author" content="Nombre del autor"> | Identifica al creador del contenido, usado en blogs/sitios de noticias |
meta theme-color | Color de tema del navegador móvil | <meta name="theme-color" content="#2563eb"> | Compatible con Android Chrome/Safari 15+, recomendado usar color principal de marca |
og:title | Título de compartir Open Graph | <meta property="og:title" content="..."> | Título de tarjeta de compartir en redes, puede ser diferente del SEO title, más atractivo para clics |
og:description | Descripción de compartir Open Graph | <meta property="og:description" content="..."> | Descripción de tarjeta social, recomendado dentro de 200 caracteres |
og:image | Imagen de compartir Open Graph | <meta property="og:image" content="https://.../img.jpg"> | Recomendado 1200×630 píxeles, URL absoluta, acceso público, archivo <5MB |
og:url | URL canónica Open Graph | <meta property="og:url" content="https://example.com/page"> | Debe ser consistente con canonical, usado para agregar recuentos de me gusta y compartidos |
og:type | Tipo de contenido Open Graph | <meta property="og:type" content="website"> | Opcional website/article/product/profile, diferentes tipos admiten diferentes atributos extendidos |
og:site_name | Nombre del sitio Open Graph | <meta property="og:site_name" content="GeekFormat"> | Muestra el nombre general del sitio, diferente del título de página |
twitter:card | Tipo de Twitter Card | <meta name="twitter:card" content="summary_large_image"> | Opcional summary/summary_large_image/app/player |
twitter:site | Cuenta oficial de Twitter | <meta name="twitter:site" content="@username"> | Completa el @handle de Twitter del sitio/marca |
twitter:image | Imagen de Twitter Card | <meta name="twitter:image" content="https://.../img.jpg"> | Si no se completa se usa og:image como respaldo, tipo summary usa 1:1, large usa 2:1 |
Tabla de escenarios de aplicación de og:type
| Valor og:type | Escenarios de aplicación | Proporción de imagen recomendada | Etiquetas extendibles |
|---|---|---|---|
website | Página de inicio del sitio, páginas generales, sobre nosotros, contacto y otras páginas que no son de contenido/producto | 1.91:1 (1200×630) | Etiquetas og: básicas son suficientes, sin extensiones especiales |
article | Artículos de blog, comunicados de prensa, documentos de conocimiento, tutoriales, contenido de columna y otro contenido relacionado con el tiempo | 1.91:1 (1200×630) | article:published_time (hora de publicación), article:modified_time (hora de modificación), article:author (autor), article:section (categoría), article:tag (etiqueta) |
product | Páginas de detalle de productos de comercio electrónico, páginas de productos, páginas de servicios pago, páginas de destino de productos SaaS | 1.91:1 (1200×630) imagen de producto recomendada cuadrada o 4:3 | product:price:amount (precio), product:price:currency (moneda como CNY/USD), product:availability (estado de inventario), product:brand (marca) |
profile | Páginas de perfil personal, páginas de datos de usuario, páginas de autor, páginas de currículum personal | Imagen de avatar 1:1 o imagen de portada 1.91:1 | profile:first_name (nombre), profile:last_name (apellido), profile:username (nombre de usuario), profile:gender (género) |
Tabla de tipos de twitter:card
| Tipo twitter:card | Estilo de tarjeta | Requisitos de imagen | Escenarios de aplicación | Campos obligatorios adicionales |
|---|---|---|---|---|
summary | Tarjeta de resumen con imagen pequeña, imagen pequeña a la izquierda/arriba, texto a la derecha/abajo | Mínimo 144×144 píxeles, cuadrado 1:1, <5MB | Artículos comunes, páginas, páginas de herramientas, contenido general | Sin campos adicionales obligatorios, completar etiquetas básicas es suficiente |
summary_large_image | Tarjeta de resumen con imagen grande, banner grande de ancho completo en la parte superior, fuerte impacto visual | Mínimo 300×157 píxeles, recomendado 1200×675, proporción aproximadamente 2:1, <5MB | Artículos de blog, páginas de productos, páginas de eventos, contenido que espera alta tasa de clics (recomendado usar por defecto) | Sin campos adicionales obligatorios, asegúrate de que el tamaño de imagen cumpla los requisitos |
app | Tarjeta de descarga de aplicación, muestra icono de aplicación, nombre, calificación, botón de descarga | Logo de aplicación imagen cuadrada, 144×144 o más | Páginas de descarga de aplicaciones iOS/Android, páginas de promoción de aplicaciones móviles | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (ID de tienda de aplicaciones), twitter:app:url:iphone/ipad/googleplay (scheme personalizado) |
player | Tarjeta de reproductor de video/audio, incrusta directamente reproductor multimedia en el flujo | Imagen de portada del reproductor, la página del reproductor debe ser HTTPS | Páginas de contenido de video, podcasts, páginas de audio, páginas de transmisión en vivo | twitter:player (URL del reproductor, HTTPS), twitter:player:width (ancho del reproductor), twitter:player:height (alto del reproductor), twitter:player:stream (dirección de flujo de video/audio), requiere aprobación de lista blanca de Twitter |
- Simulador de Daltonismo
- Convertidor de colores
- Convertidor de .htaccess a Nginx
- Conversor de SQL
- Analizador de Cookies
- Generador de Expresiones Cron
- Validador de Expresiones Cron
- Formateador de CSS
- Minificar CSS
- CSV a Excel
- Conversor de Monedas
- Comparador de Diferencias
- Generador de Favicon
- Formateador de XML
- Convertidor Hexadecimal
- Formateador de HTML
- Minificador de HTML
- HTML a Markdown
- Markdown a HTML
- Formatear JavaScript
- Minificador de JS
- Formateador de JSX
- Minificador de JSX
- Agrupación de palabras clave
- Generador Lorem Ipsum
- Generador de Tablas Markdown
- Generador de Meta Tags
- Generador de contraseñas
- Verificador de fortaleza de contraseña
- Generador de Códigos QR/Códigos de Barras
- Probador de Expresiones Regulares
- Generador de Slugs
- Constructor de SQL
- Formateador de SQL
- Contador de Palabras
- Herramienta de Tiempo
- Formateador de TS
- Minificador de TS
- Formateador de TSX
- Minificador de TSX
- Conversor Unix Timestamp
- Generador UUID
- Formateador de YAML
- Convertidor de casos