In today's global marketplace, multilingual content is key to expanding your company's international presence. The problem is that translating content into target languages is not enough. Localization also involves making various adaptations to ensure that local audiences fully understand and engage with your messages as intended. Thus, what you need is a solution that can support you throughout the entire localization process.
This article will explore why Apostrophe is a top choice for managing multilingual content. We will see its robust localization features as a CMS and website builder, understanding how they help you create and maintain localized sites.
What Is Content Localization?
Content localization is the process of adapting digital content to meet a specific target audience's cultural, linguistic, and contextual preferences. Localization usually starts with content translation, as you must ensure that your mission is clear and understandable in the audience's native language.
Localizing a site is usually not limited to text translation alone. Instead, it often also requires changes in images, layouts, and other elements to resonate better with users from different regions.
Localizing an entire site can be a highly time consuming task. To streamline the process, editors should ideally localize content directly within the CMS. A multilingual content management system opens the door to efficient content adaptation, supporting a smoother workflow and maintaining consistency across all localized versions.
Why is Content Localization so important?
Expanded Market Reach for Global Growth – Localization is a strategic investment that unlocks access to new markets, significantly expanding your potential customer base. By tailoring content to meet the expectations of different audiences, you can enter previously untapped regions with ease. That means higher growth opportunities, more revenue streams, and an enhanced competitive edge in global markets.
Enhanced Customer Experience – Localization goes beyond translation and its end goal is to provide a user experience that feels natural. After all, users are far more likely to engage with a product or service that speaks directly to their cultural norms, language, and preferences. This leads to improved customer experience, which is crucial in boosting customer satisfaction and loyalty.
Improved Brand Reputation – Content localization helps businesses build credibility and trust by demonstrating respect for local cultures and languages. Investing in localization shows a commitment to understanding and serving your customers' unique needs. That consequently improves the brand's standing across different regions, creating a consistent and positive image worldwide.
Apostrophe's multilingual features
Apostrophe is an open-source CMS and website builder developed with modern technologies such as Vue and Node.js. As part of its wide range of features, it offers native support for multilingual content management to meet all localization needs.
It's time to explore the features that a multilingual CMS like Apostrophe has to offer when it comes to localization!
Note: The site shown in the examples below comes from our tutorial on how to create an e-commerce platform with Apostrophe.
Core Localization Workflow
In Apostrophe, the process of localization involves adapting the site's user interface and content to different locales. This task usually includes translating text, changing date formats, varying content to adapt it to the target culture, and more.
The first step in localizing a site in Apostrophe is to specify the locales where you want your site to be available. Developers can configure locales through the built-in @apostrophecms/i18n module as explained in the documentation.
In Apostrophe, each locale has an identifier, typically a string containing a two-letter country code, a language code, or a combination of both, separated by a dash. For example:
- en identifies general English speakers
- es identify general Spanish speakers
- fr-CA identifies Canadian French speakers
- es-MX identifies Mexican Spanish speakers
and so on…
Each locale also has a label, which editors will see in the admin UI when selecting it (e.g., for en, it could be "English"). Additionally, locales are associated with a specific URL domain (e.g., es.my-ecommerce.com), URL path prefixes (e.g., my-ecommerce.com/es), or a combination. Based on the URL entered in the browser's address bar, Apostrophe will automatically redirect users to the appropriate localized version of the current page.
Every Apostrophe website also has a default locale, used when the URL does not match any localized pages. Apostrophe will use en as the default locale if your site is monolingual and no locales are configured. Note that you can set the default locale to any other language.
After configuring a locale in Apostrophe, the next step is to proceed with content localization. Apostrophe supports two types of localization features:
- Static content localization: Localizing text and other information hard-coded into the site's UI and components. Developers mostly do this with the assistance of translators.
- Dynamic content localization: Translating content created through the admin UI, such as pieces and pages. Content editors and translators generally handle this.
We will jump into these two localization options later in the article. For more information, explore the localization hub in the official documentation.
Now, suppose you just configured the en ("English"), es ("Spanish"), and fr ("French") locales in your Apostrophe e-commerce site. The following menu will appear in the top-right corner of the admin UI:
This multilingual content management switch allows editors to select which locale they want to work on.
Also, pages will now have a new localization option:
The same applies to content pieces:
Admin UI Static Content Localization
As of this writing, Apostrophe provides built-in translations for the admin UI in the following locales:
- de: German
- en: English
- es: Spanish
- fr: French
- it: Italian
- pt-BR: Brazilian Portuguese
- sk: Slovak
In other words, if you configure one of the above locales and the editor selects it, the admin UI will display translated elements accordingly:
Note how the top-left menu options and all other admin UI strings went from English to Spanish:
ApostropheCMS Admin UI menus change with locale
In this example, the page content was previously translated into Spanish by the editors.
The language change switch is not magic, and it is possible because the Apostrophe admin UI template files and components contain keys for localized strings instead of the actual hard-coded strings. For a better understanding of how this mechanism works, take a look at the following code snippet:
In this case, the title is __t('RELATED_ARTICLES') instead of the hard-coded string "Related articles" you might expect. In particular, RELATED_ARTICLES is a key to a string that developers can localize into any language.
This approach to content localization is a best practice that is well-known in the IT community. For each locale, there are static files specifying the associations between those keys and their respective translations:
The above file for the es locale defines that the RELATED_ARTICLES key should be shown as "Artículos relacionados" in Spanish. Similarly, that key will be associated with the string "Related articles" in English and "Articles connexes" in French.
Thanks to Apostrophe's rich extensibility capabilities, developers can easily customize any of these static translation files to integrate, override, or adjust the translation strings.
Note that these static files can be either translated by translators or fed into automated translation services:
Dynamic Localization of Pages and Pieces
Localization involves not just the UI of a site but also its content. As previously shown, Apostrophe provides special localization options in the admin UI once you configure a new locale. That means Apostrophe allows you to manage content localization entirely through the visual interface. No programming skills or lines of code are required!
Now, let's see how the localization process works. First, navigate to the page or piece you want to localize. In this example, we will demonstrate how to localize a page, but the same procedure also applies to content pieces.
To localize a page or piece, go to the dedicated page or piece management section, click the "⋮" button, and select the "Localize…" option:
Equivalently, for pages, you can navigate to the page you want to localize, press the "⋮" button in the top right corner, and choose the "Localize…" option:
Either way, a localization wizard modal will show up. This will guide you through the process of localizing a document in Apostrophe, which involves three steps:
- Select the content to localize:
The options you have are:
- This document: To localize only the current document.
- This document and related documents: To localize the current document along with all its related documents. Related documents include images, other associated documents, content linked through relationships, and more.
- Related documents only: To localize only the documents associated with the current document.
Typically, you want to localize a document together with all its dependencies. Here is why "This document and related documents" is the default option. Press "Next →" to proceed to the second step.
2. Select the locales to translate the content into:
Here, you can choose all the locales you want your document to be translated into. For example, suppose you are interested in translating the page and its related documents into French. Select the "French" locale, and press "Next →" to move on to the next phase.
3. Customize the localization settings:
At this step, you can choose whether to translate new related documents or overwrite existing translated ones. When opting for the second option, you will have to manually select the specific documents to override:
Once you are done, click "Localize Content" to complete the localization process. Apostrophe will create a clone of the selected content for the new locale and notify you with a confirmation message:
If you switch to the French locale, you will now see a copy of the page you wanted to localize:
As expected, the admin UI has switched from English to French, but the page content remains in English. The reason is that the localized version of the document is nothing more than a copy of the original page, which is in English.
To translate the localized copy into French, editors can update the document using Apostrophe's in-context editing mode for pages or through the edit modal:
During the localization process, editors may need to adjust certain parts of the content, such as the hero section, structure, or images, to better suit the target audience.
As of Apostrophe 4.6.0, you can also select the locale they want to work on directly within the edit modal via an inline switcher:
Automatic Content Localization with AI-Powered Translations
Content translation is generally the most time-consuming task in site localization, often taking weeks to complete. To speed up this process, Apostrophe offers the Automatic Translation extension.
That extension—available in the Pro and Assembly tiers—significantly accelerates localization by automating content translation, demanding it to AI.
After setting up the Automatic Translation extension, a special option in the content localization wizard modal will appear:
While AI-generated translations may require further refinement and—as we stressed a few times in the article—localization goes beyond mere translation, automatic translations dramatically reduces the time required to localize a site in Apostrophe.
Below is an example of automatic translation in action, showing the e-commerce home page localized into Spanish:
Impressive, isn't it? See Automatic Translation in action, our dedicated guide to expanding content reach using AI for translation!
Complete Import/Export Text Translation
Manually translating each content piece and page through the Apostrophe admin UI can be time-consuming, even with the Automatic Translation extension.
The Apostrophe Pro and Assembly tiers provide the Import Export Translation extension to speed up the process. The nodule enables editors to generate a single JSON file that includes all the translatable documents on your site. That file can be downloaded, manually translated into a different language, and then imported back to populate a new locale.
After installing and configuring the plugin as explained in the official docs, Import Export Translation will add a new button to the admin bar:
To generate the JSON locale file click the new "Import/Export Translation" button. A modal window will open, providing options to import or export the locale file:
Select the "Export Translation" option. A new modal window will appear:
This contains two options:
- All documents: To export all documents in the CMS.
- Only modified since the last export documents: To export only the documents that have been created or modified since the previous export.
Note that you can see the last export date in the modal:
Select the option that best fits your needs and click "Export Translation" to download the JSON file. Explore the structure of this file in the documentation.
Again, you can either manually translate the locale file into the desired locale or use an AI-based automatic translation service.
To import a JSON locale file, first switch to the desired locale using the language selection dropdown. Next, click the "Import/Export Translation" button and select the "Import Translation" option:
Upload the previously exported JSON file with the translated text for the desired locale, and press the "Import Translation" button to import it.
The Import Export Translation extension will create or update existing documents in the target locale using the published documents from the default locale. This significantly speeds up the document translation process.
A quick example workflow supported by the extension is:
- Define the new it locale.
- Generate the JSON translation file from the en locale.
- Translate the string values in the file to Italian.
- Import the translated text into the it locale.
As you can see, you can localize your site to a new locale in just a few steps, thanks to Import Export Translation.
Apostrophe: The Best CMS for Localization
Given all the powerful localization features it offers, it is now evident why Apostrophe is considered one of the best multilingual content management systems on the market. Whether you are a business aiming to reach international audiences, an internal enterprise managing multilingual content, or a web agency building sites for global clients, Apostrophe stands out as the ideal solution for creating multilingual, localized websites.
The CMS's effectiveness in content localization is demonstrated by real-world success stories. For example, Michelin utilizes Apostrophe to manage dozens of languages across over 50 country-specific sites.
As highlighted in our case study, Apostrophe met Michelin's requirement to effectively manage over 200 websites in various languages. This story clearly proves how Apostrophe is able to handle complex localization needs.
To discover other success stories where Apostrophe's rich features made a difference, check out our additional case studies!
Conclusion
In this article, we explored why localization is essential for companies aiming to connect with local audiences around the globe. The most effective approach to localization is to handle it directly within the CMS. That is why Apostrophe comes with native features for content localization, even in its open-source, free version.
Those features enable your team to efficiently and effectively build and manage localized versions of a site. Overall, Apostrophe stands out as one of the best CMSs for localization, which is why an organization like Michelin chose it to manage its wide range of locale-specific sites.
Localization in Apostrophe becomes even faster with the Automatic Translation extension, available in the Pro and Assembly tiers. This is just one of the several top-notch features offered by Apostrophe's premium versions. For more details, visit our pricing page!