Imagen predeterminada para la página de inicio cuando se comparte en redes sociales

Question

Imagen predeterminada para la página de inicio cuando se comparte en redes sociales

27 jun 2017, 20:48:12

Vistas: 58.6K

Votos: 3

Actualmente, mi página de inicio contiene algunas de las últimas entradas. Por lo tanto, cuando la página de inicio se comparte a través de redes sociales (por ejemplo, Facebook), la imagen en miniatura que se muestra proviene de la imagen superior de la última entrada publicada.

Lo que estoy tratando de hacer es configurar que cuando se comparta la página de inicio, se muestre una imagen específica predeterminada. Sin embargo, la imagen solo debe mostrarse cuando se comparte la página de inicio y no debe aparecer de otra manera en el sitio. ¿Cuál sería la mejor manera de hacer esto?

Thredolsen

175

imágenes página de inicio compartir social

Todas las respuestas a la pregunta

Las diferentes plataformas sociales utilizan distintos métodos.

Para Facebook, necesitas un conjunto de etiquetas <meta> con propiedades og, por ejemplo: og:url, og:type, og:description y og:image. og:image debe contener la ruta completa de la imagen que deseas que se muestre.

Twitter es similar pero tiene su propio mecanismo de 'tarjetas' que requiere su propio conjunto de etiquetas meta, como name="twitter:card" y name="twitter:image".

Creo que hay plugins para manejar esto. Yo tengo mi propia función simple que utiliza la miniatura de la página o una imagen alternativa si no está configurada.

Jonny Perl

296

27 jun 2017 21:06:20

Las etiquetas meta OG probablemente es lo que estás buscando, en este caso:

<meta property="og:image" content="ruta/a/foo.jpg" />

colócalo dentro de un condicional is_home() y con suerte funcionará

Dihgg

1

27 jun 2017 21:11:15

WebElaine 9.67K · Accepted Answer · 2017-06-27T21:05:32Z

Varias opciones:

Plugin listo para usar

Si estás usando Yoast WordPress SEO, tienes una configuración integrada para imágenes de Facebook. Bajo el menú SEO > Social, ve a la pestaña de Facebook y selecciona una imagen en "Configuración de la página de inicio". También puedes establecer una imagen como respaldo, para publicaciones que no tengan imagen destacada, en "Configuración predeterminada".

Otros plugins de SEO pueden tener capacidades similares.

Tema hijo

Puedes crear un tema hijo o modificar un tema personalizado. Primero, asegúrate de que el tema soporte un logotipo del sitio. Si no es así, añade soporte para logotipo personalizado.

Luego, edita o copia header.php en tu nuevo tema hijo. Dentro de las etiquetas <head></head>, incluye una verificación para if(is_front_page()) o if(is_home()) dependiendo de tus necesidades. Parece que cualquiera de los dos funcionaría en tu caso.

Si se cumple la condición, obtén la URL del logotipo personalizado:

$image = wp_get_attachment_image_url(get_theme_mod('custom_logo'), 'large');

y muéstralo dentro de las etiquetas Open Graph:

<meta property="og:image" content="<?php echo $image; ?>" />
<meta name="twitter:image" content="<?php echo $image; ?>" />

Plugin personalizado

También podrías crear tu propio plugin, si no quieres usar Yoast WordPress SEO o modificar el tema. El riesgo es que un tema o plugin existente ya pueda estar mostrando una imagen destacada, por lo que deberías verificar el código fuente de tu página y asegurarte de que nada más esté estableciendo una imagen destacada. Supongo que este es el caso ya que tu tema actual y plugins están estableciendo la imagen de la publicación más reciente cuando intentas compartirla.

Básicamente, añadirías una acción para el hook wp_head. Tu acción mostraría los datos de imagen de Open Graph y Twitter igual que si eligieras la primera opción, trabajando con el tema.

Tendrías que decidir si codificar la imagen directamente en tu plugin, o si crearías una página de opciones en algún lugar de wp-admin donde pudieras cambiar la imagen cuando quisieras.