[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen – Artikelserie

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 1
timea / 123RF Archivio Fotografico

Im zweiten Teil meiner Artikelserie „Website-Tipps für Fotografen” ging es um die Themen Bilder SEO, Bildersuche und Tipps zum Start einer mehrsprachigen Website.

Im dritten Teil erfährst du, was bei der praktischen Umsetzung einen mehrsprachigen Fotografen-Website in WordPress zu beachten ist, was es mit dem „hreflang“-Tag eigentlich auf sich hat und und was bei Web-Versionen für unterschiedliche Länder zu beachten ist.

Du möchtest als Fotograf deine Werke in mehreren Sprachen und verschiedenen Ländern präsentieren?

Wenn du deine Foto-Arbeiten einem breiteren Publikum zugänglich machen möchtest, solltest du bei der Konzeption deiner Website auf jeden Fall eine zweite Sprachversion miteinbauen und diese auch für Suchmaschinen bestmöglich optimieren.

Ich finde, das Thema ist in der frühen Phase eines Relaunch oder Neuplanung deiner Website wichtig, und auch in Bezug auf SEO komplexer als vielleicht zunächst gedacht! Im zweiten Teil meiner Artikelserie „Website-Tipps für Fotografen” habe ich schon einige Tipps vorweggenommen: Sprachen trennen, eigene URLs verwenden, keine automatischen Übersetzungen, Verwende immer eine UTF-8-Codierung

Wenn du dein Portfolio mit WordPress erstellst, kannst du durch die Installation z.b. des Plugins „Polylang“ schnell und einfach Sprachversionen deiner Fotografen-Website hinzufügen.

Einen Tick professioneller, aber auch etwas kniffliger ist es mit dem Multilingual-Plugin „WPML“. Hier empfehle ich zunächst auf die Kompatibilität mit dem verwendeten WordPress-Theme zu achten!

In 6 einfachen Schritten zur Mehrsprachigkeit in WordPress

1. „Polylang“ installieren und aktivieren

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 2

2. Deine Sprachversionen hinzufügen

Füge jetzt deine gewünschten Sprachversionen hinzu. Bestehende Inhalte musst du der Hauptsprache zuordnen, indem du auf den im Bild (Abb. 2) eingekreisten Link klickst. Zuvor solltest du aber deine Hauptsprache festlegen, indem du das Stern-Symbol der gewünschten Sprache zuordnest.

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 3
Abb. 2: Sprachen festlegen

3. Sprach-Einstellungen bearbeiten

Gehe nun zu den „Settings“ und bearbeite zunächst die URL-Einstellungen: abhängig von deiner Domain-Strategie (siehe auch Teil 2 der Artikelserie) kannst du festlegen unter welchen URLs deine Sprachversionen angezeigt werden sollen. Für die Hauptsprache kannst du die URL-Sprachinformationen auch gerne ausgeblendet lassen, indem du das Häckchen aktivierst.

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 4
Abb. 3: Polylang-Settings

Ich empfehle dir aus SEO-technischer Sicht, die automatische Erkennung der Browser-Sprache besser zu deaktivieren und dafür einen Sprachwechsler gut sichtbar auf der Website einzubauen!

4. Sprachwechsler hinzufügen

Du hast zwei Möglichkeiten den Sprachwechsler auf deiner Website hinzuzufügen:

a.) Den folgenden HTML/PHP-Code fügst du in der header.php-Datei deines Themes an der gewünschten Stelle ein:

<ul><?php pll_the_languages();?></ul>

b.) Einfacher ist es aber den Sprachwechsler ohne Code-Kenntnisse unter Design > Menüs wie folgt einzubauen:

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 5
Abb. 4: Sprachwechsler (Language switcher) im Menu hinzufügen und Anzeigeort aktivieren.
[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 6
Abb. 5: Anstelle der Flaggen den Namen der Sprachen anzeigen lassen.

5. „Polylang“-Sprachwechsler mit CSS-Code gestalten

Du kannst den Sprachwechsler mit CSS an deine grafischen Vorstellungen anpassen. Ich habe in dem folgenden CSS-Code einen 2px breiten Rand um die Sprachwahl-Buttons hinzugefügt:

.lang-item a {
display: inline;
list-style: none;
padding: 8px;
border: 2px solid !important;
}

Folglich siehst du mein Ergebnis. Ich habe den Code-Block in mein „Additional CSS“ eingefügt:

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 7
Abb. 6: Die Erscheinung des Sprachwechslers personalisieren.

6. Übersetze deine Inhalte

So, nun kannst du deine Inhalte/Seiten übersetzen! Klicke auf den +Button (Abb. 7) unter der Sprach-Flagge und füge deine Übersetzungen der Seite hinzu.

[Teil 3] Mehrsprachigkeit: Website-Tipps für Fotografen - Artikelserie 8
Abb. 7: Eine Seite übersetzen

SEO-Tipp: Prüfe die richtige Verwendung von „hreflang“!

Website mit unterschiedlichen Sprachversionen? Lokalisierten Content nutzerspezifisch in den Googlesuchergebnissen platzieren? Google auf verschiedene Länderversionen einer Website hinweisen? Hier hilft hreflang!

„Hreflang“ – genauer gesagt das Linkattribut rel=“alternate“ hreflang=“x“ – ist ein HTML-Meta-Element und weist Google auf verschiedene Sprach- und Länderversionen einer Website hin. Das Attribut unterstützt Google bei der spezifischen Auslieferung von Inhalten und weist z.b. einem italienischsprachigen Nutzer auf die für seine Sprache bereitgestellte Version der Website hin.

Mit der Verwendung von „hreflang“ können zudem Probleme mit doppeltem Inhalt verhindert werden. Denn hast du z.b. ähnliche Inhalte für deine Schweizer Nutzer unter der .ch-Domain platziert, so kannst du mit dem HTML-Attribut Google darauf hinweisen, ohne dabei in die „Duplicate-Content“-Falle zu treten …

Wie wird „hreflang“ verwendet?

Die Anwedung ist doch recht komplex und kann sowohl händisch im HTTP- oder HTML-Head-Bereich einer Website, als auch in WordPress mit den oben genannten Multilingual-Plugins automatisch eingefügt werden. Das Element kann aber auch in der XML-Sitemap untergebracht werden.

Verwendest du ein Multilingual-WP-Plugin?

Ja? Dann kannst du jetzt unter folgendem, kostenlosen Link prüfen ob das „hreflang“-Attribut richtig eingebunden ist: https://www.gutewebsites.de/tool/hreflang-checker

Die Code-Beispiele unten erklären die Einbindung von „hreflang“ im HTML-Head-Bereich.

Wenn das Ziel die Sprache sein soll:

<link rel=“alternate“ hreflang=“de“ href=“https://www.digitalmarketingblog.it/“>
<link rel=“alternate“ hreflang=“it“ href=“https://www.digitalmarketingblog.it/it/“>

Wenn das Ziel die Sprache und verschiedene Länder wären:

<link rel=“alternate“ hreflang=“it“ href=“https://www.digitalmarketingblog.it/“>
<link rel=“alternate“ hreflang=“de“ href=“https://www.digitalmarketingblog.it/de“>
<link rel=“alternate“ hreflang=“de-ch“ href=“https://www.digitalmarketingblog.it/de-schweiz/“>

Und als Fallback für nicht speziell definierte Fälle kann der „hreflang“-Wert x-default hinzugenommen werden.

<link rel=“alternate“ hreflang=“x-default“ href=“https://www.digitalmarketingblog.it/“>

Weiterführende Informationen zu „hreflang“:

Fazit: Mehrsprachigkeit zahlt sich immer aus!

Es ist zwar einiges an Mehraufwand, den du betreiben musst, um eine Website für mehrere Sprachen und Nutzer in unterschiedlichen Ländern aufzubauen. Aber auf lange Sicht zahlt sich die Internationalisierung deiner Präsentation auf jeden Fall aus! Aber überlege dir gut, welche Inhalte du für wen und wo zur Verfügung stellen möchtest? Auch Google versucht das Targeting immer genauer zu machen. Und denk daran, du kannst der Suchmaschine dabei helfen, Inhalte besser auffindbar zu machen …

Wenn du mit WordPress arbeitest, ist die technische Umsetzung einer zweiten oder dritten Sprachversion deiner Website mit dem „Polylang“-Plugin gar nicht so schwierig und weniger kompliziert. Hast du bereits Erfahrungen mit dem Plugin oder WPML für WordPress gemacht? Lass es mich wissen!