Skip to Content

Using Google Translate with your Content

It’s important to ensure your content is as widely available as possible including providing translations that serve the needs of your audience.

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.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.