Diese Website verwendet hochwertige Cookies. Mit der Nutzung stimmen Sie der Speicherung zu.


» contator.net » WebNews » WebWizard.at » semantic.at » Informationen  

27.9.2016 17:47      Benutzerkonto

Partner:

eMail-Newsletter gratis:

Archiv | Abmelden | RSS/Feeds
Folge uns:
Wir sind in Facebook! Wir sind in Twitter! Wir sind in Google+! Wir sind in Youtube! Wir sind in Labarama!

Suche:

                                                                                                                                                                                                                                                                   














Ebene darüber

Mikroformate: Guides und Anleitungen

Auf gleicher Ebene

Accelerated Mobile Pages
RSS/Atom-Format
Sitemaps für Websites










Sozial: Gratis-Cocktail!


Aktuelle Highlights

Buchpreise


 
Ü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


Kommen Sie auf unsere Facebook-Seite!
Wir sind in Google+ für Sie da...
Folgen Sie unserem Twitter-Feed hier...
Folgen Sie unserem Labarama-Blog...
Newsticker per eMail oder RSS/Feed!

Auch interessant!
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]     
Posten Sie ins Forum dazu:
Betreff:

Ihre Meinung via Facebook posten:

   






Top Klicks | Neuestes

Folge uns: | Facebook | Google+ | Youtube

 
 

 


Buchpreise



Porto Österreich 2017



Back to Melk 2016



Game City 2016



Hochzeitsfotograf planen



Oldtimer in Melk



Vitaminbombe


4x4 Allradmesse 2016

Aktuell aus den Magazinen:
 Türkis: Autobahn-Vignette 2017 wieder teurer Regierung holt sich Geld vom LKW von der Straße
 Thalia teurer Buchpreise werden offline aufgerundet
 Hacker in Dropbox 68 Mio. Passwörter geklaut
 Datum und Wirtschaftsblatt Sperre und Neuanfang bei den Printmedien
 Porto in Österreich ab 2017 Portokosten steigen deutlich an

contator.net im Überblick:
 Webnews  WebWizard | Bundesland.at | Wien-Tipp.at | NewsTicker | contator.tv
 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

Kontaktformular
Rechtliches
Copyright © 2016    Impressum    Adresse    Sitemap   
Mediadaten    Anfrage: hier werben!    Freies Web? Keine adblocker!
Tripple
      ad-locator.net    |    web-applicator.net