Por qué y cómo instalar AMP para WordPress ?

Lo hemos estado escuchando durante bastante tiempo ! AMP aquí, AMP allá … Tienes que instalarlo … o no ? Pero qué es exactamente ?

Así que decidí investigar este extraño acrónimo. Veremos en este artículo qué es AMP, para qué sirve, si es absolutamente necesario instalarlo y cómo, finalmente, algunos consejos para personalizarlo …

Google-amp-project

Qué es AMP y para qué sirve ?

AMP es el acrónimo de ATacelerar Señorobil PAGSactuación, literalmente en francés “Acelere el rendimiento móvil“. El objetivo de AMP es cargar más rápido las páginas de su WordPress a dispositivos móviles.

AMP es un formato de pantalla más rápido porque se limita principalmente a HTML y CSS, todo alimentado por un caché ultraeficiente. De hecho, La visualización de páginas AMP es casi instantánea.

Entonces, si un mobinaute hace clic en el enlace de una página web que tiene una versión AMP, se redirigirá a esta versión AMP y no a la versión estándar de la página. El objetivo aquí es reducir drásticamente los tiempos de carga.

Tenga cuidado de no confundir el sitio receptivo con AMP, no es lo mismo. Además, su sitio puede ser “responsable”, es decir que se adapta a las dimensiones de acuerdo con las pantallas, el hecho es que sigue siendo largo para cargar para los usuarios que navegan en dispositivos móviles.

amp-demo

Debe instalarse AMP ?

Google lanza el formato AMP como uno solo proyecto de código abierto, este último aboga por páginas ligeras que se pueden cargar rápidamente en los móviles. Por lo tanto, es absolutamente esencial instalarlo ? Basta decir que cuando Google defiende firmemente algo, es mejor escucharlo. Sin embargo, también podemos recordar el autor de rel y la baliza Google +: p

Una de las ventajas del formato AMP, además del aumento de velocidad en dispositivos móviles, es tener una página que se muestre en el carrusel entre los resultados móviles de Google, para esto la página debe ser una noticia o un artículo de blog.

De todos modos, el 24 de febrero de 2016, la firma Google comenzó a enviar páginas AMP en las páginas de resultados de su motor de búsqueda móvil, sería una pena no estar allí, no?

Lo que parece AMP para WordPress ?

En lugar de un discurso largo, aquí están las diferentes versiones de WPFormation en 3 imágenes. La primera (desde la izquierda) es la versión normal, la segunda es la versión receptiva y finalmente la última es AMP

wpf normal wpf receptivo Versión AMP

Estamos de acuerdo, visualmente, la versión AMP no rompe 3 patas con un pato (y nuevamente cambié el CSS básico) pero es solo farolear en términos de velocidad ^^ Volveremos a esto con más detalle más adelante en este artículo.

Para los más curiosos / sépticos, aquí está el código fuente de una página AMP:

código fuente amp

Cómo instalar AMP simplemente ?

Montón de tipos con suerte … Estás bajo WordPress y como por casualidad Ya hay complementos que lo hacen por usted 😉 Hay principalmente 2 complementos de WordPress que hacen el trabajo de AMP :

  • AMP : complemento oficial simple de instalar pero no muy potente
  • AMP para WP : complemento más complejo para configurar pero más potente con muchos complementos pagos

Para activar dos pequeños clics de AMP en su WordPress, le aconsejo Complemento automático sobriamente llamado AMP.

Una vez que se instala el complemento, este último creará automáticamente URL con una / amp / al final de la dirección en todos sus artículos, que le dará un tipo de URL: monsoite.com/monarticle/amp/En resumen, el contenido del artículo se recorta y se reemplaza por balizas AMP estándar.

AMP

El complemento Automattic admite diferentes medios, tweets, incrustaciones, videos de Youtube, instagram, etc. Por defecto, muestra el contenido del artículo, su autor, la fecha de publicación, la categoría.

En teoría, puede pasar todo el contenido de su WordPress (páginas, categorías, etiquetas, etc.) al formato AMP, pero dadas las limitaciones de mostrar el carrusel de Google (reservado para noticias y artículos de blog) No veo el punto de gastar nada más que artículos.

El complemento agregará un “en el código de sus artículoslink rel“Quién se referirá a la versión AMP de la página para que Google y las otras plataformas lo sepan. Esto es lo que se agrega: rel= “anftmlhref= “http://monsite.com/ monarticle / amp /” />. Sin embargo, en las páginas AMP generadas, se agregará para referirse a la versión canónica estándar y así evitar duplicar contenidoCQFD .

Deje hervir a fuego lento y Google quemará e indexará sus páginas AMP. También puede ver el estado de indexación y los errores de AMP directamente desde la Consola de búsqueda. Asegúrese de que sus páginas AMP sean válidas, operar según lo previsto para mobinautes y que se pueden mostrar entre las páginas AMP de resultados de búsqueda. Las páginas AMP no válidas no se beneficiarán de ciertas características de la búsqueda de Google. Más información sobre las pautas de Google sobre esto https://support.google.com/webmasters/answer/6340290

google-search-console-amp

AMP y velocidad

La velocidad en dispositivos móviles es, en última instancia, el objetivo principal de AMP Para cuantificarlo, simplemente medí el sitio en versión estándar versus la versión de AMP. A la izquierda, la versión estándar del sitio y a la derecha la versión AMP :!

artículo wpf artículo amp

Las ganancias en términos de velocidad son simplemente impresionantes ! Pasamos de 1.10 segundos a 286 ms para la versión AMP. También tenga en cuenta el número de solicitudes que van de 83 a 13 y el peso de la página simplemente dividido por 5.

Por supuesto, puede sentir directamente la ganancia de velocidad navegando con su teléfono móvil, pero las cifras anteriores hablan por sí mismas. De acuerdo, al mismo tiempo explotando casi todos los guiones y JS, seguro que va mucho más rápido;)

Cómo personalizar el GPA CSS ?

La representación visual de la versión AMP es extremadamente refinada. De su representación habitual, solo queda la esencia de su artículoTodo lo demás se ha ido, no más barras laterales, no hay logotipo, no más menús, sale de los comentarios … En resumen, solo el contenido del artículo.

Hay que decir que la representación visual básica es bastante fea: un color primario azul, ausencia de logotipo: /

Podemos modificar perfectamente el CSS manualmente, pero nuestros amigos de Yoast lanzaron recientemente un pequeño complemento llamado Pegamento para Yoast Seo Amp OMS le permite modificar el GPA CSS directamente desde la interfaz de su complemento homónimo SEO by Yoast (incluso planean integrarlo en SEO dentro de unos meses), y debo admitir que es muy práctico.

pegamento1

Una vez que se instala el complemento Glue, encontrará su configuración de SEO >> AMP. Esto le permitirá seleccionar en qué contenido de AMP debe activarse (artículos, páginas o CPT) para establecer el CSS a su conveniencia (colores, enlaces, blockquotes) para agregar CSS y código personalizados en . Finalmente, puede seguir sus estadísticas de análisis AMP con un código de seguimiento personalizado.

Agregue las imágenes a la página principal

Por defecto los artículos bajo AMP no muestran las imágenes en los titulares, si desea agregarlos, solo deberá incluir el siguiente código en el archivo functions.php de su tema (es aún mejor si está en el tema de sus hijos) :

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}

function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );
        $content = $image . $content;
    }
    return $content;
}

Nota 1 : Recuerde guardar sus funciones.php antes de modificarlo.
Nota 2 : El código anterior solo funciona con el complemento AMP de Automattic.

Más personalizaciones disponibles en https://github.com/Automattic/amp-wp/

Agregue artículos relacionados con AMP

Una vez que haya cambiado el CSS, un elemento importante permanece ausente: los artículos relacionadosAl igual que los comentarios, estos últimos también han desaparecido. No es bueno alentar al lector a navegar nuestro sitio más profundamente.

No entre en pánico ! Una simple adición al archivo functions.php de su tema llenará este vacío. Simplemente agregue el siguiente código:

/**
 * Template tag to show related posts on AMP
 * Output is an unordered list of links
 * @param int $count the number of posts to list
 */
 
function my_amp_related_posts( $count = 2 ) {
 
 global $post;
 $taxs = get_object_taxonomies( $post );
 if ( ! $taxs ) {
 return;
 }
 
 // ignoring post formats
 if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
 unset( $taxs[$key] );
 }
 
 // try tags first
 
 if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
 $tax = 'post_tag';
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
 }
 
 // if no tags, then by cat or custom tax
 
 if ( empty( $tax_term_ids ) ) {
 // remove post_tag to leave only the category or custom tax
 if ( $tag_key !== false ) {
 unset( $taxs[ $tag_key ] );
 $taxs = array_values($taxs);
 }
 
 $tax = $taxs[0];
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
 }
 
 if ( $tax_term_ids ) {
 $args = array(
 'post_type' => $post->post_type,
 'posts_per_page' => $count,
 'orderby' => 'rand',
 'tax_query' => array(
 array(
 'taxonomy' => $tax,
 'field' => 'id',
 'terms' => $tax_term_ids
 )
 ),
 'post__not_in' => array ($post->ID),
 );
 $related = new WP_Query( $args );
 
 if ($related->have_posts()) : ?>
 
 <aside>
 <h3>Ne manquez pas :</h3>
 <ul>
 
 <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
 <li><a href="https://wpformation.com/amp-wordpress/<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
 <?php endwhile; 
 wp_reset_postdata(); ?>
 
 </ul>
 </aside>
 
 <?php endif;
 
 }
 
}
 
/**
 * Add related posts to the AMP template footer
 */
function my_add_related_posts_to_amp( $template ) {
 ?>
 <div class="amp-wp-content">
 <?php my_amp_related_posts( 3 ); ?>
 </div>
 <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );

(fuente: http://isabelcastillo.com/related-posts-wp-amp)

Si desea mostrar 2, 3, 5 o más elementos relacionados, cambie el “3” en esta línea , a su conveniencia.

Nota 1 : Recuerde guardar sus funciones.php antes de modificarlo.
Nota 2 : El código anterior solo funciona con el complemento AMP de Automattic.

Conclusión AMP y WordPress

La web para dispositivos móviles se está volviendo cada vez más importante y Google está presionando en esta dirección. Entre este amplificador de proyecto de código abierto, el artículos instantáneos Facebook y el Android de aplicaciones para WordPress, hay algo que hacer!

Bueno o no bueno ? Esta no es la pregunta ! Si el motor de búsqueda principal comienza a dar una ventaja en los SERP móviles a sitios que forman parte de AMP, en mi opinión, no es tonto ir también !

Además, cuando la instalación es tan simple en nuestro CMS favorito, ¿por qué privarse de ella? ? Para obtener información, en total y para toda la instalación de AMP en WP Formation solo me llevó 5 minutos.

  • Los beneficios : El tiempo de carga de sus artículos en dispositivos móviles, la comodidad de lectura proporcionada al lector, la ganancia de SEO en SERP para dispositivos móviles.
  • Las desventajas : La desaparición de barras laterales, logotipos, formularios, etc … En resumen, más JS ! La imposibilidad de convertir (boletín, contacto), la ausencia de navegación que, sin embargo, puede mitigarse con los artículos en relación.

Al concluir este artículo, diría eso AMP no está pensado para nosotros (editores del sitio) pero bueno para nuestros lectores ! Nunca el móvil web ha sido tan rápido y, como a menudo le gusta decir a Google: La web debe ser rápida !

En voz alta, hola;)

Postdata : Si desea consultar este artículo en formato AMP y ver cómo se ve, haga clic en https://wpformation.com/amp-wordpress/amp/

cerrado

Te puede interesar:  Cómo descargar imágenes en WordPress a través de FTP ?

Deja una respuesta

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

Share This