Aprendí el valor de las metaetiquetas de una manera vergonzosa. Hace años envié una página de destino de la que estaba orgulloso, publiqué el enlace en algunos lugares y la vi aparecer en todas partes como una URL simple sin título, sin descripción y con un ícono de imagen roto. La página en sí estaba bien, pero nunca la había añadido Gráfico abierto etiquetas, por lo que cada plataforma social volvió a adivinar, y cada una de ellas adivinó mal. El contenido era bueno y la presentación del enlace era basura, lo que en la práctica significaba muchos menos clics de los que merecía la página.
Las metaetiquetas son el pequeño bloque de HTML que decide cómo se ve su página en todas partes excepto en la página misma: en Google & #39;s resulta, en un despliegue de Slack, en una tarjeta de Facebook o LinkedIn, en un tweet. Es fácil equivocarse porque hay tres estándares superpuestos (etiquetas SEO estándar, Open Graph y tarjetas de Twitter) y cada uno quiere nombres de propiedad ligeramente diferentes para lo que suele ser la misma información. Yo construyo Toolz.dev y escribir mucho contenido a su alrededor, así que configuré metadatos constantemente, y construí el Generador de metaetique para producir un bloque de etiquetas correcto, completo y listo para copiar a partir de un conjunto de entradas, con advertencias de longitud, nunca envío un título que se trunca nuevamente.
TL;Dr: Las metaetiquetas controlan su fragmento de búsqueda y las vistas previas de sus enlaces sociales. Necesita tres conjuntos superpuestos (etiquetas SEO estándar, Open Graph para la mayoría de las plataformas y tarjetas de Twitter) y comparten la mayor parte de su contenido pero usan diferentes nombres de atributos. El Generador de metaetique Construye los tres desde un solo formulario, le advierte cuando su título pasa ~ 60 caracteres o la descripción pasa ~160, escapa de su texto de forma segura y puede emitir un bloque JSON-LD coincidente, todo en su navegador.
¿Qué son las metaetiquetas y por qué son importantes?
Las etiquetas meta son elementos que viven dentro de una página <head> y llevar información sobre la página en lugar del contenido que se muestra en ella. los <title> etiqueta y el <meta name="description"> Las etiquetas son las dos más antiguas y las más importantes: juntas suelen formar el título en el que se puede hacer clic y la línea de resumen gris en un resultado de búsqueda de Google. Haz que los acertes y tu resultado se lea bien y gane clics; déjalos fuera y los motores de búsqueda sintetizan algo del texto de tu página, a menudo incómodo.
Más allá de esos conceptos básicos, se sientan dos estándares sociales. Abrir gráfico, originario de Facebook pero ahora honrado por LinkedIn, Slack, Discord, Pinterest, WhatsApp y muchos más, usa etiquetas como og:title, og:descriptiony og:image Para controlar cómo aparece un enlace compartido como tarjeta. Las tarjetas de Twitter hacen el mismo trabajo para Twitter/X con twitter: etiquetas. Existe una gran superposición (el título y la descripción suelen ser idénticos en los tres), pero cada plataforma lee su propio espacio de nombres, por lo que debe proporcionar los tres para cubrir todos los lugares donde se pueda compartir su enlace.
La razón por la que esto importa es el apalancamiento. El mismo contenido se vuelve dramáticamente más complicado cuando la vista previa de su enlace es completa y atractiva en comparación con la simple. Un buen título y descripción de levantamiento de clics de búsqueda; una tarjeta de gráfico abierta adecuada levanta clics de cada acción social. Las metaetiquetas son una configuración única por página que sigue dando sus frutos cada vez que se encuentra o se comparte la página, que es exactamente el tipo de trabajo que vale la pena realizar con cuidado. los Generador de metaetique Existe de modo que la configuración sea una tarea de llenado en lugar de copiar, pegar de memoria.
¿Cómo construye el generador de etiquetas meta las etiquetas?
El generador toma un único conjunto estructurado de entradas (título, descripción, imagen, URL, nombre del sitio y un puñado de opciones) y las divide en tres bloques coordinados de HTML. Comprender el fan-out explica por qué un formulario produce tantas etiquetas.
Desde sus campos centrales, primero escribe el Etiquetas primarias: el <title>, la meta descripción y palabras clave opcionales, autor, robots, idioma, tema-color y un enlace canónico. Luego reutiliza el mismo título, descripción e imagen para escribir el mismo Abrir bloque de gráficos con el og: Nombres de propiedades, agregando og:type, og:urly og:site_name. Finalmente escribe el Bloque de tarjetas de Twitter en compañía de twitter: nombres, incluido el estilo de la tarjeta y su identificador mapeado a twitter:site y twitter:creator. Debido a que los tres extraen de las mismas entradas, permanecen sincronizados automáticamente: no se puede darle accidentalmente a Facebook un título y a Twitter otro.
Dos detalles hacen que la salida sea segura para pegar. Primero, solo los campos que realmente completas en las etiquetas de producción, por lo que nunca envías vacío content="" atributos. En segundo lugar, cada valor se escapa a HTML: una cita, un ampersand o un corchete de ángulo en su descripción se convierte en su entidad, por lo que no puede romper el atributo y corromper su marcado. los Generador de metaetique También emite opcionalmente un bloque de datos estructurado JSON-LD coincidente, que es una forma separada pero complementaria de describir la página a los motores de búsqueda.
¿Cuánto tiempo debe ser un título y una meta descripción?
Esta es la pregunta que hace tropezar a la mayoría de las personas, y la respuesta es sobre el ancho de la pantalla, no una tapa de caracteres duro. Los motores de búsqueda truncan títulos y descripciones que exceden el espacio que asignan, por lo que los límites prácticos son los puntos más allá de los cuales su texto comienza a cortarse con una elipsis.
Para los títulos, apunte a aproximadamente 50 a 60 caracteres. Google representa títulos de hasta unos 600 píxeles de ancho, lo que equivale a unos 60 caracteres para el texto típico, y más allá corta el final. Para las metadescripciones, apunte a unos 120 a 160 caracteres; las descripciones pueden llegar a aproximadamente 160 antes del truncamiento en el escritorio y, a veces, el móvil es más corto. Ninguno de los límites es exacto porque ambos se miden en píxeles, no en caracteres (un título lleno de letras anchas se trunca antes que uno lleno de letras estrechas), pero las pautas de los caracteres son lo suficientemente cercanas como para diseñarlos.
los Generador de metaetique cuenta los personajes en vivo y te advierte mientras cruzas los umbrales: un título superior a 60 o una descripción superior a 160 se marca para que puedas recortarlo antes de que se envíe. También te empuja cuando un título es muy corto, porque un título de 20 caracteres desperdicia espacio que podrías usar para palabras clave. Estas son pautas más que reglas (un título un poco largo no es una catástrofe), pero ver el recuento mientras escribes te mantiene honesto. Si afinas mucho los títulos y las descripciones, el Contador de palabras Es útil para una copia más larga que necesita alcanzar un objetivo de longitud.
¿Cuál es la diferencia entre las etiquetas SEO, el gráfico abierto y las tarjetas de Twitter?
Sirven a diferentes consumidores, y saber cuál es el que le impide pensar que ha terminado cuando solo ha cubierto uno. Así es como los tres conjuntos se alinean para los campos que comparten.
| proponerse | SEO etiqueta | Gráfico abierto | tarjeta de twitter |
|---|---|---|---|
| Título de la | <title> |
og:title |
twitter:title |
| sumario | meta name="description" |
og:description |
twitter:description |
| Imagen de vista previa | - | og:image |
twitter:image |
| Dirección canónica | link rel="canonical" |
og:url |
twitter:url |
| Estilo de tarjeta | - | og:type |
twitter:card |
| atribución | meta name="author" |
og:site_name |
twitter:site |
La columna SEO es lo que Google lee para el resultado de la búsqueda. La columna Open Graph es lo que la mayoría de las plataformas sociales y de chat leen para sus tarjetas de enlace. La columna de Twitter es lo que lee Twitter/X. La superposición es obvia: el título y la descripción se repiten en los tres, pero debido a que cada plataforma solo mira en su propio espacio de nombres, omitir una columna significa que la plataforma vuelve a adivinar. El Generador de metaetique Rellena las tres columnas de un solo formulario para que nunca dejes una plataforma adivinando.
¿Todavía necesito datos estructurados JSON-LD?
Las metaetiquetas y los datos estructurados responden a diferentes preguntas, por lo que las útiles se complementan en lugar de reemplazarse entre sí. Las metaetiquetas indican a las plataformas cómo mostrar su página; JSON-LD le dice a los motores de búsqueda de qué se trata su página de una manera legible por máquina que puede desbloquear resultados enriquecidos.
JSON-LD es un bloque de JSON, envuelto en un <script type="application/ld+json"> etiqueta, que describe su página como una entidad mecanografiada (un sitio web, un artículo, un producto, una receta, etc.) con propiedades nombradas. Los motores de búsqueda lo utilizan para comprender las relaciones y, en los casos correctos, para mostrar resultados mejorados como firmas de artículos, calificaciones de estrellas o acordeones de preguntas frecuentes directamente en la búsqueda. No controla su fragmento como lo hacen el título y la descripción; agrega una capa de significado en la parte superior.
los Generador de metaetique emite un bloque JSON-LD inicial junto con las metaetiquetas, escrito como un sitio web o un artículo según su tipo de Open Graph y completado desde los mismos campos. Es una base sólida que puede ampliar con propiedades específicas de tipo. Vale la pena agregar datos estructurados siempre que desee ser elegible para obtener resultados enriquecidos, aunque no es una palanca de clasificación mágica: habilita funciones, no las fuerza. Para obtener una imagen más amplia de cómo encajan estas piezas, el Kit de herramientas para desarrolladores web Roundup cubre las herramientas circundantes que uso.
Casos de uso comunes para un generador de metaetiquetas
Lanzamiento de una nueva página o sitio
el obvio. Cada nueva página necesita un título, una descripción y una tarjeta social, y escribir el conjunto completo de etiquetas de SEO, gráficos abiertos y Twitter a mano es tedioso y propenso a errores. Rellenar el formulario una vez y copiar un bloque completo y correcto convierte una tarea infidia en una treinta y dos, y las advertencias de longitud significan que la página se lanza con un fragmento que se muestra completamente en lugar de truncarse el primer día.
Arreglando vistas previas de enlaces malos o faltantes
Cuando aparece un enlace compartido sin imagen o con texto incorrecto, casi siempre falta la causa o las etiquetas Open Graph tienen formato incorrecto. Reconstrucción de las etiquetas con el generador, asegurándose og:image, og:titley og:description están todos presentes y correctos: corrige la vista previa. Después de actualizar, la plataforma relevante 's a veces es necesario actualizar el caché a través de su herramienta de depuración, pero las etiquetas en sí salen bien.
Estandarización de metadatos en un equipo
En un proyecto con varios colaboradores, Meta Tags deriva: una página tiene etiquetas de Twitter, otra no, una tercera tiene una descripción del doble de la longitud recomendada. Usar un solo generador como referencia de cómo se ve un conjunto de etiquetas completo mantiene a todos los que producen la misma forma de metadatos. La salida se duplica como documentación de exactamente qué etiquetas espera el proyecto.
Preparación de metadatos para un marco
En next.js, nuxt, react o similar, no pegas RAW <meta> etiquetas: introduce valores en un encabezado o API de metadatos. El generador sigue siendo útil como fuente de verdad sobre qué etiquetas y valores necesita: complete el formulario, lea el conjunto completo y traduzcalo a su marco y al objeto de metadatos #39. Elimina las conjeturas sobre cuáles og: y twitter: campos para incluir.
¿Por qué generar metaetiquetas en el navegador?
los Generador de metaetique se ejecuta completamente en el lado del cliente. Los títulos, descripciones, URL y enlaces de imágenes que ingresa permanecen en su navegador y nunca se cargan, y la herramienta funciona sin conexión una vez cargada. Eso importa porque a menudo estás preparando metadatos para páginas que aún no son públicas: un producto inédito, un cliente & #39;s borrador de campaña, una herramienta interna. Pasar eso a un generador del lado del servidor significa entregar sus planes no anunciados a otra persona & # 39;s registros; hacerlo en el navegador significa que nunca sale de su máquina. El Privacidad de datos en herramientas en línea Guía explica por qué trato esto como no negociable.
El trabajo de metadatos también se conecta a algunas tareas vecinas. los generador de babosas Construye la URL limpia que su canónico y og:url Las etiquetas apuntan a. los Codificador de entidades HTML Es útil cuando necesitas escapar de un personaje obstinado. y el Codificador de URL/decodificador Maneja la codificación para los parámetros de consulta que a veces cuelgan de una URL canónica. Juntos cubren los trabajos pequeños y exigentes que rodean el envío de una página correctamente.
preguntasrán el
¿Qué metaetiquetas crea el generador?
Crea las etiquetas SEO estándar (título, descripción, palabras clave, autor, robots, lenguaje, color del tema y canónico), además de etiquetas Open Graph como og:title, og:description, og:image y og:url, y las etiquetas de tarjeta de Twitter correspondientes. También puede emitir un bloque de datos estructurados JSON-LD. Sólo los campos que complete producen etiquetas, por lo que el resultado permanece limpio.
¿Cuánto tiempo debe ser mi título y meta descripción?
Apunta a un título de unos 50 a 60 caracteres y una descripción de 120 a 160 caracteres. Google trunca el texto más allá de esos puntos porque mide el ancho en píxeles, no en caracteres exactos. El generador cuenta a medida que escribe y le advierte cuando es probable que se corte un título o una descripción en los resultados de búsqueda.
¿Qué son las etiquetas de gráficos abiertos y las necesito?
Las etiquetas de gráficos abiertas controlan cómo se ve su página cuando se comparte en Facebook, LinkedIn, Slack, Discord y muchas otras plataformas. Sin ellos, un enlace compartido puede no mostrar ninguna imagen o texto alternativo incómodo. Si desea obtener vistas previas de enlaces atractivos y predecibles en cualquier lugar donde se comparta su contenido, se recomienda encarecidamente las etiquetas de gráficos abiertas y el generador las crea por usted.
¿Cuál es la diferencia entre los dos tipos de tarjetas de Twitter?
La tarjeta de resumen muestra una pequeña miniatura cuadrada junto al título y la descripción, mientras que Summage_Large_Image muestra una imagen de banner grande encima de ellos. Utilice la tarjeta de imagen grande cuando tenga una imagen compartida de alta calidad que desee dominar la vista previa y use un resumen para una tarjeta más compacta. El generador te permite cambiar entre ellos y escribe el valor correcto de Twitter:card.
¿Dónde pongo las metaetiquetas generadas?
Pegue el bloque dentro del elemento de cabeza de su página HTML, idealmente cerca de la parte superior antes de otros scripts. En un marco como Next.js, React o Vue, agregue las etiquetas equivalentes a través del encabezado o API de metadatos de Framework utilizando el HTML generado como referencia para qué etiquetas y valores incluir exactamente.
¿Todavía necesito una URL canónica si tengo etiquetas de gráficos abiertas?
Sí. El enlace canónico les dice a los motores de búsqueda qué URL es la versión autorizada de una página para evitar problemas de contenido duplicado, mientras que og:url establece la URL utilizada en las vistas previas sociales. Sirven diferentes propósitos aunque los valores suelen ser idénticos, por lo que establecer ambos es una buena práctica.
¿El generador de metaetiquetas es gratuito y privado?
Sí. Es completamente gratuito sin límites, y cada etiqueta está integrada en JavaScript dentro de su navegador. El texto, las URL y los enlaces de imagen que ingresas nunca se envían a un servidor, por lo que puedes preparar metadatos de forma segura para páginas internas o no publicadas.
¿Agregar metaetiquetas mejora mi ranking de búsqueda?
Las metaetiquetas ayudan a los motores de búsqueda y las plataformas sociales a mostrar su página correctamente, pero son un factor entre muchos. Un título y una descripción sólidos pueden aumentar la tasa de clics y los datos estructurados pueden permitir resultados enriquecidos, pero la calidad del contenido, los enlaces y el estado del sitio aún generan clasificaciones. Trate las buenas metaetiquetas como las bases necesarias en lugar de un atajo de clasificación.
