Using Google Translate with your Content

In today’s connected digital age, it’s important to ensure your content is as widely available as possible. Part of this requires making your site’s content available for language translation. By including a translation service, you have effectively expanded your site’s audience and reach.

Translated content is also key in general accessibility terms. If your website serves specific communities where a host of languages are spoken, then it is vital you provide translated content to meet their communication needs.

Rather than having to manually translate your website content, there’s a number of services that perform the task automatically. Certainly one of the most efficient tools is Google’s Website Translator. Not only is the service robust and accurate, but it allows for customization to fit the design of your website.

In this tutorial, Solodev will show how to customize the default Google Website Translator toolbar so that it displays a stylish dropdown with flags as a language reference.

Below is the HTML, CSS, and JavaScript required.

Step 1 - google-translate.html

Copy and paste the HTML below into your web page

Step 2 - google-translate.css

Download the CSS below and include it in your web page

Step 3 - Add the includes below to your web page

Step 4 - Include the following Google Translate scripts

Note: It's essential that the above scripts are loaded directly on the page and not through external includes. Otherwise, the translation service will not properly initialize.

With the above code, you will now have a translation dropdown strategically placed above your navigation. Find specific languages that fit the needs of your audience and include them with your other customizations.

In this article, Solodev showed you how to add content translation to your website via Google's Website Translator.