() translation by (you can also view the original English article)
En éste consejo rápido voy a presentarte una sencilla pero muy útil herramienta llamada Hey Meta. Si estás interesado en ver como se ve el perfil para compartir de tu sitio web, y quisieras asegurarte de que son correctas las metaetiquetas que estas usando, Hey Meta es justo lo que necesitas. ¡Adentrémonos!
Consigue Tus Metaetiquetas Adecuadas
Comprueba Tus Metaetiquetas
Comprueba la efectividad de la actual configuración de metaetiquetas de tu sitio web al escribir la URL en el campo de ingreso de datos. Se te mostrará una previsualización de una tarjeta de red social (la que se mostraría en redes sociales, aplicaciones para compartir etc.) y el título, la descripción, la imagen destacada de la URL en cuestión.
Si tu página web no tiene en absoluto metaetiquetas para éstos elementos, nada se mostrará.
Genera las Metaetiquetas Correctas
Si parece que a tu página le faltan detalles, o muestra metaetiquetas incorrectas (o no óptimas) puedes utilizar Hey Meta para que te genere las metaetiquetas correctas. Ingresa la información que quisieras mostrar en los campos mostrados:
Lo mismo puede hacerse para la descripción del sitio web, URL, y la imagen destacada. Las etiquetas generadas se mostrarán en las previsualizaciones, y el marcado se verá similar a éste:
1 |
<!-- HTML Meta Tags -->
|
2 |
<title>Test website</title> |
3 |
<meta name="description" content="This is the website description. Nice eh?"> |
4 |
|
5 |
<!-- Google / Search Engine Tags -->
|
6 |
<meta itemprop="name" content="Test website"> |
7 |
<meta itemprop="description" content="This is the website description. Nice eh?"> |
8 |
<meta itemprop="image" content="https://lorempixel.com/400/200/"> |
9 |
|
10 |
<!-- Facebook Meta Tags -->
|
11 |
<meta property="og:url" content="https://nothing.com"> |
12 |
<meta property="og:type" content="website"> |
13 |
<meta property="og:title" content="Test website"> |
14 |
<meta property="og:description" content="This is the website description. Nice eh?"> |
15 |
<meta property="og:image" content="https://lorempixel.com/400/200/"> |
16 |
|
17 |
<!-- Twitter Meta Tags -->
|
18 |
<meta name="twitter:card" content="summary_large_image"> |
19 |
<meta name="twitter:title" content="Test website"> |
20 |
<meta name="twitter:description" content="This is the website description. Nice eh?"> |
21 |
<meta name="twitter:image" content="https://lorempixel.com/400/200/"> |
22 |
|
23 |
<!-- Meta Tags Generated via https://heymeta.com -->
|
Aquí verás las metaetiquetas HTML nativas como <title>, etiquetas de Twitter, y las etiquetas Open Graph <meta property="og:title"> que permiten compartir en redes sociales. Éstas etiquetas pueden colocarse en el <head> de tu documento HTML.
Conclusión
¡Asegúrate de que tus metaetiquetas estén mostrando correctamente los detalles de tu sitio web!
Más Lecturas
