Las etiquetas Open Graph (OG) son esenciales para garantizar que el contenido de tu sitio web se muestre correctamente en redes sociales al compartirse. Estas etiquetas ayudan a las plataformas a determinar qué imagen, título y descripción usar al mostrar tu contenido. En este artículo, aprenderás a agregar estas etiquetas a tu tema de WordPress usando PHP, lo que garantiza que la imagen destacada se muestre correctamente en cada publicación compartida.
Paso 1: Comprensión de las etiquetas de Open Graph
Antes de sumergirnos en el código, repasemos qué son las etiquetas Open Graph y por qué son importantes.
og:título:Define el título de la publicación.og:descripción:Proporciona una breve descripción de la publicación.og:image:Especifica la imagen que se utilizará al compartir la publicación.og:url: Especifica la URL canónica de la publicación.og:tipo: Define el tipo de contenido, como un artículo, un vídeo, etc. Para publicaciones de blog, usamos “artículo”.
Estas etiquetas se colocan dentro de la <head> sección del HTML de su sitio y son leídos por plataformas de redes sociales como Facebook, Twitter y LinkedIn, entre otras.
Paso 2: Agregar el código a su tema
Ahora que comprende la importancia de las etiquetas Open Graph, agreguemos el código necesario a su tema. funciones.php archivo. Si está utilizando un tema secundario, agregue el código al archivo del tema secundario. funciones.php archivo para garantizar que sus cambios no se sobrescriban durante futuras actualizaciones del tema principal.
- Acceder al panel de control de WordPress y ve a Apariencia > Editor de temas.
- Seleccione el
funciones.phparchivo de su tema o tema hijo. - Agregue el siguiente código PHP al final del archivo:
- función add_opengraph_tags() {
si (es_único() || es_página()) {
global $post;
si (tiene_publicación_en_miniatura($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'completo');
} demás {
// URL de la imagen predeterminada si la publicación no tiene imagen destacada
$img_src = array('https://www.ejemplo.com/imagen-predeterminada.jpg');
}// Título de la publicación
$title = obtener_el_título();
// Descripción de la publicación
$description = obtener_el_extracto();echo ' ';
eco' ';
eco' ';
eco' ';
eco' ';
}
}
agregar_acción('wp_head', 'agregar_etiquetas_opengraph');
Explicación del código:
agregar_etiquetas_de_opengraph():Esta función verifica si la página actual es una publicación o página y, si es así, genera las etiquetas Open Graph adecuadas.- Imagen destacada:
tiene_publicación_en_miniatura($post->ID):Comprueba si la publicación tiene una imagen destacada configurada.wp_get_attachment_image_src(): Obtiene la URL completa de la imagen destacada. Si la publicación no tiene una imagen destacada, se usa una imagen predeterminada.
- Título y descripción:
obtener_el_título()yobtener_el_extracto():Recupera el título y la descripción de la publicación, que se utilizan para laog:títuloyog:descripciónetiquetas, respectivamente.
- URL canónica y tipo de contenido:
obtener_enlace permanente():Recupera la URL de la publicación actual para elog:urletiqueta.og:tipo:Establezca en “artículo” para indicar que el contenido es un artículo.
Paso 3: Verificación de la implementación
Después de agregar el código a funciones.php, es importante verificar que las etiquetas Open Graph se generen correctamente.
- Ver el código fuente de la páginaEn cualquier publicación o página, haz clic derecho y selecciona "Ver código fuente" o una opción similar. Busca las etiquetas Open Graph dentro de...
<head>sección. - Utilice el depurador de uso compartido de Facebook:
- Visita el Depurador de uso compartido de Facebook.
- Ingresa la URL de tu publicación y haz clic en “Depurar”.
- Facebook mostrará la información que detecte, incluyendo la imagen, el título y la descripción. Esto ayuda a identificar si las etiquetas se generan correctamente.
Paso 4: Solución de problemas comunes
- La imagen no se muestraAsegúrate de que la imagen destacada esté configurada en la publicación. Si se usa una imagen predeterminada, verifica que la URL de la imagen sea correcta y esté disponible públicamente.
- Conflictos con otros complementosAlgunos plugins de SEO o redes sociales pueden interferir con la generación de etiquetas Open Graph. Prueba a desactivarlos temporalmente para comprobar si el problema persiste.
- Almacenamiento en caché:Si está utilizando un complemento de almacenamiento en caché, borre el caché del sitio para asegurarse de que se apliquen las nuevas configuraciones.
Resumen
Añadir etiquetas Open Graph manualmente a tu tema de WordPress con PHP es una excelente manera de garantizar que tu contenido se muestre correctamente en redes sociales. Con este código, tienes control total sobre cómo se comparten tus publicaciones, incluyendo qué imagen, título y descripción se usan. Además, evitas la necesidad de plugins adicionales, lo que mantiene tu sitio web más ligero y rápido.
Ahora que has configurado las etiquetas de Open Graph, tus publicaciones deberían compartirse correctamente en redes sociales, y las imágenes destacadas aparecerán como corresponde. Si tienes alguna pregunta o necesitas ayuda, ¡deja un comentario abajo!
Foto de Espacio negativo
