Die Dokumentsprache mit lang angeben
Das HTML-Attribut lang gibt an, in welcher Sprache ein Text geschrieben ist. Am <html>-Element legt es die Hauptsprache der Seite fest. Die Angabe gilt auch für enthaltene Elemente, solange dort keine andere Sprache steht:
<html lang="de">
Screenreader können mit dieser Information eine passende Aussprache wählen. Steht über einem deutschen Text lang="en", kann eine englische Stimme deutsche Wörter unverständlich aussprechen. Welche Stimme verwendet wird, hängt vom Hilfsmittel, den verfügbaren Stimmen und den Einstellungen ab. Browser können die Angabe beispielsweise auch bei der Silbentrennung verwenden.
Für Barrierefreiheit muss die Hauptsprache durch Software erkennbar sein. Das verlangt WCAG 3.1.1 auf Stufe A. Ein passendes lang am <html>-Element ist dafür der übliche Weg.
Google bestimmt die Sprache dagegen anhand des sichtbaren Inhalts. Das HTML-Attribut lang und hreflang verwendet Google nicht zur Erkennung der Textsprache. Quelle: Google zu mehrsprachigen Websites
Sprachcodes und fremdsprachige Abschnitte
HTML-Sprachangaben folgen BCP 47. Häufige Beispiele sind de für Deutsch, en für Englisch, fr für Französisch und ja für Japanisch. Eine zusätzliche Region kann eine Sprachvariante präzisieren: de-AT bezeichnet österreichisches Deutsch, en-US amerikanisches Englisch.
Wähle die kürzeste Angabe, die die Sprache ausreichend beschreibt. lang="de" ist für viele deutschsprachige Seiten passend. Ein Regionszusatz beschreibt die Sprachvariante; er setzt keine eigene Länderwebsite voraus. Die W3C-Anleitung zur Wahl von Sprachcodes erläutert auch Schriftvarianten und weitere Bestandteile. Das Register enthält mehr als zweistellige Sprachcodes, deshalb solltest du unbekannte Angaben nachschlagen statt allein nach ihrer Länge urteilen.
Kennzeichne einen anderssprachigen Abschnitt am betreffenden Element. Ein erfundenes Beispiel auf einer deutschen Seite:
<p>Unsere Partnerin schreibt:</p>
<blockquote lang="en">Please send the revised draft by Friday.</blockquote>
WCAG 3.1.2 auf Stufe AA behandelt solche Sprachwechsel. Ausnahmen gelten unter anderem für Eigennamen, Fachbegriffe und Wörter, die zum Sprachgebrauch des umgebenden Textes gehören. Du musst deshalb nicht jedes englische Lehnwort einzeln auszeichnen.
Bei als HTML ausgelieferten Seiten genügt lang. Bei XML-basiertem XHTML ist xml:lang relevant; wenn beide Attribute verwendet werden, müssen ihre Werte übereinstimmen. Die W3C-Anleitung zur Sprachdeklaration in HTML unterscheidet die Formate.
Einen Widerspruch zwischen Sprache und Inhalt korrigieren
Ein Theme kann beispielsweise lang="en-US" ausgeben, obwohl die veröffentlichte Seite überwiegend auf Deutsch geschrieben ist. ClariSEO kann bestimmte Widersprüche zwischen einer deklarierten deutschen oder englischen Seitensprache und dem dazugehörigen Text melden. Das ist eine begrenzte automatische Erkennung; kurze Texte, andere Sprachen und komplexe Sprachmischungen brauchen eine manuelle Prüfung.
Prüfe bei einem solchen Hinweis zuerst das <html>-Element und den sichtbaren Hauptinhalt. Ist die Seite deutsch, ändere die Spracheinstellung der Seite oder des Templates entsprechend. Ist nur ein einzelner Abschnitt anderssprachig, kennzeichne diesen Abschnitt mit seinem eigenen lang.
Kontrolliere danach die veröffentlichte Ausgabe. Eine Änderung im CMS kann einzelne Templates unberührt lassen. Teste auch die Aussprache mit einem Screenreader, wenn sie für den betroffenen Inhalt geprüft werden soll. Hreflang-Verweise ändern diese Sprachinformation für Hilfsmittel nicht.
Sprachversionen mit Hreflang verknüpfen
Hreflang teilt Suchmaschinen mit, welche URLs alternative Sprach- oder Regionalversionen eines Inhalts enthalten. Beispielsweise kann eine Produktseite auf Deutsch und Englisch erscheinen oder getrennte Angebote für Deutschland und Österreich haben. Die Verweise helfen Google, eine passende Version im Suchergebnis auszuwählen.
Übersetzter Hauptinhalt wird laut Google nicht allein wegen derselben Seitenstruktur als Duplikat behandelt. Hreflang ist deshalb keine Voraussetzung, um eine Übersetzung vor einer solchen Einordnung zu schützen. Quelle: Google zu lokalisierten Seiten
Ein erfundenes Beispiel für den HTML-Kopf einer deutschen Seite:
<!doctype html>
<html lang="de">
<head>
<title>Über uns | Beispielunternehmen</title>
<link rel="canonical" href="https://example.com/de/ueber-uns">
<link rel="alternate" hreflang="de" href="https://example.com/de/ueber-uns">
<link rel="alternate" hreflang="en" href="https://example.com/en/about-us">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/a-propos">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about-us">
</head>
<body>
<h1>Über uns</h1>
</body>
</html>
Die englische und französische Seite erhalten dieselben Hreflang-Verweise, jeweils mit ihrer eigenen Dokumentsprache und passender Canonical-URL. Für Google sind Selbstverweise, gegenseitige Rückverweise und vollständige URLs mit https:// oder http:// erforderlich. Als Alternativen zur HTML-Auszeichnung unterstützt Google HTTP-Header und Sitemaps.
x-default benennt die Ausweichseite für Spracheinstellungen, die kein anderer Eintrag abdeckt. Sie kann beispielsweise eine Sprachauswahl anbieten. Google empfiehlt diese Angabe unabhängig von einer bestimmten Mindestzahl an Sprachen. Die Hreflang-Dokumentation enthält die vollständigen Regeln und die unterstützten Sprach- und Regionscodes.
Hreflang und Canonical abstimmen
Eine Canonical-URL kennzeichnet die bevorzugte URL unter gleichen oder sehr ähnlichen Seiten. Bei weitgehend gleichem Inhalt in derselben Sprache für mehrere Regionen empfiehlt Google, Canonical und Hreflang gemeinsam abzustimmen. Quelle: Google zu regionalen Duplikaten
Im Beispiel oben hat jede Übersetzung eine eigene Canonical-URL. Prüfe bei der Umsetzung, dass die Hreflang-Ziele die gewünschten Seiten erreichen. Unterschiedliche Protokolle, eine abweichende www-Variante, Weiterleitungen oder geänderte Pfade können darauf hinweisen, dass alte und neue URLs vermischt wurden.
Kontrolliere beim Veröffentlichen eine zusammengehörige Gruppe von Sprachversionen. Jeder Verweis soll zum entsprechenden Inhalt führen, statt alle Unterseiten mit der fremdsprachigen Startseite zu verbinden. Ergänze sichtbare Links für den Sprachwechsel, damit Besucher ihre Sprache selbst wählen können. Die technischen Hreflang-Verweise im Seitenkopf ersetzen diese Navigation nicht.