• Startseite
  • Artikel
  • Allgemein
  • So richten Sie WordPress und AMP ein: Accelerated Mobile Pages: Setup Analytics, AdSense, Social Media Guide Attached

So richten Sie WordPress und AMP ein: Accelerated Mobile Pages: Setup Analytics, AdSense, Social Media Guide Attached

Veröffentlicht: 2016-09-25
setup-amp-und-wordpress-all-in-one-leitfaden

In den letzten Tagen wurde viel über Google AMP geredet. Google hat offiziell die Unterstützung von AMP-Seiten als Teil der mobilen Suchseite angekündigt. Es ist sehr interessant. Bisher habe ich es aus irgendeinem Grund vermieden, AMP auf Crunchify zu implementieren, und hatte nie das Gefühl, dass es wichtig ist.

Aber nachdem ich mir Barrys Tweet angesehen habe, habe ich mich auch für AMPlify Crunchify entschieden.

Suchen Sie Tipps zu AMP und WordPress? Möchten Sie Ihre WordPress-Site mit den Accelerated Mobile Pages von Google erweitern? Oder möchten Sie AMP in WordPress installieren? In diesem Tutorial werden wir die Schritte zum AMPlifizieren Ihrer WordPress-Site mit allen detaillierten Schritten durchgehen.

Was sind Accelerated Mobile Pages (AMP)?

Das Accelerated Mobile Pages (AMP)-Projekt ist ein Open-Source-Projekt, das unter Berücksichtigung der Geschwindigkeit erstellt wurde und für Mobilgeräte optimierte Inhalte einmal erstellt und sofort überall geladen werden kann. Auf der Seite wird überhaupt kein JavaScript geladen. Es gibt ein sehr minimales CSS-Laden mit strengen Einschränkungen. Eine der Beobachtungen, die mir aufgefallen sind, ist, dass Sie !important nicht einmal in CSS verwenden können.

Haben Sie eine der folgenden Fragen?

  • Google AMP: Was ist das und ist es das Richtige für Ihre WordPress-Website?
  • Der beste Weg, um WordPress für AMP einzurichten
  • So starten Sie mit Google AMP-Seiten und WordPress
  • WordPress-Plugin für beschleunigte mobile Seiten
  • WordPress-Amp-Seiten
  • Yoast amp Glue und WordPress-Abfragen

Fangen wir an: Aktivieren Sie AMP für Ihre WordPress-Posts

Schritt 1

Installieren Sie das offizielle AMP-Plugin.

installiere-offizielles-amp-plugin-crunchify-tipps
  • Einmal aktiviert, sind Sie fertig. Sie werden kein Optionsmenü sehen.
  • Sie müssen zum Menü Settings -> Permalinks gehen. Klicken Sie auf Save Changes , ohne Änderungen vorzunehmen.

Das offizielle AMP-Plug-in bietet grundlegende Funktionen und alle Ihre Beiträge werden automatisch AMPlify. Sie können die AMPlified-Version Ihrer Beiträge aufrufen, indem Sie /amp/ am Ende einer beliebigen Beitrags-URL hinzufügen.

Schauen Sie sich das Beispiel an:

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

Schritt 2

Installieren Sie das Glue for Yoast SEO & AMP-Plugin. Ab Version 0.4 AMP WordPress version benötigen Sie meines Erachtens kein anderes AMP-bezogenes Plugin.

Jetzt:

  • Gehen Sie zu Appearance -> AMP .
  • Geben Sie Header und Background an und klicken Sie auf Save .
amp-wordpress-plugin-anpassungsoption

Schritt 3

Das einzige Problem, das ich bei diesem Plugin sehe, ist, dass es den Powered by WordPress -Link am Ende der Seite hinzufügt. Um dies zu ändern, möchten Sie möglicherweise die Seite footer.php mit dem folgenden Code ändern.

  • Gehen Sie zu Plugins -> Editor
  • Wählen Sie Plug-in- AMP aus
  • Wählen Sie die Datei 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 >

Ändern Sie den Copyright-Zeilencode nach Bedarf

crunchify-amp-footer-und-social-sharing-buttons

Schritt 4

Fügen Sie Ihren AMP-Seiten Analytics und Social Media -Symbole hinzu.

  1. Die Funktion crunchify_amp_add_analytics_social_ads_js fügt Ihrer amp-Seite den erforderlichen Analytik- und Social-Media- javascript -Code hinzu.
  2. Die Funktion crunchify_amp_add_analytics_social_code fügt Ihren Analysecode und Ihre Symbole für soziale Medien hinzu.
  3. Stellen Sie sicher, dass Sie unten Ihre Google Analytics Universal tracking ID und Ihre Facebook App ID aktualisieren.
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 ~~~~~~~~~~~~~~~~~~~

Schritt-5

Fügen Sie Ihrer AMP-Seite Google Adsense-Code hinzu. In meinem Fall wollte ich 300x250 -Code unter dem vorgestellten Bild hinzufügen. Es steht kein offizieller Hook zur Verfügung, also habe ich die Datei single.php modifiziert, die sich unter <AMP Plugin directory>/ amp/templates/single.php .

Amp-Plugins-einzelne-php-Datei ändern
  • Gehen Sie zum Plugins Menü
  • Klicken Sie auf Editor
  • Wählen Sie AMP -Plugin
  • Gehen Sie zur single.php -Datei
  • Fügen Sie AdSense-Code hinzu, wie im folgenden Code-Snippet gezeigt. Suchen Sie einfach look for line featured-image und fügen Sie danach den Adsense-Code hinzu.
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" >

Und Sie sind bereit. Bereinigen Sie einfach Ihren Website-Cache und sehen Sie sich die Live-AMP-Seite an. Sie werden sehen, dass alle Google Analytics-, Adsense- und Social Media-Symbole ordnungsgemäß funktionieren

Was jetzt?

Lassen Sie uns Ihre AMP-Seite überprüfen und auf Probleme prüfen. Gehen Sie zu https://validator.ampproject.org/ und überprüfen Sie das Ergebnis.

ampproject-validation-page-crunchify-tipps

Wie wird Google AMP-Beitragsseiten crawlen?

Jetzt haben Sie sowohl AMP and non-AMP versions Ihrer Seiten. Das AMP-Plug-in fügt Ihren beiden Seiten automatisch das folgende Beziehungs-Meta-Tag hinzu.

Überprüfen Sie dies auf der Nicht-AMP-Seite

Sie sollten den Verweis auf die AMP-Version der Seite sehen, um Google und andere Plattformen darüber zu informieren:

<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

Überprüfen Sie dies auf der AMP-Seite

Sie sollten einen Text sehen, der auf die kanonische Nicht-AMP-Version verweist:

<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-tipps

Warten wir nun ein paar Tage oder mindestens eine Woche und Sie sollten AMPlify-Seiten in der Google Search Console sehen. Bei mir sind es nur 4 Tage und ich sehe fast 500 Seiten, die bereits für das AMP-Ergebnis indiziert sind

wordpress-und-amp-setup-guide-by-crunchify-stats

Wie überprüfe ich das Live-Ergebnis?

Suchen Sie einfach in Google im mobilen Browser nach Post und Sie sollten das AMP result auf der Suchergebnisseite sehen.

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

Besuchen Sie diese Seite auch weiterhin oder setzen Sie ein Lesezeichen, da ich dieses Tutorial im Laufe der Zeit gemäß meinem Lernen aktualisieren werde. Viel Spaß beim Bloggen und helfen Sie, das Netz zu beschleunigen.