WebWizard   29.3.2024 08:37    |    Benutzerkonto
contator.net » WebNews » WebWizard.at » Informationen  
 

Wir brauchen Cookies, siehe unsere Datenschutzerklärung.















Ebene darüber

Mikroformate: Guides und Anleitungen

Auf gleicher Ebene

Accelerated Mobile Pages
ads.txt Standard
Instant Articles
QR-Code Zahlschein: Überweisungs-Format mit EPC-SEPA-QR-Code
robots.txt für AI-Crawler
RSS/Atom-Format
Sitemaps für Websites
Telefonnummer richtig schreiben










Verlosung: One Live


Aktuelle Highlights

Kurz aus lang per KI


 
Übersicht | Verzeichnis
      Mikroformate: Guides und Anleitungen
           Accelerated Mobile Pages


Accelerated Mobile Pages

Google hat den eigenen Standard, um Artikel von Websites auf Smartphones vorab laden und darstellen zu können, gegen Facebook gestellt. Es geht vorrangig um die flinke Darstellung ohne Ballast.

Das bedeutet aber auch, dass AMP den Großteil der eigenen Website nicht darstellt, darunter auch die meisten Dinge, die dem Webmaster Geld bringen können. Im Gegenzug bevorzugt Google mobil die Fundstellen, die sich dafür optimiert präsentieren. Als Betreiber von Websites muss man sich natürlich die Frage stellen, ob man sich auch die Art der Darstellung der Inhalte so weit aus der Hand nehmen lässt.

Google AMP liefert im Gegenzug Inhalte solcher Artikel bevorzugt aus - sie werden vorab geladen und gerendert, sind also per Klick 'sofort' am Bildschirm statt extra geladen werden zu müssen. Die gesteigerte User-Aktivität bei der flotten Darstellung ist serverseitig durch eine zweite Implementiertung der Darstellung leicht zu bewerkstelligen - eine Art Template ohne das Rundherum um den Artikel reicht dazu schon aus.

Ausgangslage

Beim AMP-Project finden sich dazu die Vorlagen, die man nur noch mit Inhalt füllen muss. Den HTML-Quellcode kann man für eigene Adaptionen leicht erweitern. Der Head-Bereich ist dabei weitgehend bereits vorgegeben, muss aber in einigen Abschnitten passend adaptiert werden.



Insbesondere müssen wir dafür sorgen, dass die 'canonical'-URL zur normalen Web-Version des Artikels zeigt, damit Google das Original kennt. Das schema.org-Script ist zwar optional, sollte aber auch entsprechend gefüllt werden - Google nutzt es zur Darstellung in verschiedenen mobilen Anwendungen.

Body - der eigentliche Inhalt

Nun geht es dann weiter zum Inhalt, dem Body-Bereich. Dieser beinhaltet nur den Artikel - und selbst da eine vereinfachte Form, die nicht all das erlaubt, das HTML vorgibt.

Bilder werden beispielsweise durch einen Befehl wie folgendem (statt img) integriert:

<amp-img src='foto.jpg' alt='Portrait Huber' 
  height='300' width='500'></amp-img>


Hier ist also nur wenig zum klassischen HTML anzupassen, man kann aber ein 'responsive'-Attribut hinzufügen, um die Skalierung auf die Bildschirmbreite vorzugeben. Bei iFrames, Animationen, Videos etc. wird es schon komplizierter - ein eigenes AMP-Script wird dazu geladen und dann spezieller AMP-Code integriert:

iFrames und Videos in AMP

Geht man noch weiter, so bietet AMP für spezielle Inhalte eigene Befehle. So kann man Werbung oder Videos einbinden, definiert sind jedoch vorwiegend die Google-Dienste (Adsense, Youtube, Doubleclick), aber auch für Facebook, Twitter und Instagram gibt es Ausnahmen:

Externe Inhalte

Und selbst mit diesem Aufwand wird nicht alles möglich, was man vom Browser und dem 'großen' Web her kennt. Auch für das Layout gilt das, aber zumindest Stylesheets kann man (direkt) im Head-Bereich einbinden:

<style amp-custom>
  ...Stylesheet-Angaben...
</style>


Eine Ausnahme von der Vorgabe, keine externen Stylesheets einzubinden, gilt für Schriften. Die Fonts, die am Google-Server liegen, kann man per font-face-Anweisung im Stylesheet ansprechen und nutzen.

Auch im Bereich der Erfolgsmessung und Statistik kann man sich auf Ausnahmen für Google-Dienste berufen. So kann Google Analytics mit etwas Aufwand integriert werden:

Analytics einbinden

Fertige AMP-HTML-Seiten kann man am besten in Googles Chrome-Browser testen. Man ruft sie ganz normal wie statische Seiten auf, idealerweise am Webserver. Auch ein Validator, der die Korrektheit des Codes prüft, ist in Chrome bereits integriert: Öffnet man die Konsole (ctrl+umschalt+J, 'console' wählen) und hängt man an die URL ein '#development=1' an, bekommt man die entsprechenden Ausgaben und Hinweise.

Zeigen, dass es eine AMP-Version gibt

Nun braucht es nur noch Hinweise an Google, dass es zu einer Webseite auch eine AMP-Seite gibt. In der Website baut man dazu im Head-Bereich entsprechende Link-Verweise auf die AMP-Seite ein.

<link rel='amphtml' 
  href='...URL zur Web-Version...'>


Der umgekehrte Verweis ist ja im AMP-Template als 'canonical'-URL bereits enthalten - Google kann also in beiden Richtungen zum jeweils richtigen Artikel in der passenden Darstellung finden.

Ihre Meinung dazu? Schreiben Sie hier!

#AMP #HTML #Google #Smartphones #Mobile Web #Mobile Pages #Artikel



Newsticker per eMail oder RSS/Feed!

Auch interessant!
URL-Prüfung in Search Console
Die neuen Webmaster Tools werden langsam ausgabaut - zu langsam, um komplett umzuschwenken, aber immerhin...

Das Web wird mobiler
Die meisten User nutzen mittlerweile nicht mehr den Computer, um ins Internet einzusteigen....

Instant Articles
Facebook hat mit den Instant Articles eine andere Variante für die schnelle Vorschau von Textartikeln ins...

Google Tag Assistant
Mit einer praktischen Erweiterung für Google Chrome kann man die Einbindung diverser Google-Tags auf eine...

Mehr Instant Articles
Social-Media-Gigant Facebook baut seinen Test für eine neue Art der Online-Berichterstattung in der DACH-...

Social News per Instant Articles
Facebook unternimmt den nächsten Versuch, Nachrichteninhalte direkt innerhalb der Plattform zu präsentier...

Forum: Ihre Meinung dazu!

[AufZack Talk] [Forum]     
Ins Forum dazu posten...
Betreff/Beitrag:

   






Top Klicks | Neuestes

 
 

 


Altblechliebe 4.0


Taycan mit 1100 PS


Porsche Taycan 2024


Aston Martin Vantage


Ist die Domain frei?


Renault Scenic Electric


Vegan oder gesund?


Schräge Lotto-Strategie

Aktuell aus den Magazinen:
 Auto-Treffen im Schlosspark Youngtimer, Oldtimer, Classic Tuning
 2 bis 3 Stunden Smartphone-Nutzung täglich hoch
 Ostern 2024 Special mit Tipps, Rezepten und mehr!
 Oscars 2024: Gewinner! Wer holte die meisten Oscars?
 Nikon kauft Kult-Kinokamera-Hersteller RED Die Übernahme des Jahres der Branche

contator.net im Überblick:
 Webnews  WebWizard | Bundesland.at | Wien-Tipp.at | NewsTicker
 Business  Journal.at | Anfrage.net | plex | Seminar.At | BizTipp
 Auto  Auto.At | TunerAuto.At | OldtimerAuto.At | AutoTalk.At | AutoGuide.At | AutoBiz.At
 Freizeit  Style.at | Famili.at | Kinofilm.at | Musical.at | heavy.at | grlz | WitzBold | Advent.At
 Shopping  anna | Shoppingcity.at | SchatzWelt Gewinnspiele | Prozente.net Gutscheine
 Community  AufZack! | Flirtparty | Player | Schmuddelecke

Rechtliches
Copyright © 2024    Impressum    Datenschutz    Kontakt    Sitemap    Wir gendern richtig!
Tripple