Informe: Tarjetas Sociales
Estamos comprobando si el sitio web tiene tarjetas sociales (Open Graph y Twitter Cards) y si son válidas
Las tarjetas sociales son una forma de mostrar el sitio web en las redes sociales. Son un requisito para cualquier sitio web en la web moderna y deben reflejar la identidad de la marca. También son utilizadas por los motores de búsqueda para mostrar el sitio web en los resultados de búsqueda, generalmente con una imagen grande.
Recomendaciones
- Cree una imagen de tarjeta social de alta calidad con dimensiones de 1200x630px para una visualización óptima en todas las plataformas
- Incluya el logotipo de su marca y una imagen atractiva que represente su contenido
- Use texto claro y legible con buen contraste con el fondo
- Pruebe sus tarjetas sociales utilizando el Depurador de Compartir de Facebook y el Validador de Tarjetas de Twitter
- Asegúrese de que sus tarjetas sociales sean coherentes con la identidad de su marca y el diseño de su sitio web
Errores conocidos
- El sitio web tiene tarjetas sociales inválidas (ver detalles)
- El sitio web no tiene tarjetas sociales
Tarjeta Social Mínima
Este es un ejemplo de la tarjeta social mínima que se requiere para ser mostrada correctamente en la mayoría de las redes sociales. Es un buen comienzo, pero no es la mejor manera de mostrar el sitio web en todas las redes sociales que pueden esperar otros campos también.
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->
Tarjetas de Twitter
Este es un ejemplo completo de una implementación de Tarjeta de Twitter que muestra todos los campos disponibles y su uso adecuado. Aunque no todos los campos son obligatorios, implementarlos proporciona la mejor visualización posible en Twitter y otras plataformas que soportan Tarjetas de Twitter.
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of your page." />
<meta name="twitter:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta name="twitter:url" content="https://your-website.com/your-page" /><!-- optional -->
<meta name="twitter:site" content="@your-twitter-handle" /><!-- optional -->
<meta name="twitter:creator" content="@your-twitter-handle" /><!-- optional -->
Tarjetas Open Graph
Este es un ejemplo completo de una implementación de Tarjeta Open Graph que muestra todos los campos disponibles y su uso adecuado. Aunque no todos los campos son obligatorios, implementarlos proporciona la mejor visualización posible en Facebook, LinkedIn y otras plataformas que soportan el protocolo Open Graph.
<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta property="og:type" content="website" /><!-- optional -->
<meta property="og:site_name" content="Your Website Name" /><!-- optional -->
<meta property="og:locale" content="en_US" /><!-- optional -->
<meta property="og:locale:alternate" content="en_GB" /><!-- optional -->
<meta property="og:locale:alternate" content="en_AU" /><!-- optional -->
<meta property="og:locale:alternate" content="en_CA" /><!-- optional -->
<meta property="og:locale:alternate" content="en_NZ" /><!-- optional -->
<meta property="og:locale:alternate" content="en_ZA" /><!-- optional -->