Typo3 und SEO Kunden und Redakteure ganz einfach glücklich machen
Typo3 und SEO
Kunden und Redakteure
ganz einfach glücklich machen
Typo3 und Suchmaschinenoptimierung
Kunden & Redakteure ganz einfach glücklich machen
Vorgeplänkel
Metadaten Basics
OpenGraph-Metadaten
Schemata im Quellcode
hreflang für mehrsprachige Sites
Optimale URLs
Doppelter Content
Kanonische Verweise
Ladegeschwindigkeit
robots.txt & sitemap.xml
Google Tools für Websites
2
Typo 3 und Suchmaschinenoptimierung – Vorgeplänkel
Was geht denn nun … und was geht nicht?
• Typo3 ist sehr flexibel … für SEO ist diese Flexibilität von Vorteil
• Aufwand für SEO recht gering … eine Site kommt ja eh nicht Out-of-the-box
• Typo3 Extension Repository (TER) … bietet viele Extensions rund um SEO, die aber nicht immer passen oder veraltet sind … liefert für viele Spezialfälle keine passenden Extensions (Internationalisierung, Regionalisierung)
3
Typo 3 und Suchmaschinenoptimierung – Vorgeplänkel
Wieviel SEO geht in welcher Typo3-Version?
• Typo3 7.6 steht hier im Fokus … vieles hiervon funzt auch in älteren Versionen
• Beispiel: File Abstraction Layer (FAL) … seit Version 6.0 zentrale Datei-Metadaten- Verwaltung über Datei-Liste im Typo3-Backend … Auslagerung statischer Dateien (Bilder, Style- Sheets, JavaScripts) in Content Delivery Network
• Inspiration zu dieser Session … Fachbeitrag von Typo3-Experte und Buchautor Oliver Thiele in der Website Boosting #34
4
Typo 3 und Suchmaschinenoptimierung – Vorgeplänkel
Nur noch responsive Websites online stellen
• Suchmaschinen bevorzugen … auf mobile Endgeräte optimierte Websites Google Guideline for Mobile Optimization + Test https://developers.google.com/webmasters/mobile-sites/ https://testmysite.thinkwithgoogle.com
• Typo3 bietet Responsivität mit dem Introduction Package https://typo3.org/extensions/repository/view/introduction (7.6.0 - 8.9.99) … so nutzt du Twitter Bootstrap im Frontend … im Backend hast du vorgefertigte Page-Layouts & Inhaltselemente … demnächst sollen dem Core „Structured Content Containers“ hinzugefügt werden > ermöglichen Gruppierung von Inhaltselementen von Hause aus
5
Typo 3 und Suchmaschinenoptimierung – Vorgeplänkel
Nur noch responsive Websites online stellen
• Suchmaschinen bevorzugen … auf mobile Endgeräte optimierte Websites Google Guideline for Mobile Optimization + Test https://developers.google.com/webmasters/mobile-sites/ https://testmysite.thinkwithgoogle.com
• Typo3 bietet Responsivität mit dem Introduction Package https://typo3.org/extensions/repository/view/introduction (7.6.0 - 8.9.99) … so nutzt du Twitter Bootstrap im Frontend … im Backend hast du vorgefertigte Page-Layouts & Inhaltselemente … demnächst sollen dem Core „Structured Content Containers“ hinzugefügt werden > ermöglichen Gruppierung von Inhaltselementen von Hause aus
6
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
Title und Meta-Description für perfekte Suchergebnisse
• Klickstarke Suchergebnisseiten-Snippets … für hohe Klickraten (CTR) > Ranking-Kriterium, aber nicht zu viel versprechen > Bounce-Rate!
• In Typo3 nutzen wir standardmäßig für … den <title> das Feld Seitentitel, … die <meta description> ein Feld im Reiter „Metadaten“ der Seiteneigenschaften, … die <meta keywords> gar nix mehr, … deren Ausgabe im Quelltext etwas TypoScript-Code (siehe nächste Seite)
7
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
8
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
9
Auslesen der Seitentitel aus Seiteneigenschaften für <title>
1.
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
10
Auslesen der Seitentitel aus Seiteneigenschaften für <title>
1.
Auslesen der Description aus Seiteneigenschaften für Meta- Description & og:description und des Seitentitels für og:title
2.
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
11
Auslesen der Seitentitel aus Seiteneigenschaften für <title>
1.
Auslesen der Description aus Seiteneigenschaften für Meta- Description & og:description und des Seitentitels für og:title
TypoScript-Eigenschaft page.headerData muss hierfür nicht mehr genutzt werden
Tipp 1
2.
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
12
Auslesen der Seitentitel aus Seiteneigenschaften für <title>
1.
Auslesen der Description aus Seiteneigenschaften für Meta- Description & og:description und des Seitentitels für og:title
2.
Nutze diese Eigenschaft für beliebige HTML-Code- Ausgaben (Altersklassifizierung, Metadaten für Twitter, XING, LinkedIn oder Google+)
Tipp 2
Typo 3 und Suchmaschinenoptimierung – Metadaten Basics
TypoScript-Code für Metadaten-Integration, kombiniert mit OpenGraph-Tags (og)
• In Typo3 können wir og:Tags verwenden/konfigurieren … das nutzen wir, um herkömmliche Metadaten und zusätzlich OpenGraph-Tags gemeinsam auszuliefern
13
Auslesen der Seitentitel aus Seiteneigenschaften für <title>
1.
Auslesen der Description aus Seiteneigenschaften für Meta- Description & og:description und des Seitentitels für og:title
2.
Mehr Metadaten auf diesem Wege gefällig – manuelle noindex, nofollow, canonical? Zusätzliche Felder in Seiteneigenschaften nötig!
Tipp 3
Typo 3 und Suchmaschinenoptimierung – OpenGraph Metadaten
Warum überhaupt für og:Tags im Quellcode sorgen?
• Nicht nur fancy Snippets für Suchmaschinen … auch für soziale Netzwerke sind wichtig. Infos zum Open Graph Protocol: http://ogp.me
• Neben Facebook auch für diese SoMe spannend
… https://dev.twitter.com/cards/getting-started#opengraph … https://developers.google.com/+/web/snippet/ … https://developers.pinterest.com/docs/rich-pins/overview/
14
Typo 3 und Suchmaschinenoptimierung – Schemata im Quellcode
Semantische Auszeichnungen mit schema.org (Microdata, JSON-LD, RDFa)
• Informationen in strukturierten Daten … im Quellcode zur Verfügung zu stellen, führt zu Rich Snippets > i.d.R. Stärkung der Klickrate
• Die aus SEO-Sicht spannendsten Schemata sind
… Organization: https://schema.org/Organization … Person: https://schema.org/Person … Local Business: https://schema.org/LocalBusiness … Breadcrumbs: https://developers.google.com/structured-data/breadcrumbs … Review: https://schema.org/Review … Product: https://schema.org/Product … Event: https://schema.org/Event https://goo.gl/IOY5jp
15
Typo 3 und Suchmaschinenoptimierung – Schemata im Quellcode
Realisierung semantischer Auszeichnungen mit Typo3
• Typo3 liefert dies nicht mit … eigene Inhaltselemente & Extensions sind nötig!
• Aber: Viele Erweiterungen
… können mit Hilfe einer TypoScript-Konfiguration oder „Provider-Extension“ andere Template-Dateien aus selbst angelegten Ordnern verwenden ;-)
• So können Template-Dateien Update-sicher … in anderen Ordnern modifiziert werden. Die Realisierung der strukturierten Auszeichnungen wird dann dort umgesetzt.
16
Typo 3 und Suchmaschinenoptimierung – Schemata im Quellcode
Realisierung semantischer Auszeichnungen mit Typo3
• „In der finalen Typo3-Version 7 LTS … wird auch das Rendering von Inhaltselementen überarbeitet. In Version 7.4 wurden dafür schon Daten-Prozessoren eingeführt, die über TypoScript aufgerufen werden können. Möchte man z.B. eine große Zahl semantischer
Daten in die Datenbank importieren, um bspw. einen Produktkatalog auszuzeichnen, können die Daten mithilfe der Daten-Prozessoren über eine Komma-separierte Datei ausgelesen und in
Arrays umgewandelt werden. Im Fluid-Template könnte dann mit einer foreach-
Schleife das Array als HTML-Tabelle mit Micro- daten ausgegeben werden.“ Oliver Thiele in Website Boosting #34
17
Typo 3 und Suchmaschinenoptimierung – Mehrsprachige Sites
Das hreflang-Attribut für multilinguale Website-Projekte
• Länderbezug für Suchmaschinen deutlich machen … über den <head> jeder(!) Seite der Website
• Hohes Fehler-Potenzial in hreflang-Auszeichnungen
… support.google.com/webmasters/answer/189077?hl=de … www.sistrix.de/hreflang-guide/ … ranking-check.de/blog/hreflang-die-5-haeufigsten-fehler-und-hall-of-fame/
18
Typo 3 und Suchmaschinenoptimierung – Mehrsprachige Sites
Das hreflang-Attribut für multilinguale Website-Projekte
• Länderbezug für Suchmaschinen deutlich machen … über den <head> jeder(!) Seite der Website
• Hohes Fehler-Potenzial in hreflang-Auszeichnungen
… support.google.com/webmasters/answer/189077?hl=de … www.sistrix.de/hreflang-guide/ … ranking-check.de/blog/hreflang-die-5-haeufigsten-fehler-und-hall-of-fame/
19
x-default nur setzen, wenn es eine Länderauswahl gibt
Tipp 1
Typo 3 und Suchmaschinenoptimierung – Mehrsprachige Sites
Das hreflang-Attribut für multilinguale Website-Projekte
• Länderbezug für Suchmaschinen deutlich machen … über den <head> jeder(!) Seite der Website
• Hohes Fehler-Potenzial in hreflang-Auszeichnungen
… support.google.com/webmasters/answer/189077?hl=de … www.sistrix.de/hreflang-guide/ … ranking-check.de/blog/hreflang-die-5-haeufigsten-fehler-und-hall-of-fame/
20
Möchtet ihr sprachgleiche Länder unterscheiden, dann sehen Suchmaschinen gerne eine Version für die Sprache an sich!
Tipp 2
Typo 3 und Suchmaschinenoptimierung – Mehrsprachige Sites
Sorge mit Sprachausgabe in Typo3 vs. hreflang-Prinzip
• Sprachumschaltung erfolgt in Typo3 üblicherweise … mit dem GET/POST-Parameter „L“. In der TypoScript- Konfiguration „config.sys_language_mode“ wird dabei fast immer „ = content_fallback“ definiert. >> nicht übersetzte Seiten erzeugen doppelte Inhalte, weil zwei verschiedene URLs denselben Content zeigen. Lösung 1: Alles muss immer komplett übersetzt werden! Lösung 2: „config.sys_language_mode = strict“ Übersetzung nicht aufrufbar
• Tipp für alternative Einbindung des hreflang-Attribut
… über sitemap.xml, sofern vorhanden: https://support.google.com/webmasters/answer/2620865?hl=de
21
Typo 3 und Suchmaschinenoptimierung – Optimale URLs
Sprechende URLs statt URLs mit id-Parametern und &=Sonderzeichen
• Warum überhaupt „sprechende“ URLs? … weil sie das Suchmaschinen-Snippet aufhübschen
• Lösung: Typo3 Extension realurl nutzen
… automatische Konfiguration ist ok. Manuelle Konfiguration zuweilen sinnvoller. Geht dazu in die Datei typo3conf/realurl_conf.php
22
Typo 3 und Suchmaschinenoptimierung – Doppelter Content
Duplicate Content ist eine Seuche im WWW > Trailing Slashes
• Der Seitenaufruf mit und ohne „/“ am Ende der URL … führt immer zum gleichen Ergebnis
• Abstellen durch eine Extra-Zeile im init-Bereich
… der Extension-Konfiguration von realurl 'appendMissingSlash' => 'ifNotFile,redirect[301]', > es wird immer auf die URL mit „/“ umgeleitet
23
Typo 3 und Suchmaschinenoptimierung – Doppelter Content
Duplicate Content is a Pain in the Ass of the WWW > Multiple Domains
• Jeder Inhalt sollte stets nur eine(1) Adresse haben … auch wenn der Webprojekt-Betreiber 123.456 Domains registriert hat
• Abstellen über die .htaccess-Datei des Webserver
… nicht über die Extension realurl (langsam) Hier wird‘s erklärt: https://de.onpage.org/wiki/Duplicate_Content
• Das gilt auch für http:// zu https:// … und für domain.com zu www.domain.com
• Achtung: 301 ≠ 302 (http 1.1: 308 ≠ 307, 303)
… denn wir wollen permanent redirects … Check des Statuscodes: https://httpstatus.io
24
Typo 3 und Suchmaschinenoptimierung – Doppelter Content
Duplicate Content ist WWW-Verschmutzung > PDF- und Druck-Ansichten
• Kunden verlangen immer (mal) wieder … PDF- oder Druck-Ansichten des Contents! In Typo3 wird dies oft mit der Erzeugung einer weiteren Seitendefinition in TypoScript realisiert. Der Aufruf erfolgt meist mit dem URL-Parameter „&type=98*“
• Abstellen dieser zusätzlichen Seiten
durch nofollow und noindex
… der Link zur Druckansicht wird um das Attribut rel=„nofollow“ ergänzt und die HTML-Druck-Ansicht mit dem Meta-Tag <meta name=„robots“ content=„noindex“> Achtung: Nicht die robots.txt hierfür nutzen!
25
Typo 3 und Suchmaschinenoptimierung – Doppelter Content
Duplicate Content macht knapp 30% des WWW aus > Multiple URLs
• realurl ist eine bedeutsame DC-Quelle … weil ohne DC-Handling jede Seite mittels realurl vier Adressen haben kann: > index.php?id=9 > agb > agb/ > agb.html
• Abstellen durch Kanonisierung
… Canonical-Links sind der Königsweg! Kanonische Verweise sind idiotensicher ;-) Nicht die robots.txt hierfür nutzen!
• Crawl-Budget beachten
26
Typo 3 und Suchmaschinenoptimierung – Kanonische Verweise
Canonical-Links sind eine Super-SEO-Maßnahme
• Suchmaschinen verstehen Canonicalization … weil diese Angabe ein-eindeutig ist. Besonders spannend im Kampf gegen DC! > nicht jede Sortierung muss indexierbar sein
• Vorsicht: Fehlerquelle
… bei der korrekten Angabe des Canonicals. Immer dieselbe Seite … bei Filtern die Haupt- Liste … bei Duplikaten das Original
27
Typo 3 und Suchmaschinenoptimierung – Kanonische Verweise
Canonical-Links sind eine Super-SEO-Maßnahme
• Suchmaschinen verstehen Canonicalization … weil diese Angabe ein-eindeutig ist. Besonders spannend im Kampf gegen DC! > nicht jede Sortierung muss indexierbar sein
• Vorsicht: Fehlerquelle
… bei der korrekten Angabe des Canonicals. Immer dieselbe Seite … bei Filtern die Haupt- Liste … bei Duplikaten das Original
28
Canonical Links funktionieren auch über Websites hinweg
Tipp
Typo 3 und Suchmaschinenoptimierung – Kanonische Verweise
Canonical-Links in Typo3 umsetzen
• Um einfach nur auf „Nummer sicher“ … zu gehen, fügt den kanonischen Verweis zu jeder Seite „hart“ im Quellcode ein
• Müssen Filter und Sortierungen
… über Canonical-Links „zusammengeführt“ werden, geht die Konfig nur manuell über ein Eingabefeld, das erst noch her muss. Beispiel in Oliver Thieles Demo-SEO-Extension: https://github.com/oliverthiele/ot_seo
• Paginierung setzt man idealerweise … mit rel=„prev“ und rel=„next“ um.
29
Typo 3 und Suchmaschinenoptimierung – Kanonische Verweise
Canonical-Links in Typo3 umsetzen
• Um einfach nur auf „Nummer sicher“ … zu gehen, fügt den kanonischen Verweis zu jeder Seite „hart“ im Quellcode ein
• Müssen Filter und Sortierungen
… über Canonical-Links „zusammengeführt“ werden, geht die Konfig nur manuell über ein Eingabefeld, das erst noch her muss. Beispiel in Oliver Thieles Demo-SEO-Extension: https://github.com/oliverthiele/ot_seo
• Paginierung setzt man idealerweise … mit rel=„prev“ und rel=„next“ um.
30
Liefern Folgeseiten doppelte Inhalte, dann gehört in deren Quellcode ein „noindex“.
Tipp
Typo 3 und Suchmaschinenoptimierung – Ladegeschwindigkeit
Website-Performance ist ein indirektes Ranking-Kriterium
• Suchmaschinen wollen schnelle Websites … weil Nutzer keine Geduld haben. Auch Facebook weiß das > Instant Articles … und Google zieht nach > Accelerated Mobile Pages
• Für News- / Portal-Seiten ist AMP … und Instant Articles wohl „zwingend“ > https://www.ampproject.org/ > https://instantarticles.fb.com/
• „Geschwindigkeitstest“ von Google
… mit nicht 100% sinnvollen Ratschlägen > https://testmysite.thinkwithgoogle.com > Tipp: Webanalyse-Tool nutzen!
31
Typo 3 und Suchmaschinenoptimierung – Ladegeschwindigkeit
Performance von Typo3-Websites optimieren
• Render-Zeiten einsparen … mit TypoScript-Funktion „cache“ Tipp: Extension nc_staticfilecache
• Personenbezogene Daten … über AJAX nachladen > so wird teilweises bis komplettes Cachen möglich.
• Website-SUCHE optimal anlegen
… für kleine Sites Standard-Typo3-Extension „Indexsuche“ verwendbar > langsam bei größeren Websites > besser: Apache Solr, Elasticsearch oder benutzerdefinierte Google Suche
32
Typo 3 und Suchmaschinenoptimierung – robots.txt & sitemap.xml
Jede Website braucht eine robots.txt
• Suchmaschinen-Robots brauchen Führung … die robots.txt liefert diese!
• Zugang zu allen Dateien ermöglichen … … die fürs Rendern nötig sind. Niemals CSS- und JS-Dateien blockieren! Tipp: Google Search Console > Blockierte Ressourcen
• Disallow für alle Server-Ordner nutzen …
… in denen alle sonstigen Dateien enthalten sind > User-Daten, Backend-Logins usw.
• Google bietet robots.txt-Checks … in der Google Search Console
33
Typo 3 und Suchmaschinenoptimierung – robots.txt & sitemap.xml
Nicht jede Website braucht eine sitemap.xml
• Nur für große Websites nötig … sagt Google … und meint: Sites mit mehr als 10.000 Dokumenten
• Große Webprojekte … … sollten verschiedene sitemap.xml zur Verfügung stellen: Seiten (nach Typ), Bilder, Videos … How to: https://goo.gl/UfjYNG
• Keine perfekte Typo3-Lösung …
… dd_googlesitemap, metaseo und google_services bieten gute Ansätze; > in Sonderfällen fehlen Details > hreflang-Attribut nicht unterstützt
34
Typo 3 und Suchmaschinenoptimierung – Google Tools
Drei Google Tools für Websites in einem Google-Firmenaccount
• Google Search Console … Technik- und Marketing-Reports > außerdem: bing Webmastertools
• Google Analytics … Website-Analyse muss sein > Alternativen: Piwik, Yandex Metrika > Datenschutz-Probleme beachten
• Google My Business
… für lokal-, regional-agierende Unternehmen > Administration des Google Maps Eintrags > außerdem: bing Places, HERE, OpenStreetMap
35
SEO Profi Berlin – Online-Marketing-Experten in Berlin
(Fast) immer für euch erreichbar:
www.SEO-Profi-Berlin.de
www.SEO-Profi-Akademie.de
www.twitter.com/dskom
www.facebook.com/SEO.Profi.Berlin
www.xing.com/profile/Sven_Deutschlaender