Cómo agregar etiquetas Open Graph en WordPress usando PHP

Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.

Paso 1: Comprensión de las etiquetas de Open Graph

Before diving into the code, let’s review what Open Graph tags are and why they are important.

• 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: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Estas etiquetas se colocan dentro de la 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

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s funciones.php file. If you’re using a child theme, add the code to the child theme’s funciones.php archivo para garantizar que sus cambios no se sobrescriban durante futuras actualizaciones del tema principal.

1. Acceder al panel de control de WordPress y ve a Apariencia > Editor de temas.
2. Seleccione el funciones.php archivo de su tema o tema hijo.
3. Agregue el siguiente código PHP al final del archivo:
4. 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), ‘full’);
   } demás {
   // URL de la imagen predeterminada si la publicación no tiene imagen destacada
   $img_src = array(‘https://www.example.com/default-image.jpg’);
   }// Título de la publicación
   $title = obtener_el_título();
   // Descripción de la publicación
   $description = get_the_excerpt();echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   }
   }
   add_action(‘wp_head’, ‘add_opengraph_tags’);

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() y obtener_el_extracto():Recupera el título y la descripción de la publicación, que se utilizan para la og:título y og:descripción etiquetas, respectivamente.
• URL canónica y tipo de contenido:
  • obtener_enlace permanente():Recupera la URL de la publicación actual para el og:url etiqueta.
  • og:tipo: Set to “article” to indicate that the content is an article.

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.

1. 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... sección.
2. Utilice el depurador de uso compartido de Facebook:
   • Visita el Depurador de uso compartido de Facebook.
   • Enter the URL of your post and click “Debug”.
   • 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