September 20, 2023
Warum braucht man eine zweisprachige Website?
Die Antwort ist einfach: Wenn du mehrere Sprachen sprichst, kannst du das zu deinem Vorteil nutzen, indem du KlientInnen aus verschiedenen Ländern bedienen kannst. Das bedeutet, dass deine Kundenkreis sich verdoppelt (je nachdem, welche Sprachen du sprichst, und wie viele).
Und jetzt hör ich dich schon fragen: “Aber warum sollte ich eine Website machen, bei der man manuell zwischen verschiedenen Sprachen wechseln kann, wenn die KI eine Website doch leicht übersetzen kann?”
Das ist eine sehr berechtigte Frage. Aber hast du schon einmal eine ausländische Website besucht, sie automatisch übersetzen lassen und dabei festgestellt, wie schlecht die meisten Übersetzungen waren und wie die übersetzte Version völlig durcheinander war (z. B. dass die Buttons zu kurz für die Schrift waren, oder die Überschriften in einer zweiten Zeile standen und einen Teil der restlichen Schrift verdeckt haben)? Schau dir nur mal dieses Beispiel einer missglückten Spanischen Übersetzung einer Englischen Seite an:

Die eigentliche Frage ist: Was ist DEIN persönliches Ziel mit deiner Website? Wenn du nicht einmal eine zweite (oder dritte oder vierte) Sprache sprichst, gibt es keinen Grund für eine mehrsprachige Website, weil du dann nicht in der Lage wärst, KlientInnen zu bedienen, die deine Sprache nicht sprechen. Oder wenn du deine Produkte nur in Deutschland verkaufst und weißt, dass du nur deutsche KundInnen hast. Ich glaube, du verstehst, worum es mir geht.
Wenn du jedoch mehrere Sprachen sprichst und tatsächlich KlientInnen aus Ländern bedienen willst, die diese Sprachen sprechen, solltest du bedenken, dass eine professionell erstellte mehrsprachige Website…
…dich professionell aussehen lässt (weil du Probleme wie die auf dem Bild oben, mit zu kurzen Buttons und schlechten Übersetzungen vermeidest).
…zeigt, dass du tatsächlich daran interessiert bist, KlientInnen zu bedienen, die eine bestimmte Sprache sprechen, weil du dir die Zeit genommen haben, eine Website zu erstellen, die speziell diese Menschen berücksichtigt.
…Vertrauen schafft, weil potenzielle KlientInnen sehen können, dass deine Website in ihrer Sprache erstellt (und nicht nur automatisch von Google übersetzt) wurde.
1. Schritt: Dupliziere deine Seiten
Wenn du eine Website zweisprachig machen willst, ist der erste Schritt immer, deine Seiten zu duplizieren. Nehmen wir an, du hast bereits eine deutsche Website und möchtest sie um Englisch erweitern. Du nimmst also die deutsche „Home“-Seite, duplizierst sie und übersetzt die duplizierte Version ins Englische. Passe alle Buttengrößen usw. so an, dass alles auf Englisch genauso gut aussieht wie auf Deutsch.
Achte auch darauf, dass du 2 Versionen deines Headers und Footers und der mobilen Navigation hast, eine in Deutsch und eine in Englisch, und füge immer die richtige Version auf der richtigen Seite ein.
Eine frühere Version meiner eigenen Website war in Deutsch, Englisch und Spanisch. Schau dir links die rot umrandeten Seiten an:

Eine Seite duplizieren kannst du, indem du auf die 3 kleinen Kreise rechts neben dem Seitennamen klickst:

Bei den beiden vorangegangen Bildern siehst du die englische und deutsche Version meiner Website. Hier siehst du noch die Spanische. Achte darauf, wie sich die Länge der Überschrift verändert und wie ich den Unterstrich angepasst habe, damit es bei allen 3 Versionen stimmt:

2. Schritt: ISO Codes (Länderkürzel)
Dir ist bestimmt schon aufgefallen, dass ich im PAGES Menü links meine 3 Home-Seiten folgendermaßen benannt habe: “en: Home”, “de: Home”, “es: Home”. Hierbei steht “en” für Englisch, “de” für Deutsch und “es” für Spanisch (Español). Ich rate dir dringend, deine bilingualen Seiten dementsprechend zu benennen, damit erstens du selbst nicht durcheinanderkommst, und zweitens hilft dir das bei der SEO (Suchmaschinenoptimierung). Du kannst eine offizielle Liste mit allen ISO Codes hier finden.
Ich empfehle dir außerdem, immer die gleiche Reihenfolge der Sprachen beizubehalten. Wie du bei mir sehen kannst, habe ich immer Englisch, Deutsch, Spanisch. Das habe ich erst für die Home-Seite gemacht, dann für die About me-Seite, und dann für alle anderen Seiten auch. So kommst du nicht durcheinander.
3. Schritt: SEO (Search Engine Optimization)
Um deine bilinguale Website suchmaschinenfreundlicher zu machen (damit Google deine Website leichter findet und den richtigen Leuten anzeigt), solltest du dies tun:
- Bilder: Klicke jedes Bild an und schreibe den SEO TITLE und die DESCRIPTION in der jeweiligen Sprache, in der deine Seite ist. Schau mal, wie sich das bei mir bei der englischen und deutschen Version auf den beiden nachfolgenden Bildern verändert:


2. SEO Settings: Klicke die Seite an, die du bearbeiten willst. Gehe dann links auf PAGE (rot umrandet), klicke den Seitennamen an (blau umrandet), und gehe dann rechts auf SEO SETTINGS (gelb umrandet). Click on a page, then go to PAGE (red), click on the page title (blue), and the on SEO SETTING on the right (yellow):

Beim gelb umrandeten schreibst du deinen Page Title und die Meta Description in der Sprache rein, in der die jeweilige Seite ist. Und was genau ist ein “Page Title” und eine “Meta Description”??? Das ist das, was in der Google Suche angezeigt wird für die entsprechende Website Seite:

4. Schritt: Seitensprache einstellen
Unter den SEO SETTINGS im rechten Menü in Showit findest du die ADVANCED SETTINGS. Wähle hier die richtige Seitensprache für alle Seiten deiner Website:

5. Schritt: Rel = “Alternate” Hreflang Tags
Was zum…??!!!! Was bitte sollen rel = “alternate” hreflang tags sein? Noch nie davon gehört? Keine Sorgen, hatte ich auch nicht, bevor ich meine Website mehrsprachig gemacht habe. An sich ist es gar nicht so kompliziert, wie es klingt. Was du über rel = “alternate” hreflang tags (oder kurz: hreflang tags) wissen musst, ist:
- Dabei handelt es sich um ein Stückchen Code, das du in den Abschnitt für benutzerdefinierten HTML-Code auf jeder Seite in Showit einfügst.
- Dieses Stückchen Code erstellt im Grunde Links zwischen den Seiten (z. B. der englische und die deutschen Version deiner Home-Seite), so dass Google versteht, was die entsprechenden Seiten auf Ihrer Website sind und dass sie miteinander verbunden sind.
- Das Ziel ist es, sicherzustellen, dass die richtige Person die richtige Seite deiner Website in der richtigen Sprache sieht.
Deshalb braucht jede einzelne Seite deiner Website ein hreflang tag, und zwar ganz oben in deinem Custom Head HTML. Wie du das machst, zeige ich dir jetzt.
6. Schritt: Implementieren von Hreflang Tags auf deiner Website
Wir starten mit dem ERSTELLEN der hreflang tags. Erstelle die richtigen tags für JEDE einzelne Seite deiner Website (z.B. deine Home-Seite, deine Über mich-Seite, deine Kontakt-Seite, etc.). Um das zu machen, kannst du zum Beispiel diesen hreflang tag Generator benutzen.
Du startest wahrscheinlich mit der Home-Seite, weil sie meist die erste Seite einer Website ist. Kopiere die URL dieser Seite. Von meiner alten Version meiner Website war der Name der englischen Home-Seite “en: Home”, daher lautete die URL dafür “https://maca-webdesign.com/en-home”. Kopiere deine URL im Generator ganz oben hinein und wähle die Sprache und das Land aus (auf dem nachfolgenden Bild in blau umkreist). Für manche Länder ist das eindeutiger, für andere nicht so. Ich hab einfach mal United Kingdom genommen, weil ich dachte, dass das am nächsten zu Deutschland liegt.
Kopiere alle URLs deiner Home-Seite in allen deinen Sprachen und füge sie so ein, wie du das auf dem Bild sehen kannst:

Lass dir dann die hreflang tags generieren. Am Ende wirst du sowas ähnliches rausbekommen, je nachdem wie viele Sprachen deine Website hat. Meine hat 3, also habe ich 3 hreflang tags rausbekommen:

Kopiere ALLE hreflang tags gleichzeitig und füge sie in Showit bei ALLEN deinen Home-Seiten ein – der deutschen Home-Seite, der englischen Home-Seite, der spanischen Home-Seite, etc. bei CUSTOM HEAD HTML im rechten Menü ein:

Stell sicher, dass du die hreflang tags nicht aus Versehen auf der Kontakt-Seite oder einer anderen falschen Seite einfügst, sondern auf der Seite, für die du die tags erstellt hast.
Wenn du damit fertig bist, gehst du auf die nächste Seite deiner Website, kopierst die URL, fügst sie im Generator ein und lässt dir für diese Seite die hreflang tags erstellen und verfährst genau wie bei der Home-Seite.
Und mehr musst du nicht machen, damit deine Website mehrsprachig und SEO-freundlich ist 🙂