Using Google Translate with your Content

  Google


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

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

 google-translate.css

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.

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.