Mehrsprachige Inhalte

Last updated:

Jedes Unternehmen, das regional oder mit einer Kundenbasis, die mehrere Sprachen spricht, Geschäfte tätigt, muss in der Lage sein, mit seiner Zielgruppe in dessen Sprache in Kontakt zu treten. Mit dem CMS von HubSpot können Benutzer mehrsprachige Varianten ihrer Inhalte erstellen, die es dem Endbenutzer ermöglichen, die Inhalte in der Sprache anzuzeigen, die sie am besten beherrschen.

HubSpot legt eine Anzahl von Aspekten einer mehrsprachigen Website automatisch für Sie fest. Entwickler sollten jedoch ebenfalls durch eine Reihe von Schritten sicherstellen, dass ihre Website mehrsprachig ist. 

Standardmäßige Funktionen von HubSpot für Mehrsprachigkeit

Wenn eine mehrsprachige Variante für eine Seite in HubSpot erstellt wird, wird automatisch Folgendes durchgeführt: 

  • Es wird ein neuer Eintrag in der XML-Sitemap mit dem Namen und der URL der übersetzten Seite erstellt.
  • Es wird die Sprache des Inhalts im Seiten-<head> für Vorlagen angegeben, die mit Drag-&-Drop-Funktionen erstellt wurden.
  • Es werden andere Seiten innerhalb der mehrsprachigen Inhaltsgruppe gemäß dem entsprechenden standardisierten Format identifiziert, das die anderen Seiten als Alternativen markiert, um doppelte Inhaltsfehler zu vermeiden, und es wird außerdem der ISO 639-1-Code identifiziert, der mit der/den Sprachübersetzung/en verknüpft ist:

    <link rel="alternate" hreflang="lang_code" href="url_of_page" />

  • Schreiben Sie Links auf Sprachseiten neu, um zu intrasprachlichen Versionen der verlinkten Seite zu gelangen, damit die Besucher in der Sprache bleiben und Sie nicht jeden einzelnen Link bei jeder Seitenübersetzung aktualisieren müssen. Für ein bestimmtes Element können Sie dieses Neuschreiben deaktivieren, indem Sie dem Element die Klasse „hs-skip-lang-url-rewrite“ hinzufügen. 

Was HubSpot nicht tut

Mit CMS Hub erledigt HubSpot Folgendes nicht automatisch:

  • den Inhalt der Seite für Sie übersetzen.
  • Benutzer basierend auf ihrem GeoIP zu einer mehrsprachigen Variante weiterleiten.
  • ein Sprachumschaltmodul in Ihrem Header oder auf Ihrer Website berücksichtigen.
  • die Sprache einer Seite für Code-Dateien angeben.
  • das Inhaltsrichtungsattribut für Übersetzungen mit einer Sprache festlegen, die von rechts nach links liest, im Gegensatz zu von links nach rechts für Code-Dateien.

Sprachvariablen festlegen

Da Code-Dateien nicht automatisch Sprachdeklarationen oder Sprachrichtungsattribute für Inhalte enthalten, muss dies für Code-Vorlagen manuell eingerichtet werden. Sprachvariablen können in HTML festgelegt oder über HubL ausgefüllt werden, wie in der CMS Boilerplate-Vorlage. 

Wenn Sie diese Eigenschaften mithilfe von HubL festlegen, können diese Daten dynamisch im HTML-Format einer Seite basierend auf der Sprache, die für die Seite in CMS Hub festgelegt ist, angezeigt werden.

<html lang="{{ html_lang }}" {{ html_lang_dir }}>

Seitenbearbeitbare Module verwenden

Um sicherzustellen, dass Inhalte in jeder Instanz der Verwendung einer Vorlage lokalisiert werden können, verwenden Sie nach Möglichkeit benutzerdefinierte Module anstelle von fest kodierten HTML-Inhalten. Das Erstellen von Modulen, die auf Seitenebene bearbeitet werden können, ermöglicht es Content-Autoren, den spezifischen Inhalt festzulegen, der auf jeder Seite angezeigt werden soll, ohne den Vorlagencode anpassen zu müssen. Außerdem können so individuelle Inhalte auf Seiten verwendet werden, die eine Vorlage teilen. 

Feldübersetzungen in benutzerdefinierten Modulen und Designs berücksichtigen

Um Ihr globales Team zu unterstützen, können Sie Übersetzungen von Modulen veröffentlichen, die Sie in HubSpot erstellt haben.

Nachdem Sie den Content des Moduls übersetzt und in den Sprachen Ihrer Teammitglieder veröffentlicht haben, sehen Benutzer die Feldbezeichnungen für dieses Modul in ihrer Account-Standardsprache. Der Inhalt in einem übersetzten Modul wird nicht automatisch übersetzt. Dies muss von Ihnen durchgeführt werden. Sie können Übersetzungen Ihres Moduls in jeder unterstützten Sprache erstellen.  

Sie können Übersetzungen mithilfe der Tools für lokale Entwicklung oder über den Design-Manager festlegen.

Lokale Entwicklung

Um Übersetzungen mithilfe von Tools für lokale Entwicklung festzulegen, kann jeder Modulordner und jeder Designordner einen _locales-Ordner mit Unterordnern für Sprachgebietsschemata enthalten, die jeweils eine messages.json-Datei mit Modulfeldübersetzungen enthalten.

Screenshot für die lokale Bearbeitung von Modulübersetzungen in VS-Code

Design-Manager

Um Feldübersetzungen über den Design-Manager festzulegen, gehen Sie beim Anzeigen des Moduls zur Option „Übersetzungen hinzufügen“ auf der rechten Seite des Bildschirms. Wählen Sie im Dropdown-Menü die Sprachen aus, in denen Ihr Team arbeitet. Von dort aus können Sie jede Sprache auswählen und die Bezeichnungskonventionen für jedes Feld in jeder Sprache angeben.

Screenshot von Feldübersetzungen im Design-Manager

Designfeldübersetzungen haben keine Schnittstelle im Design-Manager und müssen über die .json-Dateien bearbeitet werden.

Systemseiten übersetzen

Um Übersetzungen für Systemseiten festzulegen, einschließlich Seiten zum Zurücksetzen des Passworts und für E-Mail-Abo-Einstellungen, können Sie Modul- und HubL-Tag-Felder mit Ihrem übersetzten Inhalt anpassen. Erfahren Sie mehr über die verfügbaren Felder für Module und HubL-Tags für Systemseiten.

Einen Sprachumschalter berücksichtigen

Damit Endbenutzer zwischen verfügbaren Übersetzungen wechseln können, sollte Ihrer Website ein Sprachumschaltmodul hinzugefügt werden. 

Ein Beispiel für die Implementierung eines Sprachumschalters finden Sie in der CMS Hub Boilerplate. 

{# Header navigation row one #} <div class="header__row-1"> {% if content.translated_content.values()|selectattr('published')|length || is_listing_view && group.translations %} <div class="header__language-switcher header--element"> <div class="header__language-switcher--label"> {% module 'language-switcher' path='@hubspot/language_switcher', label='Language switcher', display_mode='localized' %} <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div> </div> </div> {% endif %} <div class="header__search header--element"> {% module 'site_search' path='@hubspot/search_input', label='Search', field_label='Search', placeholder='' %} </div> </div> {# End header navigation row one #}

Implementieren einer Suchfunktion auf mehrsprachigen Websites

Die Inhaltssuche unterstützt die Abfrage von Inhalten in den verschiedenen Sprachen auf Ihrer Website. Der Sprachfilter-Parameter kann beim Aufruf von /contentsearch/v2/search verwendet werden, um nur bestimmte Sprachen zurückzugeben. So können Sie Suchfunktionen für jede Sprache auf Ihrer Website erstellen oder Besucher über mehrere Sprachen auf Ihrer Website suchen lassen. 

Globale Teilvorlagen und Module verwenden

Verwenden Sie Modulfelder, damit Text in Headern, Footern und Seitenleisten bearbeitet werden kann. Platzieren Sie diese Module in globale Teilvorlagen. Content-Autoren profitieren nicht nur von der einfachen Bearbeitung, globale Teilvorlagen unterstützen außerdemdas Konfigurieren ihrer Einstellungen für die einzelnen Sprachen. 
Screenshot des Seiten-Editors mit teilweiser Darstellung des Headers
War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.