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.

ABSCHNITT

Basiswissen

Mehrere Sprachen einrichten

Sprache auf der Website einstellbar machen

URLs und "hreflang"


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. Solte 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 bespielsweise 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.

Öffne hierzu den Code Editor bewege deine Maus über "<> Code" in der oberen rechten Ecke der Menüleiste und klicke auf "HTML" oder nutze die Tastenkombination [Strg] + [Alt] + [H] um direkt dorthin zu gelangen. Auf der rechten Seite öffnet sich der Code Editor mit dem {{content}} Platzhalter. Wie in unserem Artikel zu benutzerdefiniertem Code erklärt, steht dieser Platzhalter für alle Elemente, die du im Website Builder bereits auf deiner Website eingefügt hast.

Füge darunter einen neuen Platzhalter ein: {{language}}.

Dadurch wird nach dem Speichern zwar im Website Builder kein zusätzliches Element angezeigt, Sitejet erstellt jedoch im HTML Code für dich ein HTML-Element, dass deinen Wünschen entsprechend mit Hilfe von HTML und CSS gestaltet werden kann. 

Der von Sitejet erstellte HTML-Code aufgrund von {{language}} sieht folgendermaßen aus:

<div id="lang">
   <a href="/language/change/lang/de" 
      id="lang_de" 
      style="background-image: url(/images/webcard/flags/de.png);" 
      title="Deutsch"
   >
      Deutsch
   </a>
   <a href="/language/change/lang/en" 
      id="lang_en" 
      style="background-image: url(/images/webcard/flags/en.png);" 
      title="Englisch"
   >
      Englisch
   </a>
   <div id="label">Sprache:&nbsp;</div>
</div>

Mit Hilfe von CSS kann aus diesem <div>-Tag und den Links ein Sprachenmenü wie dieses erstellt werden:

Um diesen Effekt zu erzielen ist folgender Code im "(S)CSS" Reiter des Code Editors einzutragen.

#lang {
	position: fixed;
	left: 0;
	top: 50%;

	a {
		background-image: url(/images/webcard/flags/de.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 30px;
		height: 30px;
		font-size: 0;
		display: block;
	}
	
	#label {
	    display: none;
	}
}

Damit geben wir vor, dass das Menü immer ("position: fixed;") an der linken Seite ("left: 0;" mittig des Bildschirms ("top: 50%;") angezeigt werden soll. Das Label soll nicht eingeblendet werden, deshalb wurde es mit "display; none;" ausgeblendet. Den Flaggen selbst haben wir eine bestimmte Größe ("width: 30px;" und "height: 30px") zugewiesen

Selbstverständlich kannst du diese Vorgaben deinen Wünschen entsprechend anpassen. Wie wäre es zum Beispiel mit einem Sprachmenü im Footer? Der {{language}}-Platzhalter kann auch in Sitejets HTML-Elementen verwendet werden. Füge ein HTML-Element im Website Builder dem Footer hinzu und trage dann dort den Platzhalter ein, um das Sprachmenü im Footer anzuzeigen. Nutzt du nun noch Referenzen für deinen Footer auf den anderen Seiten, so werden diese automatisch aktualisiert, wenn du das Original anpasst.


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.

Zurück zum Anfang

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen