AMP

Añade la etiqueta meta description a tus páginas AMP

En este post vamos a ver cómo añadir la etiqueta meta description a nuestras páginas AMP. Concretamente, un ejemplo de cómo incluir la etiqueta meta description generada por los plugins Yoast SEO y All In One Seo Pack.

Estos dos plugins de SEO, quizá sean los más utilizados. Almacenan información vital para construir etiquetas necesarias para optimizar el SEO de tus entradas en custom fields. Para las meta description, Yoast SEO utiliza un custom field con el nombre _yoast_wpseo_metadesc, y AIOSP un custom field con el nombre _aioseop_description.

Lo siguiente es crear la etiqueta meta description, e inyectarla en el head de tus páginas AMP. El plugin oficial de AMP incluye en sus templates un fichero html-start.php con el siguiente contenido:

El plugin de ecommerce más fácil de usar para WordPress

<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); // WPCS: XSS ok. ?>>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <?php do_action( 'amp_post_template_head', $this ); ?>
    <style amp-custom>
        <?php $this->load_parts( array( 'style' ) ); ?>
        <?php do_action( 'amp_post_template_css', $this ); ?>
    </style>
</head>

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">

Como podrás observar, el plugin de AMP para WordPress pone a nuestra disposición el hook amp_post_template_head. Ahí será donde generaremos e inyectaremos la etiqueta meta description.

Si utilizas el plugin Yoast SEO, el código que debes añadir en el archivo functions.php de tu tema o en tu plugin de utilidades es el siguiente:

<?php

function add_yoast_seo_description_to_amp_pages( $amp_template ) {?>
    <meta name="description" content="<?php echo esc_html( get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true ) );?>" />
<?php }
add_action( 'amp_post_template_head', 'add_yoast_seo_description_to_amp_pages' );

Si utilizas el plugin AIOSP, el código que debes añadir en el archivo functions.php de tu tema o en tu plugin de utilidades es el siguiente:

<?php

function add_aiosp_description_to_amp_pages( $amp_template ) {?>
    <meta name="description" content="<?php echo esc_html( get_post_meta(get_the_ID(), '_aioseop_description', true ) );?>" />
<?php }
add_action( 'amp_post_template_head', 'add_aiosp_description_to_amp_pages' );

En estos dos ejemplos, simplemente actuamos sobre el hook amp_post_template_head. Aquí pintamos directamente la etiqueta meta description, y en su atributo content se pinta la información obtenida del custom field correspondiente a través de la función get_post_meta().

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *:

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios