Google hat ein neues Projekt, dass Accelerated Mobile Pages oder auch „AMP“ heißt. Man möchte damit abgespeckte, mobil-optimierte Seiten anbieten, die superschnell laden. Das sollte deine Webseite im besten Fall auch so schon machen, aber wenn du deine WordPress-Beiträge auch als „AMP“-Version anbietest werden diese höher in den Google Suchergebnissen gerankt. Also ein guter Grund sich das mal anzuschauen.
Umsetzen kannst du das mit einem Plugin. Es gibt dafür ein schickes Plugin von Pagefrog, dass dir bei der Einrichtung hilft. Einfach installieren und den Anweisungen folgen, und schon hat man mit dem Anhängsel /amp/ an seiner Artikel-URL eine AMP-Seite (Beispiel). Das Plugin braucht auf jeden Fall auch das von Automattic entwickelte AMP-Plugin.
Der Haken
Das AMP-Plugin reduziert deine Seite soweit, dass es keinen Footer mehr gibt. Und da es in Deutschland ja Gesetz ist, dass ein Impressum-Link zu sehen sein sollte muss etwas hinzugefügt werden.
Ich hab mich an die Anleitung von Guru 2.0 gehalten und bin sehr zufrieden mit dieser einfachen Methode. Der Code wird in die functions.php eingefügt:
//Fusszeile hinzufuegen
function philliproth_addFooter($amp_template) {
$blog_title = ''.get_bloginfo('name');
?>
<footer class="amp-wp-title-bar">
<div>
<a href="<?php echo get_home_url(); ?>" title="<?php echo esc_html($blog_title); ?>">
<amp-img src="https://www.philliproth.de/wp-content/uploads/2016/04/Logo_Webx-amp.gif"
alt="<?php echo esc_html($blog_title); ?>"
width="270" height="65"></amp-img>
</a><br>
<a href="<?php echo get_home_url(); ?>/impressum" title="Impressum von <?php echo esc_html($blog_title); ?>">Impressum und Datenschutz</a> |
<a href="<?php echo get_home_url(); ?>/kontakt" title="Kontakt zu <?php echo esc_html($blog_title); ?>">Kontakt</a>
</div>
</footer>
<?php
}
add_action('amp_post_template_footer', 'philliproth_addFooter');WordPress AMP CSS hinzufügen
Als Designer fand ich das aber alles nicht ganz so hübsch und musste also eine Methode finden, dass etwas zu stylen. Hierbei half mir dieser Artikel von Delicious Brains.
Mit ein paar zusätzlichen Zeilen in der functions.php kann man also einige Anpassungen machen (gekürzt):
add_action( 'amp_post_template_css', 'philliproth_amp_css_styles' );
function philliproth_amp_css_styles( $amp_template ) {
// only CSS here please...
?>
body {
background: #edede9;
}
footer {
text-align: center;
background-color: #fff;
padding-bottom: 20px;
}
footer a{
text-decoration: none;
}
footer img {
margin-left: 5px !important;
}
<?php
}
Hab ich alles richtig gemacht?
Mit den Entwicklertools von Chrome könnt ihr testen ob ihr und das Plugin alles richtig gemacht habt. Hinter die URL hängt ihr: #development=1 (Beispiel) und öffnet dann in den Developer-Tools die Console. Jetzt müsst ihr nochmal die Seite neu laden und schon seht ihr entweder Fehler oder das schöne „AMP validation successful.“ Viel Glück!
Habt ihr die Google Search Console in den Webmaster-Tools für eure Webseite aktiviert, wird euch Google zusätzlich nach dem nächsten Crawl sagen, ob ihr alles richtig gemacht habt unter „Darstellung der Suche -> Accelerated Mobile Pages“
Habt ihr schon Erfahrungen mit AMP gemacht? Freue mich über Anregungen!