Español
EnglishAlicia: Generador de metaetiquetas
Herramienta para SEO
<Alicia /> es la herramienta gratuita que genera las meta-etiquetas para sus proyectos SEO; úsela para optimizar la inclusión de los metadatos en sus páginas web.
Introduzca la información de su página
Metaetiquetas
Las metaetiquetas esenciales para las redes sociales
En estos días, casi todos los sitios web alientan a los visitantes a compartir sus páginas en las redes sociales. Todos hemos visto los omnipresentes íconos de Facebook y Twitter, entre otros, simplemente pidiendo que se haga clic en ellos. Esto no es ninguna sorpresa, ya que compartir a través de las redes sociales, la encarnación del boca a boca en Internet, es una de las formas más efectivas para que las empresas y las personas adquieran conciencia.
Cuando los usuarios eligen compartir estos enlaces, el desarrollador web tiene la tarea de asegurarse de que las páginas web asociadas estén preparadas correctamente, que es lo que veremos ahora. Facebook y Twitter son, con mucho, las plataformas de redes sociales más populares, así que centrémonos en esas dos.
Compartir en Facebook y Twitter
Facebook ofrece a los desarrolladores varias opciones sobre cómo aparece una página web compartida en su línea de tiempo, según el contenido del sitio web. A menos que se especifique lo contrario, todos los sitios web tienen por defecto el tipo llamado, apropiadamente, "sitio web", que es el ejemplo que usaremos.
Digamos que alguien ha compartido la página de inicio de una empresa de viajes ficticia; Facebook la muestra así:
Twitter también tiene varias formas de formatear las páginas web compartidas que aparecen en su feed, pero veremos la que es bastante similar al ejemplo anterior de Facebook, que Twitter llama "Tarjeta de resumen con imagen grande":
Como podemos ver, cada uno presenta múltiples atributos de la página web compartida:
- Una imagen y un título prominentes
- Una descripcion
- El nombre de dominio
<meta> Etiquetas property
¿Cómo especificamos estos atributos? Con <meta> etiquetas. Cuando se comparte un enlace, tanto Facebook como Twitter raspan la página web asociada y leen sus <meta> etiquetas para mostrar la información apropiada.
Facebook utiliza <meta> etiquetas que aprovechan el protocolo Open Graph, un sistema de clasificación para páginas web que se extiende más allá de las <meta> etiquetas ya definidas en HTML5. Puede encontrar una lista completa de <meta> etiquetas disponibles en el sitio web de Open Graph . Hay tantos entre los que elegir que puede resultar algo intimidante, pero en realidad solo se requieren cuatro:
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
Twitter tiene sus propias <meta> etiquetas que son similares al protocolo Open Graph, pero usa el prefijo "twitter" en lugar de "og". Al igual que con Facebook, solo se requieren unos pocos. También se especifica el tipo de formato de visualización que solicitamos a Twitter:
<meta name="twitter:title" content="European Travel Destinations ">
<meta name="twitter:description" content=" Offering tour packages for individuals or groups.">
<meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
Conciliar Meta etiquetas
No hay nada de malo en tener varias <meta> etiquetas que parecen redundantes. Demasiada información nunca daña a nadie, excepto al agregar algunos bytes adicionales al archivo HTML.
Pero para nuestros propósitos, y en aras de la brevedad, podemos aprovechar el hecho de que Twitter nos permite sustituir las <meta> etiquetas Open Graph por las suyas. Al final, excepto por la necesidad de especificar un formato de visualización, no se necesita ninguna de las etiquetas personalizadas de Twitter. Esto nos da lo siguiente, que podría considerarse el mínimo de <meta> etiquetas necesarias para que una página web se pueda compartir en las redes sociales:
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
Conciliar las pautas para la imagen es simple: siga la recomendación de Facebook de una dimensión mínima de 1200 × 630 píxeles y una relación de aspecto de 1.91: 1, pero cumpla con el requisito de tamaño de archivo de Twitter de menos de 1 MB.
Validando Meta etiquetas
Si tiene alguna duda sobre la legitimidad de reducir a estas cinco etiquetas, podemos utilizar el útil depurador de uso compartido de Facebook y el validador de tarjetas de Twitter. Ambas herramientas rasparán cualquier página web alojada en un servidor público en busca de <meta> etiquetas relevantes y mostrarán cómo se vería cuando se compartiera. También enumerará los errores y proporcionará sugerencias. Entonces, ¿cómo nos fue con nuestro ejemplo particular? Twitter parece estar bien con las cosas, pero Facebook, por otro lado, enumera un elemento como advertencia:
Análisis de redes sociales
Lo que Facebook está indicando es que si va a utilizar su herramienta de análisis, a la que llaman Domain Insights, debe proporcionar el número de identificación único asociado con su cuenta. La <meta> etiqueta entonces ser algo como esto:
<meta property="fb:app_id" content="your_app_id" />
Twitter tiene algo similar que ellos llaman Twitter Card Analytics. Para aprovechar al máximo esta herramienta, Twitter recomienda usar la siguiente <meta> etiqueta que contiene el nombre de usuario de Twitter que desea asociar con la página web compartida:
<meta name="twitter:site" content="@website-username">
Sin embargo, tenga en cuenta que si no tiene un interés particular en usar estas herramientas analíticas, omitir las dos <meta> etiquetas anteriores no tiene ningún efecto en cómo aparece una página web compartida en una línea de tiempo de Facebook o en un feed de Twitter.
¿Algo más?
La documentación de Facebook recomienda una <meta> etiqueta adicional , aunque no es necesaria. Una <meta> etiqueta que denota el nombre del sitio web en el que reside la página compartida:
<meta property="og:site_name" content="European Travel, Inc.">
Twitter también sugiere otra <meta> etiqueta que se recomienda, pero no es obligatoria:
<meta name="twitter:image:alt" content="Alt text for image">
Esto proporciona una descripción de imagen alternativa para aquellos con discapacidad visual.
Finalmente
Para reiterar, cuando se mira la documentación de Facebook y Twitter para compartir páginas web, hay muchas otras <meta> etiquetas disponibles que pueden usarse para especificar diferentes tipos de contenido. Pero, en general, bastará lo siguiente:
<!-- Essential META Tags -->
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">