Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
SEO-Atelier
Maximilian Bloch
Mobile First Index
Campixx 2018
01.03.2018
SEO-Atelier
Maximilian Bloch
2
Slides
seo-atelier.de/mobile-first.pdf
SEO-Atelier
Maximilian Bloch
Vorab
• Mehr Suchanfragen über mobile Endgeräte (seit 2015)
• „Mobile-Friendly“-Update – April 2015
“we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”
“We’ve made it easier for users to find mobile-friendly web pages and we’ve introduced App Indexing” https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html
• Mobile Variante war wichtig, um bei der Suche durch mobile Endgeräte gut gefunden zu werden
• Websites ohne mobile Version wurden bei mobilen Suchen benachteiligt
• Rankings richten sich jedoch primär nach der Desktop-Version Desktop-First-Indexing
3
SEO-Atelier
Maximilian Bloch
4
Generell - Desktop-First-Indexing Mobile-First-Indexing
• 13.10.16 – Ankündigung des Mobile-First-Index Ankündigung via Gary Illyes
• Ranking wird demnach an der mobilen Verfügbarkeit festgemacht
• Damit reicht es nicht mehr nur eine mobile Version zu haben – sie wird federführend
• Es wird auch weiterhin lediglich EINEN Index geben
• Sofern keine mobilefähige Variante einer Website besteht, wird die Seite weiterhin „Desktop-First“ behandelt – allerdings ignoriert man damit ca. 55 % allen Traffics…
• Wann?
SEO-Atelier
Maximilian Bloch
Generell Langsam macht Google ganz wirklich vielleicht endlich bald schon ernst
5
In den kommenden Wochen wird sich mehr tun…
Allerdings sollen lt. Google spürbare Effekte vermieden werden
SEO-Atelier
Maximilian Bloch
6
Mobile First v Desktop First?
Check your Logs!
SEO-Atelier
Maximilian Bloch
Was muss ich beachten?
7
SEO-Atelier
Maximilian Bloch
Inhalt – Main Content
8
Relevanter Inhalt muss auf der mobilen Version vorhanden sein!
Quelle: https://www.searchenginejournal.com/googles-mobile-first-indexing-what-it-is-how-you-can-prepare/212104/
Der „Main-Content“ sollte auf beiden Versionen vorhanden sein. Dies gilt ebenfalls für Headlines, Bilder, Alt-Attribute & Videos Check: Fetch & Render via GSC
SEO-Atelier
Maximilian Bloch
Content - Positionierung Nicht die Positionierung von Inhalt im HTML hat Einfluss auf die Gewichtung, sondern in der Darstellung
9
Sofern wichtige Inhalte in der Desktop-Version eine priorisierte Position haben, sollten sie so auch in der mobilen Version dargestellt werden
Google rendert die Version und weiß wo was steht
SEO-Atelier
Maximilian Bloch
Content – Hidden Content Endlich: Keine Angst mehr vor Hidden Content - Tabs, Accordions, etc.
10
Achtung Wird der versteckte Inhalt erst mit dem Klick nachgeladen, sieht ihn Google nicht!
Checkt, ob der Inhalt auch ohne JS im Quellcode ist
Prüfung mit Google Chrome Tools
SEO-Atelier
Maximilian Bloch
Content – Links, Meta-Daten & mehr Wichtige Punkte!
11
Möglichst ähnliche interne Linkstruktur
Hreflang-Auszeichnung muss ebenfalls gegeben sein – ggf. angepasst
Meta-Daten werden von „Mobile“ gezogen, müssen aber nicht komplett identisch sein
Strukturierte Daten sollten zumindest gleichwertig sein & haben eine hohe Priorität
SEO-Atelier
Maximilian Bloch
Also muss ich gar nichts ändern?
12
Kommt darauf an…
SEO-Atelier
Maximilian Bloch
Unterschiedliche Umsetzungen - Kurze Erklärung Unterscheidung zwischen Arten mobiler Websites
13
Responsive Web-Design Dynamic-Serving
Separate URL
Quelle: https://developers.google.com/search/mobile-sites/mobile-seo/
SEO-Atelier
Maximilian Bloch
Unterschiede der Unterschiede? Was bedeuten die Unterschiedlichen Umsetzungen?
14
Anpassung der Darstellung je nach Bildschirmbreite des Clients
Response richtet sich nach dem User-Agent
Je nach User-Agent wird auf eine Seite für mobile Endgeräte weitergeleitet
SEO-Atelier
Maximilian Bloch
Responsive
15
SEO-Atelier
Maximilian Bloch
Responsive Webdesign Muss ich was beachten?
• Diese Variante macht tatsächlich am wenigsten Probleme, da das HTML stets gleich bleibt
• Hreflang, Links, Meta-Daten, Strukturierte-Daten & normalerweise auch der Main-Content werden damit unabhängig vom User Agent immer ausgespielt
• Probleme bei der Identifizierung von User Agents werden vermieden & Google kann sehr effizient crawlen
16
SEO-Atelier
Maximilian Bloch
Responsive Webdesign Achtung bei Mischformen & besonderen Setups!
17
Dynamisch bereitgestelltes JS
HTML zwar gleich, allerdings wird je nach User-Agent dynamisch JS-Code nachgeladen Vary: User-Agent muss in den Response-Header
Kombinierte Erkennung
Mittels JS wird dem Server das Gerät zurückgespielt. Dieser ändert das HTML und somit das Rendering der Website
Vary: User-Agent muss in den Response-Header
Adaptives JS
Alle Geräte erhalten gleiches HTML, JS, CSS & Bilder. Mit der Ausführung des JS ändert sich aber das Rendering/Aussehen der Website
Kein Vary-Header nötig
Einsatz hätte hier sogar Nachteile (Proxy-Server)
SEO-Atelier
Maximilian Bloch
Dynamic Serving
18
SEO-Atelier
Maximilian Bloch
Dynamic Serving Je nach User Agent des anfragenden Gerätes wird unterschiedlicher Inhalt bereitgestellt
19
Vorteile
• Es wird nur der wirklich benötigte Code ausgegeben. Dies kommt der Dateigröße & damit der Pagespeed zugute
• Bessere Möglichkeiten für individuelle Darstellung auf Mobilgeräten
Nachteile
• User Agent Sniffing ist fehleranfällig (UA wird nicht richtig erkannt, UA-Liste muss gepflegt & aktuell gehalten werden)
• Da unterschiedlicher Inhalt ausgeliefert wird, muss die Auslieferung der relevanten Inhalte, Links und Daten hier sichergestellt werden!
Vary: User-Agent muss in den Response-Header (Cloaking + Cache-Server)
SEO-Atelier
Maximilian Bloch
Dynamic Serving Serverseitiges A/B- & Split-Testing
Achtet auch beim mobilen Testen darauf, Google eine Standard-Variante mit allen relevanten Daten auszuliefern!
20
SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
21
Hier wird es (etwas) kritischer…
SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs Hier ist besondere Vorsicht geboten!
Notwendige Annotationen
Auf Desktop
<link rel="alternate" media="only screen and (max-width: 640px)“ href="https://m.domain.tld/seite2.html">
Auf Mobil
<link rel="canonical" href="https://www.domain.tld/seite2.html ">
22
Achtung: Logik & Richtung nicht umdrehen
Hier muss unbedingt sichergestellt werden, dass die mobile Version alle relevanten Daten & Auszeichnungen enthält!
SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
23
Bei internationalen Seiten muss die hreflang-Auszeichnung angepasst werden! Mobile ↔ Mobile Desktop ↔ Desktop
Was muss noch beachtet werden?
• Mobile Version in der Search Console anmelden!
• XML-Sitemap muss für mobile Website eingereicht werden!
• Mobile XML-Sitemap am besten auch in der robots.txt hinterlegen!
• Anpassung der internen Verlinkung!
• Paginierung nicht vergessen rel="next" and rel="prev"
• Mit ggf. höherer Serverlast rechnen!
SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
24
Und Backlinks?
SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
25
Erfolgreich angekommen? Kleiner Trick…
Wird bei einer Desktop-Suche das Snippet der mobilen oder Desktop-Version ausgespielt?
SEO-Atelier
Maximilian Bloch
26
Und komplett ohne mobile-friendly Website?
Wenn keine mobilfähige Version Vorhanden:
- Google wird weiterhin nach altem Schema vorgehen
- Desktop-Ergebnisse werden weniger aktuell sein
Warum das?
Auch für Google sind Ressourcen nicht kostenlos… Crawling kostet
Vielleicht auch das ein Punkt, der aus Sicht von Google für AMP spricht?
SEO-Atelier
Maximilian Bloch
AMP
27
SEO-Atelier
Maximilian Bloch
28
AMP – Aktualität + geringe Kosten?
1 x AMP-Unterseite
Ein Tag
1 x HTML-Startseite
Gleiche Domain - gleicher Tag -
Gleicher HTTP-Response-Header bei 200
AMP – Aus dem Cache – Crawling nur noch bei Aktualisierung?
SEO-Atelier
Maximilian Bloch
29
vs.
SEO-Atelier
Maximilian Bloch
AMP Dämliches CMS? Eingreifen schwer? AMP unmöglich?
Wichtigsten Seiten können auch „hardgecoded“ & statisch auf dem FTP ihr Zuhause finden Empfehlung: Verzeichnis /amp/ im Domain-Root wird von Google ausgeblendet
AMP-Referenz kann auch via Sitemap erfolgen
<?xml version="1.0" encoding="utf-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc> https://tolle-domain.com/wichtiste-seite.html </loc> <xhtml:link rel="amphtml" href="https://tolle-domain.com/amp/wichtiste-seite.html"/> <lastmod>2016-01-13T18:30:02Z</lastmod> </url> </urlset>
SEO-Atelier
Maximilian Bloch
Sitespeed
31
SEO-Atelier
Maximilian Bloch
32
SEO-Atelier
Maximilian Bloch
Pagespeed Bilder machen einen großen Teil der Größe von Seiten aus. Hier kann viel optimiert werden!
Bilder responsive ausliefern
Picture-Tag bzw. SRCSET-Attribut einsetzen um Bilder auch bei Responsive-Websites lediglich in benötigter Größe auszuliefern
Auslieferung von WebP & Default
33
SEO-Atelier
Maximilian Bloch
Pagespeed Bilder machen einen großen Teil der Größe von Seiten aus. Hier kann viel optimiert werden!
• Bilder komprimieren!
Tipp: Guetzli - Open Source Encoder von Google für JPEG (bis zu 35 % kleiner)
pngquant – PNG Lossy Compressor
34
SEO-Atelier
Maximilian Bloch
Pagespeed - Optimierungsmöglichkeiten
- Auslieferung von statischen Ressourcen mit Versionierung in der URL
- Achtung: Relevanz Bildersuche?
- Unset Etags - vermeidet Validierungsrequests, deren Aktualität über Versionierung sichergestellt wird
- Nutzt Cache-Control-Headers mit hohen Max-Age werten
- Nutzt möglichst seitenweites serverseitiges Caching um Generierung zur Laufzeit zu Verhindern
- deflate-Komprimierung für textbasierte Ressourcen
- Minimierung des Codes – wer braucht schon Leerzeilen, etc.
- HTTP2 – Überlegt euch, ob in diesem Zuge die Reduktion von Requests noch sinnvoll ist
35
Überblick einiger Möglichkeiten
SEO-Atelier
Maximilian Bloch
Strukturierte Daten
36
SEO-Atelier
Maximilian Bloch
37
“Structured data is important for indexing and search features that users love: it should be both on the mobile and desktop version of the site. Ensure URLs within
the structured data are updated to the mobile version on the mobile pages.“ - Gary Illyes – Dez. 18
https://webmasters.googleblog.com/2017/12/getting-your-site-ready-for-mobile.html
SEO-Atelier
Maximilian Bloch
Strukturierte Daten –NON-AMP-Artikel Wo anfangen – wo aufhören? Wichtige Auszeichnungen
Types Article, NewsArticle, blogPosting Properties headline - Länge: nicht länger als 110 Zeichen
image - Breite: Min. 696 px - Auflösung: Min. Länge x Breite = 300.000 px - Formate: 16x9, 4x3, 1x1 - Dateiformate: JPG, PNG oder GIF
38
{ "@context": "https://schema.org", "@type": "NewsArticle", "image": [ "https://domain.tld/assets/1x1/image.jpg", "https://domain.tld/assets/4x3/image.jpg", "https://domain.tld/assets/16x9/image.jpg" ] }
Pflegeleicht & Empfohlen: JSON-LD
SEO-Atelier
Maximilian Bloch
Strukturierte Daten - Wichtigsten Auszeichnungen auf AMP Achtung: Auszeichnungen von Artikeln & Videos müssen auf AMP-Sites umfangreicher sein!
Types Article, NewsArticle, blogposting Notwendige Properties author, author.name, datePublished, headline, image, publisher, publisher.logo, publisher.ogo.height, publisher.logo.url, publisher.logo.width, publisher.name + weitere empfohlen Types VideoObject Notwendige Properties name, description, thumbnailUrl, publisher.logo, publisher.logo.height, publisher.logo.url + weitere empohlen Mehr, siehe: https://developers.google.com/search/docs/data-types/article https://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets/
39
SEO-Atelier
Maximilian Bloch
Mobile Index
40
Warum?
SEO-Atelier
Maximilian Bloch
41
Welche Aussagen bleiben denn hängen?
- Strukturierte Daten
- Pagespeed – AMP…. (auch in Kombination mit PWA)
- Desktop nicht mehr derart aktuell
SEO-Atelier
Maximilian Bloch
42
Aber
- Strukturierte Daten
- Pagespeed – AMP…. (auch in Kombination mit PWA)
- Desktop nicht mehr derart aktuell
Warum merkt sich Google denn einfach mein Setup?
SEO-Atelier
Maximilian Bloch
Duplicate Content…
https://developers.google.com/search/docs/data-types/article
https://developers.google.com/actions/content-actions/news
43
SEO-Atelier
Maximilian Bloch
SEO-Atelier
Maximilian Bloch
SEO-Atelier
Maximilian Bloch
90 % aller Unternehmensdaten wurden in den letzten 2 Jahren geschaffen
Das stellt Google vor enorme Probleme
Crawlingaufwände würden ins Unermessliche steigen
Informationen sind für Google nun auch: Apps, Rezepte, Bücher, Filme, Lieder, Fernsehshows
46
https://www.datacenter-insider.de/index.cfm?pid=7537&pk=499019&fk=900861&type=article
SEO-Atelier
Maximilian Bloch
• Mit dem Mobile First Index mach uns Google klar: Strukturierte Daten!
• Strukturierte Daten helfen vor allem Google – das Crawling wird einfacher, algorithmische Aufwände und Overhead minimiert
• Eine „Vereinheintlichung“ ist die Folge – Website-Übergreifend
Das LD in JSON-LD
47
SEO-Atelier
Maximilian Bloch
• Gleichzeitig können weitere, effiziente Datenströme genutzt werden: Feeds & APIs
• Feednutzung: AccuWeather, Hotels, Flüge, Shopping, Deeplink-Listen für App-Indexing
48
SEO-Atelier
Maximilian Bloch
• Strukturierte Daten, Nutzung von Feeds und APIs führen gleichzeitig zu einer weiteren Distanzierung von URLs und Links
• Wo finden wir denn jetzt schon keine URL mehr? AMP, native Apps, PWAs, vergessen wir nicht Google Now…
• Stattdessen Cloud
49
SEO-Atelier
Maximilian Bloch
50 Quelle: https://mobilemoxie.com/blog/understanding-mobile-first-indexing-23-long-term-impact-seo/
SEO-Atelier
Maximilian Bloch
So kann Google aggregieren & Schema-Beziehungen auf breiter ebene verstehen: Sportergebnisse, Nachrichten, Filmzeiten…
In der Cloud kann Google Engagement deutlich besser messen als durch Links & externe URL
Kosten für Cloud-Hosting sinken – Speicherkapazitäten steigen – Crawling lässt sich einsparen, eigene Kompressionsmethoden & Caching Algorithmen steigern Effizienz
Denken wir nur an das AMP-Beispiel
51
SEO-Atelier
Maximilian Bloch
Cross-Device-Tracking?
Alle Nutzerdaten bei Google?
Google Home? Antworten basieren auf Datenströmen ohne URLs – aus der Cloud
52
SEO-Atelier
Maximilian Bloch
Google fordert Entwickler auf, Android-Apps auf der Google-Cloud-Plattform zu testen
53
SEO-Atelier
Maximilian Bloch
54
Vielen Dank!
SEO-Atelier
Maximilian Bloch
SEO-Atelier
Schelklingerstr. 20
86156 Augsburg
Kontakt Maximilian Bloch
Tel 0821 80735508
https://seo-atelier.de