• Página principal
  • Artículos
  • General
  • Cómo configurar WordPress y AMP: páginas móviles aceleradas: configuración de análisis, AdSense, guía de redes sociales adjunta

Cómo configurar WordPress y AMP: páginas móviles aceleradas: configuración de análisis, AdSense, guía de redes sociales adjunta

Publicado: 2016-09-25
configuración-amp-y-wordpress-guía-todo-en-uno

Hubo muchos rumores sobre Google AMP en los últimos días. Google anunció oficialmente la compatibilidad con páginas AMP como parte de la página de búsqueda móvil. Es realmente interesante. Hasta ahora evité implementar AMP en Crunchify por alguna razón y nunca sentí ninguna importancia al respecto.

Pero después de mirar el tweet de Barry, también decidí AMPlify Crunchify.

¿Estás buscando consejos sobre AMP y wordpress? ¿Quiere ampliar su sitio de WordPress con las páginas móviles aceleradas de Google? ¿O quieres instalar AMP en WordPress? En este tutorial, repasaremos los pasos sobre cómo AMPlificar su sitio de WordPress con todos los pasos detallados.

¿Qué es una página móvil acelerada (AMP)?

El proyecto Accelerated Mobile Pages (AMP) es un proyecto de código abierto creado teniendo en cuenta la velocidad que crea contenido optimizado para dispositivos móviles una vez y lo carga instantáneamente en todas partes. No hay carga de JavaScript en absoluto en la página. Hay una carga de CSS mínima con restricciones estrictas. Una de las observaciones que noté es que ni siquiera puedes usar !important en CSS.

¿Tiene alguna de las siguientes preguntas?

  • Google AMP: ¿Qué es y es adecuado para su sitio web de WordPress?
  • La mejor manera de configurar WordPress para AMP
  • Cómo empezar con las páginas de Google AMP y WordPress
  • Complemento de wordpress para páginas móviles aceleradas
  • Páginas de amplificación de WordPress
  • Yoast amp pegamento y consultas de wordpress

Comencemos: habilite AMP para sus publicaciones de WordPress

Paso 1

Instale el complemento oficial de AMP.

instalar-oficial-amp-plugin-crunchify-tips
  • Una vez activado, ya está todo listo. No verá ningún menú de opciones.
  • Tienes que ir al menú Settings -> Permalinks . Haga clic en Save Changes sin realizar ningún cambio.

El complemento oficial de AMP proporciona una funcionalidad básica y todas sus publicaciones se AMPlificarán automáticamente. Puede visitar la versión AMPlificada de sus publicaciones agregando /amp/ al final de cualquier URL de publicación.

Echa un vistazo al ejemplo:

  • URL de publicación Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • URL de publicación de AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Paso 2

Instale el complemento Glue para Yoast SEO y AMP. A partir de la versión 0.4 AMP WordPress version , creo que no necesita ningún otro complemento relacionado con AMP.

Ahora:

  • Ve a Appearance -> AMP .
  • Proporcione el Header y el color de Background y haga clic en Save .
amp-wordpress-plugin-opción-de-personalización

Paso 3

El único problema que veo con este complemento es que agrega el enlace Powered by WordPress en la parte inferior de la página. Para cambiarlo, es posible que desee cambiar la página footer.php con el siguiente código.

  • Vaya a Plugins -> Editor
  • Seleccione el complemento AMP
  • Seleccione el archivo amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

Modifique el código de línea de derechos de autor según sus necesidades

crunchify-amp-footer-and-social-sharing-buttons

Etapa 4

Agregue íconos de Analytics y redes Social Media a sus páginas AMP.

  1. La función crunchify_amp_add_analytics_social_ads_js agregará el análisis requerido y el código javascript de redes sociales a su página de amplificación.
  2. La función crunchify_amp_add_analytics_social_code agregará su código de análisis e íconos de redes sociales.
  3. Asegúrese de actualizar su Google Analytics Universal tracking ID de Facebook App ID a continuación.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

Paso-5

Agregue el código de Google Adsense a su página AMP. En mi caso, quería agregar un código de Adsense de 300x250 debajo de la imagen destacada. No hay ningún enlace oficial disponible para usar, así que modifiqué el archivo single.php ubicado en <AMP Plugin directory>/ amp/templates/single.php .

modificar-amp-plugins-single-php-file
  • Ir al menú de Plugins
  • Haga clic Editor
  • Elija el complemento AMP
  • Ir al archivo single.php
  • Agregue el código de Adsense como se muestra en el siguiente fragmento de código. Simplemente look for line featured-image y agregue el código de Adsense después de eso.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

Y ya está todo listo. Simplemente limpie el caché de su sitio y consulte la página AMP en vivo. Verá que todos los íconos de Google Analytics, Adsense y Social Media funcionan correctamente

¿Ahora que?

Verifiquemos y revisemos su página de AMP para detectar cualquier problema. Vaya a https://validator.ampproject.org/ y verifique el resultado.

ampproject-validation-page-crunchify-tips

¿Cómo rastreará Google las páginas de publicaciones de AMP?

Ahora que tiene versiones AMP and non-AMP versions de sus páginas, el complemento AMP agregará la metaetiqueta de relación a continuación a ambas páginas automáticamente.

Verifique esto en la página que no es AMP

Debería ver la referencia de la versión AMP de la página para que Google y otras plataformas lo sepan:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

Verifique esto en la página AMP

Debería ver texto para hacer referencia a su versión canónica no AMP:

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

Ahora esperemos un par de días o al menos una semana y debería ver las páginas de AMPlify en Google Search Console. Para mí son solo 4 días y veo casi 500 páginas ya indexadas para el resultado de AMP.

guía-de-configuración-de-wordpress-y-amp-por-crunchify-stats

¿Cómo verificar el resultado en vivo?

Simplemente busque la publicación en Google en el navegador móvil y debería ver el resultado de AMP result de búsqueda.

crunchifys-amp-result-in-google-mobile-search-page

Además, siga visitando esta página o marque como favorito, ya que seguiré actualizando este tutorial con el tiempo según mi aprendizaje. Feliz blogueo y ayuda a acelerar la red.