Cuando lance por primera vez un nuevo sitio web o blog, probablemente desee compartirlo con sus amigos y familiares de inmediato. Pero si no lo configuró correctamente, todo lo que verán es un enlace aburrido.
Incluso si la vista previa carga una imagen, es posible que no sea la que desea ver. Pero puedes arreglar eso.
Las metaetiquetas son etiquetas HTML que no muestran ningún contenido en su página web. Viven dentro del etiquetas en su HTML. Cuando motores de búsqueda y otros servicios, como Facebook, leen su página, obtienen información específica de las metaetiquetas.
Para muchas personas, Google ES Internet. Podría decirse que es el invento más importante desde la propia Internet. Y aunque los motores de búsqueda han cambiado mucho desde entonces, los principios subyacentes siguen siendo los mismos.
Las metaetiquetas son lo que necesita para que las redes sociales y los mensajes de texto procesen sus enlaces correctamente. Cuando comparte un enlace a través de Facebook, por ejemplo, Facebook sigue el enlace a la página. Luego lee la página e intenta averiguar qué es todo.
Lo más importante es que intenta encontrar un título, una descripción y una imagen. Si no puede encontrarlos, solo mostrará un enlace simple sin lujos. Para que Facebook muestre un título, una descripción y una imagen específicos, deberá agregar metaetiquetas específicas para indicarle lo que debe buscar.
Si los sitios de redes sociales como Facebook y Twitter obtienen la información que necesitan de su sitio web, crearán una tarjeta. Si todo salió según lo planeado, debería verse como lo esperabas.
RELACIONADO: Cómo construir bots de Twitter, Instagram y Reddit usando Python
Si creó su sitio web con HTML simple o un marco de interfaz de usuario, agregar metaetiquetas debería ser simple. Van en la misma área que su título, estilo y etiquetas de script, como en el siguiente ejemplo:
Lee Nathan - Escritor de desarrollo personal
...
Puede ver que ya hay algunas metaetiquetas en su lugar. Estos no son los que necesitará para que su sitio web se muestre correctamente en los enlaces, son solo algunos valores predeterminados de bajo nivel.
Cambiar las metaetiquetas en WordPress es más complicado. Las instrucciones completas tomarían una guía completa. En su lugar, aquí hay un par de sugerencias para ayudarlo a comenzar:
- Si se siente cómodo editando su tema, las metaetiquetas deben ubicarse en el header.php archivo de su tema actual.
- Si no puede acceder a su tema o no quiere tratar con él, puede cambiar sus metaetiquetas con un complemento como Gestión avanzada de metaetiquetas.
Echa un vistazo a los mejores proveedores de alojamiento de WordPress si está interesado en lanzar un sitio en la plataforma.
Cómo crear una tarjeta de Facebook
Ahora que ha descubierto cómo acceder a sus metaetiquetas, puede comenzar a editarlas. Estas son las etiquetas mínimas que Facebook quiere ver:
Las propiedades de título y descripción le dicen a Facebook qué texto mostrar. La propiedad URL se puede vincular a una subpágina para promociones especiales o pruebas A / B.
La propiedad de la imagen debe ser una dirección completa, no relativa a su página de índice como /image.jpg. El mejor tamaño de imagen para usar es 1200x628, ya que este tamaño será el más compatible en todos los dispositivos y sitios de redes sociales.
Cómo crear una tarjeta de Twitter
La tarjeta de Twitter es casi la misma que la tarjeta de Facebook, pero con diferentes metaetiquetas. Así es como se ven las metaetiquetas de Twitter:
Las propiedades de título y descripción son las mismas que las de Facebook; la propiedad de la imagen también sigue las mismas reglas. Y 1200x628 es un buen tamaño para empezar.
La principal diferencia es la propiedad de la tarjeta. Este ejemplo usa "summary_large_image" para crear una tarjeta que se ve más o menos igual que la tarjeta de Facebook. Sin embargo, Twitter tiene otras opciones.
Cómo asegurarse de que su vista previa se vea bien
Puede publicar un tweet y eliminarlo rápidamente media docena de veces hasta que obtenga su tarjeta correctamente. También puede enviarse un mensaje de Facebook a sí mismo. Pero esos métodos son un poco torpes. Afortunadamente, ambos servicios brindan una herramienta útil para facilitar la verificación de sus tarjetas.
Facebook tiene un depurador para compartir. Y Twitter tiene un validador de tarjetas. Ambas herramientas hacen la misma tarea de permitirle ver cómo funcionan los enlaces; simplemente usan nombres diferentes.
Otros aspectos que debe probar
Ahora ha conseguido que el enlace de su sitio se vea genial en las dos grandes redes sociales. Lo más probable es que se vea bien en todas partes, pero debe verificar que así sea. Por ejemplo, si tiene información en la parte inferior o superior de una imagen, es posible que se recorte en el dispositivo móvil.
Móvil
Antes de continuar, es una buena idea asegurarse de que su enlace aún se vea bien en el dispositivo móvil. Como se mencionó, su imagen podría recortarse en la pantalla más pequeña. El ejemplo que se mostró anteriormente tenía la imagen demasiado baja, por lo que solo se podía ver la mitad superior de la cabeza.
SMS y mensajeros
Es una simple cuestión de enviarte un mensaje de texto (o un mensaje a través de un servicio como WhatsApp) con el enlace. No tiene que preocuparse por una herramienta de validación. Lo más probable es que si se ve bien en las aplicaciones de redes sociales, se verá bien aquí.
Si está trabajando en su sitio web personal, definitivamente desea que se vea bien en LinkedIn. Por suerte, LinkedIn también proporciona una herramienta de validación llamó al inspector de correos. Además, no necesita preocuparse por más metaetiquetas porque LinkedIn usa las etiquetas de Facebook.
En qué trabajar a continuación
La información que cubrimos debería ser suficiente para comenzar. Pero si desea obtener más información, consulte Guía de Facebook para las etiquetas o La página de Twitter en las etiquetas.
La web está repleta de herramientas para ayudar a cualquiera a crear sus propias imágenes de aspecto profesional y para compartir. Aquí están nuestros favoritos.
- Programación
- HTML
- Página principal
- Herramientas para webmasters
Lee es un nómada a tiempo completo y un erudito con muchas pasiones e intereses. Algunas de esas pasiones giran en torno a la productividad, el desarrollo personal y la escritura.
Suscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Un paso más…!
Confirme su dirección de correo electrónico en el correo electrónico que le enviamos.