Mehrsprachige Webseiten mit LEPTON CMS erstellen

Sehr viele Webseiten sprechen ein internationales Publikum an. Die Inhalte werden deshalb in mehreren Sprachen angeboten, der Besucher kann jederzeit zwischen den verschiedenen Sprachen wechseln.

Dieser Tipp zeigt Ihnen wie Sie eine mehrsprachige Website mit LEPTON CMS anlegen und pflegen. Hierbei wird ein synchrones Umschalten zwischen den verschiedenen Sprachen ermöglicht - das heißt ein Besucher, der sich z.B. auf der deutschsprachigen Seite Produkte befindet wird bei einem Wechsel der Sprache auf Englisch automatisch auf die englischsprachige Seite Products geführt.

Bei der technischen Umsetzung werden die Google Richtlinien für mehrsprachige Webseiten sowie für alternative Inhalte berücksichtigt und so die Voraussetzungen für ein erfolgreiches Ranking geschaffen.

Mehrsprachige Webseiten erfordern eine bestimmte Seitenstruktur:

• auf der obersten Ebene befinden sich Seiten vom Typ Menu Link
• die URL dieser Seiten kennzeichnet die Sprache der untergeordneten Inhalte
• die Inhaltsseiten müssen über die Seiteneigenschaften der richtigen Sprache zugeordnet werden.

Um eine Website für die Sprachen Deutsch und Englisch anzulegen beginnen Sie mit einem leeren Seitenbaum, dies bedeutet LEPTON CMS enthält noch keine Seiten.

• Legen Sie eine neue Seite an,
• tragen Sie für den Seitentitel bitte DE als internationale Abkürzung für Deutschland ein (ISO 639-1),
• tragen Sie als Seitenart bitte Menu Link ein,
• klicken Sie auf Hinzufügen,
• verlassen Sie den folgenden Dialog Seite ändern direkt wieder über Abbrechen (im Moment existiert noch keine Seite auf die wir verlinken können).
• Wiederholen Sie den Vorgang und legen Sie einen Menü Link für die englischsprachige Seite mit dem Seitentitel EN an.

Als nächstes klicken Sie im Seitenbaum auf die Optionen für den DE Menu Link.

• Ändern Sie den Seitentitel zu Deutsch,
• kontrollieren Sie ob als URL de eingetragen ist,
• stellen Sie sicher, dass als Sprache Deutsch eingetragen ist.
• Speichern Sie die Optionen.
• Wiederholen Sie den Vorgang für den Menu Link EN (Seitentitel English, URL en und Sprache English).

Sie können jetzt die ersten Inhaltsseiten anlegen.

• Fügen Sie eine neue Seite hinzu,
• wählen Sie als Seitentitel Herzlich Willkommen!,
• als Art bestimmen Sie WYSIWYG,
• legen Sie als Übergeordnete Datei DE fest.
• Klicken Sie auf Hinzufügen,
• Fügen Sie der Seite einen kurzen Text hinzu,
• klicken Sie auf Speichern und
• wechseln Sie wieder in den Seitenbaum.
• Wiederholen Sie den Vorgang und legen Sie eine englischsprachige A cordial welcome! Seite an (die übergeordnete Seite ist EN).

Wir müssen jetzt die Menu Links für die deutsch- und englischsprachigen Seiten noch mit den jeweiligen Inhaltsseiten verbinden.

• Klicken Sie auf den Menü Link DE,
• wählen Sie unter Link bitte DE / Herzlich Willkommen! aus,
• speichern Sie die Seite und wechseln Sie wieder in den Seitenbaum.
• Wiederholen Sie den Vorgang analog für den englischprachigen Menu Link EN.

Weitere Inhaltsseiten können Sie jetzt beliebig hinzufügen. Achten Sie hierbei darauf, dass Sie als übergeordnete Seite die korrekte Sprache auswählen und dass in den Seitenoptionen die Sprache korrekt festgelegt ist (LEPTON CMS trägt automatisch die Sprache der übergeordneten Seite ein).

Wenn Sie identische Inhalte in unterschiedlichen Sprachen zur Verfügung stellen werden diese als alternative Inhalte bezeichnet. Werden die alternativen Inhalte korrekt gekennzeichnet kann Google in den Suchergebnissen die sprachlich passende Seite als Treffer anzeigen. 

Ein Beispiel: Sie bieten das Produkt "Will ich!" an. Die Produktbeschreibung ist sowohl in Deutsch als auch in Englisch verfügbar. Sucht jemand in Österreich nach "Will ich!" wird ihm in den Suchergebnissen die deutsche Produktbeschreibung angezeigt. Google wird stets versuchen in den Suchergebnissen Treffer in der richtigen oder in der naheliegenden Sprache anzubieten.

Eine korrekte Kennzeichnung und Verlinkung von alternativen Inhalten stellt Ihnen das Script language-menu für die Sprachumschaltung zur Verfügung.

Damit das Script alternative Inhalte erkennen kann, weisen Sie diesen eine identische URL in den Seitenoptionen zu.

Um die Seiten Herzlich Willkommen! und A cordial welcome! als alternative Inhalte festzulegen gehen Sie wie folgt vor:

• Öffnen Sie die Seitenoptionen der Seite Herzlich Willkommen!,
• legen Sie als URL welcome fest,
• speichern Sie die Seitenoptionen und wechseln Sie zurück in den Seitenbaum.
• Öffnen Sie die Seitenoptionen der Seite A cordial welcome!,
• legen Sie als URL  welcome  fest,
• speichern Sie die Seitenoptionen.

Kommt irgendwann eine weitere Sprache hinzu weisen Sie der Willkommen-Seite ebenfalls die URL welcome zu.

Verfahren Sie bei allen Seiten so, die über identische Inhalte in unterschiedlichen Sprachen verfügen.

Sie sind im übrigen völlig frei in der Gestaltung der Seitenstruktur unterhalb der Sprachkennzeichnung - die Inhalte der deutschen Seiten können ganz oder teilweise von denen der englischsprachigen Seiten abweichen, Sie sind nicht gezwungen für jede deutschsprachige Seite ein englischsprachiges Pendant zur Verfügung zu stellen.

Jetzt fehlt noch die Möglichkeit auf Ihrer Website zwischen den verschiedenen Sprachen zu wechseln.

Laden Sie sich das Script language-menu herunter, entpacken Sie es und kopieren Sie die Datei language-menu.php in Verzeichnis in dem sich die index.php Ihres Template befindet.

Binden Sie das Script an der gewünschten Stelle in Ihrem Template mit dem Befehl

<div class="language-menu">
  <?php include('language-menu.php'); ?>
</div>

ein.

Das language-menu blendet automatisch ein Menu für die Sprachumschaltung ein.

Damit das Menu ein wenig hübscher aussieht ergänzen Sie die frontend.css ihres Templates mit:

.language-item {
  margin: 0;
  padding: 0 7px 0 7px;
  background-color: transparent;
  background-image: url(images/divider-vertical.png);
  background-position: top left;
  background-repeat: no-repeat;
}
.language-item a {
  text-decoration: none;
}
.language-item a:link,
.language-item a:visited {
  color: #d22f25;
  background-color: transparent;
}
.language-item a:hover,
.language-item a:active {
  color: #666;
  background-color: transparent;
}
.language-item.active {
  color: #666;
  background-color: transparent;
}
.language-item.first {
  padding: 0 7px 0 0;
  background-image: none;
}
.language-item.last {
  padding: 0 0 0 7px;
}

In der Praxis sieht das language-menu dann so aus:

Wenn ein alternativer Inhalt zu der angezeigten Seite existiert, führt der Link bei der Umschaltung auf eine andere Sprache auf die korrespondierende Seite, ansonsten wird auf die Startseite der jeweiligen Sprache verlinkt.

Beispielhafter HTML Code der durch das Script erzeugt wird:

<div class="language-menu-container">
  <span class="language-item active first">Deutsch</span>
  <span class="language-item last">
    <a rel="alternate" hreflang="en" href="http://emaform.ch/polyurethan/en/info/portrait.php">English</a>
  </span>
</div>

Das Script ist dokumentiert, Anpassungen der Ausgabe, z.B. die Anzeige des Menu Titel statt dem Seitentitel oder die Anzeige einer Flagge statt der Sprache sind kein Problem und können rasch vorgenommen werden.

Um eine Flagge anstelle des Seitentitel anzuzeigen ersetzen Sie in der language-menu.php bitte:

if (empty($alternate)) {
  $language_menu .= $lang['page_title'].'';
}
else {
  $language_menu .= sprintf('<a %shref="%s">%s', $alternate, $link, $lang['page_title']);
}

durch:

$flag_url = WB_URL.'/templates/algos/images/flags/'.strtolower($lang['language']).'.png';
if (empty($alternate)) {
  $language_menu .= sprintf('<img src="%s" width="16" height="11" alt="%s" title="%s" />', 
    $flag_url, $lang['page_title'], $lang['page_title']); 
}
else {
  $language_menu .= sprintf('<a %shref="%s"><img src="%s" alt="%s" title="%s" height="11" width="16" />', $alternate, $link, $flag_url, $lang['page_title'], $lang['page_title']);
}

Diese Dokumentation ist sicher noch nicht vollständig, ich freue mich über Anmerkungen und Ergänzungen.

Ralf Hertsch, 14.01.2012