Sprachen hinzufügen

Mit Sitejet kannst du nicht nur anspruchsvolle, sondern auch mehrsprachige Websites erstellen. Dabei kannst du die einzelnen Seiten einfach übernehmen, deren Texte übersetzen oder die gesamte Seite neu gestalten. Wie das funktioniert, zeigen wir dir in diesem Artikel.

INHALTSANGABE


Basiswissen

Websites, die du mit Sitejet mehrsprachig erstellst, erkennen die im Browser hinterlegte Sprache des Website-Besuchers und zeigen ihm automatisch die richtige Sprache an, sofern diese hinterlegt ist. Sollte die im Browser hinterlegte Sprache nicht innerhalb deines Projekts vertreten sein, wird die als Standard festgelegte Sprache aufgerufen. Aufgrund der Gebräuchlichkeit bietet es sich deshalb an, immer auch eine englische Version anzubieten, sofern du dich für Mehrsprachigkeit entscheidest. Dadurch ist die Wahrscheinlichkeit am größten, dass dein Besucher zumindest den Großteil der Website versteht, selbst, wenn seine Muttersprache nicht angeboten wird.

Nehmen wir an, dein Kunde möchte beispielsweise eine deutsche Website inkl. einer englischen Version haben, da er auch mit Website-Besuchern aus anderen Ländern rechnet. Da mehr Menschen Englisch als Deutsch sprechen, bietet es sich an in diesem Fall die englische Version als Standard einzustellen. 


Mehrere Sprachen einrichten

In diesem Beispiel wollen wir eine englische Variante zu einer deutschen Seite hinzufügen. Sprachen können wir in den Website-Einstellungen verwalten. Um dort die Mehrsprachigkeit zu aktivieren, gehe wie folgt vor:

  1. Bewege deine Maus über "Website" in der Menüleiste am oberen Rand des Website Builder (CMS)
  2. Klicke auf "Sprachen", um in die Sprachverwaltung zu gelangen
  3. Klicke in das Feld "Mehrsprachigkeit" und wähle "Mehrsprachigkeit aktivieren" aus

Nachdem du die Mehrsprachigkeit aktiviert hast, wird dir die aktuelle Standardsprache bereits aufgelistet. Diese lässt sich nicht entfernen oder ändern. Bewege deine Maus darüber, um am linken Rand ein "+"-Symbol eingeblendet zu bekommen. Per Klick hierauf fügst du eine weitere Sprache dem Projekt hinzu. 

Klicke in das leere Feld, um aus einer Liste von Sprachen auswählen zu können. Klicke in dieser auf "Englisch". Klicke anschließend auf das orangene Disketten-Symbol in der Menüleiste oben links im Website Builder (CMS) oder nutze die Tastenkombination [Strg] + [S], um das Projekt zu speichern. Anschließend wird auch "Englisch" ausgegraut und lässt sich nicht mehr ändern.

Sitejet hat nun im Hintergrund alle bisher erstellten Seiten dupliziert und die nötigen Sprach-Informationen entsprechend hinterlegt. Wechsle nun in die Seitenverwaltung der jeweiligen Sprache, indem du auf den Link-Button rechts neben der Sprache klickst. In diesem Fall wechseln wir in die Seitenverwaltung für die englischen Seiten und erhalten folgende Ansicht:

Im oberen Bereich der Ansicht hast du nun Tabs mit denen du zwischen den Sprachen hin und her wechseln kannst. Beim Namen findest du das ISO-Kürzel für die jeweilige Sprache, in diesem Fall "en" für Englisch. Nach dem Hinzufügen einer neuen Sprache ist erst einmal nur die Startseite freigeschaltet, da es immer eine Startseite geben muss. Die anderen Seiten wurden wie bereits angesprochen angelegt, da vermutlich jedoch noch Texte übersetzt werden müssen stehen diese nicht augenblicklich zur Verfügung und sind deshalb ausgegraut. Klicke auf "Seite übersetzen", um sie verfügbar und bearbeitbar zu schalten.

Auch hier gelangst du über den Link-Button rechts vom Namen auf die jeweilige Seite. Bewegst du deine Maus über eine der Seiten, kannst du diese unabhängig vom jeweiligen Pendant in der anderen Sprache auch entfernen oder zusätzliche Seiten speziell für diese Sprache hinzufügen. Die Seitenstruktur der anderen Sprache bleibt davon unberührt.

Auch die SEO-Einstellungen und Details kannst du wie in unserem SEO-Artikel und unserem Artikel zur Navigation beschrieben zu jeder Seite einer jeden Sprache gesondert eingeben.

Die jeweiligen Seiten werden nach Onlinestellung von nun an nicht mehr über www.deine-domain.de/Unterseite erreichbar sein, sondern über www.deine-domain.de/de/unterseite bzw. www.deine-domain.de/en/subpage

Beim Kopieren der Seiten werden allen Elementen neue IDs zugewiesen. Stelle deshalb sicher, dass alle Animationen auch auf den neuen Seiten der zusätzlichen Sprache wie gewünscht funktionieren. Bedenke, dass eine manuelle Übersetzung/Anpassung der Texte und Button-Beschreibungen erforderlich ist.


Sprache auf der Website einstellbar machen

Selbstverständlich kannst du normale Links auf deiner Website einfügen, um deine Website-Besucher zur anderen Sprache gelangen zu lassen. Eine visuell ansprechendere Variante sind jedoch beispielsweise Flaggen-Icons, da sie selbsterklärend sind und für gewöhnlich weniger Platz einnehmen, als Links. 

In diesem Abschnitt zeigen wir dir deshalb, wie du besonders einfach mit Hilfe von Flaggen die Website-Besucher hin und her wechseln lassen kannst, ohne, dass du auf jeder Seite manuell entsprechende Links oder Icons einfügen müsstest.

Füge zu aller erst einmal das Sprachelement deiner Seite hinzu. Darüber kann ein Website-Besucher die Sprache auswählen:

  1. Bewege deine Maus über "Inhalte hinzufügen"
  2. Klicke auf "Elemente"
  3. Ziehe das Element mit dem Namen "Sprachen" an die von dir gewünschte Stelle (Beispielsweise im Menü und/oder im Footer)

Du solltest bei einem Projekt mit Deutschen und Englischen Seiten nun folgendes sehen:

Anschließend kann mit Hilfe von CSS aus diesem Sprachelement ein Sprachmenü wie dieses erstellt werden:

Um diesen Effekt zu erzielen ist folgender Code im "(S)CSS" Reiter des Code-Editors einzutragen. Markiere ihn dazu einfach vollständig, kopiere ihn und füge ihn dann im Code-Editor ein.

a.language {
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px; // sorgt dafür, dass die Flagge 30px breit sein soll
  height: 30px; // sorgt dafür, dass die Flagge 30px hoch sein soll
  margin: 0px 5px; // sorgt dafür, dass links und rechts von der Flagge 5px Abstand eingefügt wird
  font-size: 0; // verhindert, dass der Text angezeigt wird
  display: block;
  float: right; // sorgt dafür, dass die Flaggen nebeneinander angezeigt werden, entferne diese Zeile, wenn die Flaggen übereinander angezeigt werden sollen
  &.language-de {
    background-image: url(/images/webcard/flags/de.png); // legt für die deutsche Sprache die deutsche Flagge fest
  }
  &.language-en {
    background-image: url(/images/webcard/flags/en.png); // legt für die englische Sprache die britische Flagge fest
  }
}

Mithilfe des oben gezeigten Codes wird der Text für die jeweilige Sprache durch ein Bild ersetzt. In diesem Beispiel werden die zwei Sprachen Deutsch (= "de") und Englisch (= "en") unterstützt. Solltest du weitere Sprachen anbieten wollen, füge für diese Sprachen weiteren Code wie den folgenden ein:

&.language-fr {        
  background-image: url(/images/webcard/flags/fr.png); // legt für die französische Sprache die französische Flagge fest    
}

Selbstverständlich kannst du diese Vorgaben deinen Wünschen entsprechend anpassen.


URLs und "hreflang"

Sitejet stellt automatisch "hreflang" tags für alle verfügbaren Sprachen der jeweils aktuell angezeigten Seite (z. B. www.sitejet.io/de/templates) wie folgt zur Verfügung:

<link rel="alternate" hreflang="de" href=" https://www.sitejet.io/de/templates"/>  
<link rel="alternate" hreflang="en" href=" https://www.sitejet.io/en/templates"/>

"Hreflang" wird außerdem vom Sprachen-Element verwendet, um Suchmaschinen mitzuteilen, welche Sprache über den jeweiligen Link aufgerufen wird. Alle anderen Links enthalten keine "hreflang" tags, da die Zielseiten jeweils in derselben Sprache sind.

Canonical URLs bzw. kanonische URLs werden bei dieser Thematik ebenfalls immer wieder angesprochen. Diese geben an, unter welcher URL die aktuell geöffnete Seite dauerhaft erreichbar sein soll, sofern sie über mehrere URLs erreichbar ist (beispielsweise aufgrund von URL-Parametern oder tatsächlich aufgrund von verschiedenen URLs die auf die gleiche Seite/den gleichen Inhalt zeigen). So werden Dopplungen bei Suchmaschinen vermieden, was diese wiederum wertschätzen. Mit Sprachen hat dies jedoch nichts zu tun.


Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und zeige deine Lieblingsseiten. Hole dir Ratschläge und sprich mit uns über mögliche Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt auf unsere Community. Wenn du Hilfe bei deinem Slack-Account benötigst, schreib uns eine E-Mail an help@sitejet.io .  

Zurück zum Anfang

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen