letzten Post zum Erstellen mobiltauglicher Websites haben wir uns intensiv bemüht, den Google-Support für Smartphone-optimierte Inhalte zu verbessern. In diesem Sinne haben wir im Dezember 2011 den Googlebot-Mobile für Smartphones zum gezielten Erkennen solcher Inhalte eingeführt.
Empfehlungen für Smartphone-optimierte Websites
Unsere detaillierten Empfehlungen findet ihr auf der neuen Hilfe-Website (auf Englisch). Hier ist eine kurze Zusammenfassung.
Für das Erstellen einer auf Smartphones zugeschnittenen Website unterstützt Google drei verschiedene Konfigurationen:
Websites mit Responsive Webdesign – Dies sind Websites, bei denen für alle Geräte dieselben URLs verwendet werden. Für jede URL wird dabei dasselbe HTML für alle Geräte verwendet und die Seitendarstellung auf den verschiedenen Geräten wird allein über CSS geändert. Google empfiehlt diese Konfiguration. Websites, bei denen dieselben URLs für alle Geräte verwendet werden – Für jede URL werden hier jedoch ein anderes HTML und andere CSS verwendet. Dies richtet sich danach, ob es sich beim User-Agent um ein Desktop- oder ein Mobilgerät handelt. Websites mit separaten Webseiten für Mobilgeräte und Desktopgeräte
Flexibles Design ("Responsive Webdesign")
Responsive Webdesign ist eine Technologie zum Erstellen von Webseiten, deren Darstellung über CSS3-Media Queries angepasst wird. Das bedeutet, dass geräteunabhängig ein HTML-Code pro Seite verwendet wird, die Darstellung jedoch über CSS-Media Queries angepasst wird. Über die Media Queries wird ermittelt, welche CSS-Regeln für den Browser, in dem die Seite aufgerufen wird, anzuwenden sind. Weitere Informationen über Responsive Webdesign erhaltet ihr im
Blog-Post der Google Webmaster und
in unseren Empfehlungen (auf Englisch).
Die Verwendung von Responsive Webdesign hat viele Vorteile, unter anderem diese:
Eure Inhalte für Desktop- und Mobilgeräte bleiben auf einer URL. Das macht es für eure Nutzer einfacher, die URL zu verwenden, zu teilen und auf sie zu verlinken. Google-Algorithmen können euren Inhalten so auch einfacher Indexierungseigenschaften zuweisen. Eure Inhalte werden effizienter erkannt, da wir eine Seite nicht mit den verschiedenen Googlebot-User-Agents crawlen müssen, um wirklich alle Inhalte zu ermitteln und zu indexieren.
Gerätespezifisches HTML
Wir wissen jedoch auch, dass die Verwendung von Responsive Webdesign in vielen Situationen nicht möglich oder geeignet ist. Deshalb unterstützen wir Websites, die gleiche Inhalte über unterschiedliches, gerätespezifisches HTML bereitstellen. Das gerätespezifische HTML kann auf ein und derselben URL verwendet werden, eine sogenannte dynamische Bereitstellung ("dynamic serving"), oder auf verschiedenen URLs wie www.beispiel.com und m.beispiel.com.
Falls ihr für eure Website die Konfiguration "dynamische Bereitstellung" gewählt habt, empfehlen wir euch unbedingt, den Vary-HTTP-Header zu verwenden. Damit wird unseren Caching-Servern und Algorithmen signalisiert, dass die Inhalte je nachdem, welcher User-Agent die Seite aufruft, unterschiedlich ausfallen können. Wir nutzen dies auch als Crawling-Signal für den Googlebot-Mobile. Weitere Informationen findet ihr
hier (auf Englisch).
Anhand dieser Vermerke erkennen wir eure Smartphone-optimierten Inhalte einfacher und unsere Algorithmen verstehen die Struktur eurer Inhalte besser. Eure Inhalte sind somit bestens gerüstet, um in den Google-Suchergebnissen gut abzuschneiden.
Fazit
Dieser Blog-Post ist nur eine kurze Zusammenfassung unserer Empfehlungen zum Thema
Smartphone-optimierte Websites erstellen (auf Englisch). Lest alle Empfehlungen, um zu erfahren, welche unterstützte Implementierung für eure Website und Nutzer am besten geeignet ist. Wie immer könnt ihr gerne in unseren
Forum für Webmaster posten, wenn ihr weitere Fragen habt.
Post von
Pierre Far , Webmaster Trends Analyst (Veröffentlicht von
Uli Lutz , Search Quality)
Kommentare :
Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:
http://www.colibrimedia.de/responsive_design/example.html
Hi Moritz, danke für das Beispiel!
Ich habe mich auch mit dem Thema Responsive Design und Suchmaschinenoptimierung auseinander gesetzt. Bei den vielen Informationen ist es für einen Laien nicht ganz einfach den überblick zu behalten. Darum habe ich mir für meinen Shop Unterstützung geholt und war erstaunt wie viel man aus einem einfachen Shop herausholen kann.
Kommentar veröffentlichen