Improving SEO Rankings through Localization and Correct Use of Hreflang

Google needs a bit of help to detect your website’s localized language versions. To do this correctly, you need to be aware of the hreflang attribute and how to use it.

Let’s now assume that you have ordered professional translations from Get Localization for your site from English to Spanish. You define an alternative version of your site using the link tag and hreflang attribute like this in your English website:

<link rel="alternate" hreflang="es" href="http://es.example.com/" />

This means that your Spanish website will be found at http://es.example.com. But now, hold on! This is not the whole story, and some precautionary measures should be taken to do this correctly.

First and foremost, make sure that Google Search Console is tracking your website property (https://www.google.com/webmasters/). This is important as it lets you see whether your hreflang tags and international targeting are working properly.

Furthermore, you need to use these tags correctly – if you just go and add hreflang tags into your site, I bet your Search Console will show “Hreflang Tags with Errors”.

Most common hreflang error is “No return tags”. This happens because your English page links to Spanish page, but your Spanish page does not link back to your English page. Why must it do that? Well, Google uses this to verify that the content really is an alternative version of your site.

So, you also need to add this tag into your Spanish page:

<link rel="alternate" hreflang="en" href="http://www.example.com/" />

After this you’re good to go. Google will now process your site. However, it will take some time. Google’s indexing is otherwise fast, but not so much for international content.

The wrong language code is also a common error. You can find a list of language codes and region codes on Wikipedia. From us, you will receive the correct language codes along the translations.

How to Utilize SVG in Localization

SVG (Scalable Vector Graphics) is an XML-based file format for vector images. It’s also a great tool for creating responsive localized graphics for the web.

There are also several other methods for creating localized graphics, like our Get Localization for Photoshop plug-in. If you want to externalize all the texts from your images, you can also use HTML and CSS but it will get difficult if your site is responsive (it’s possible though).

SVG however, is a great alternative as you can use a single graphical base asset, externalize textual content and also leverage the scaling of the SVG image to create a responsive graphical asset.

Here we have an example image, that is using PNG as a base background image. You can also use full SVG as well if you’d like. I’ll use the background bitmap image here just to keep the markup simple and easy. For internalization, we use Django’s i18n framework so the texts will be translated the same way as the rest of the website.

This is what the English version looks like:

websites_en

And this is how it looks in Japanese:

websites_ja.jpg

It is also fully responsive; image and text both scale correctly and keep their correct positions when you resize your browser.

There are also few important points which you should consider when creating localized assets. Text length varies in different languages, so make sure you have enough space for the translated text. Also, think how the lengthier or shorter text appears in your image. Ask yourself a question: if this text is longer or shorter, what is going to happen? Is it going to overlap the elements or will there be an ugly white space between the text and the element when text is actually shorter like in this example:

anchor_example

You need to make sure that text extends in the correct direction. Luckily SVG lets you define an anchor position for each text element. It’s used to align the text relative to a given point. For example, you may want to set the anchor point to middle if you want the text to always be centered, no matter how long it is. Or if you want to position the text based on the end coordinate, then the last character will always stay in the same position. This is how we can fix the problem in our example.

If you want to use Google Fonts or similar web fonts, make sure they support the languages you want to translate your site into. Google Fonts lets you search fonts by their supported languages.

So it’s not that hard, really! If you need help with your website translation & localization, let us know. Along with professional translation services, we also provide consultation and various tools for workflow management.

Get Localization offers professional translation services and managed translation & localization solutions for all kind of businesses. 

 

 

Cloud, Crowd, and Professional Translators

Cloud, Crowd, and Professional Translators

Stas Kalianov from Schneider Electric spoke at the GALA conference in New York in March about the role of translation agencies in software localization, and about who are the most important people in this workflow.

Through a mix of technology, their internal crowd, and professional translators Schneider Electric has achieved a process that gives them both lower costs and more user-friendly translations.

Listen below to how they achieved this with the help of Get Localization and what they chose to leave out of the process (this re-recording of the presentation has been previously published by Stas Kalianov).

How to use Apple’s new Media Manager

How to use Apple’s new Media Manager

Apple has rolled out a new Media Manager that simplifies screenshot management in iTunes Connect. This is a long waited feature as managing screenshots has been a notoriously painful process for developers. New iTunes Connect Media Manager lets you prepare one set of screenshots and they will be automatically scaled down to appropriate sizes for smaller screens. But even more awesome is that this also works for localized screenshots. According to Apple, if your app is developed for iPhone, iPad and Watch you may end up having a total of 980 screenshots if your app is localized to all the supported languages. So this is a huge time-saver. Let’s take a look at how the new Media Manager is actually used:

You can find a small link to Media Manager right under the App Preview and Screenshots section:

media-manager-1

When you have opened it, you can simply drag and drop your screenshots to each device family separately or click “Use 5.5-inch Display” check box to let Media Manager downscale the screenshots for you.

media-manager-2

 

That is great and simplifies the process a lot! You can do this also for localized versions: simply prepare localized versions of your screenshots and then select the appropriate language in the top right corner. The process is the same for each language.

But how do I create the localized screenshots?

Unfortunately Media Manager is not doing this for you. It will simplify the submission process a lot, but you still have to deal with the actual localization yourself.

You have basically a couple of options: either take the actual screenshots of your localized application for each language or use Photoshop to create the screenshots. Most screenshots contain marketing and demo content so they are often created in Photoshop to represent the actual app. It’s also often easier to manage updates when you don’t have to take screenshots with each release cycle. Simply modify the few base screenshots that are then used for all the devices and languages.

To make it easier to produce localized versions of your screenshots, we have published a Photoshop plug-in called Get Localization for Photoshop. It exports the textual content from your PSD file into a resource file that can be uploaded to Get Localization Workspace or Go service. When you get the file back from us, you simply create the localized PSD versions automatically with the plug-in. We just recently introduced a new version that also supports Artboards.

So it looks like managing screenshots is getting easier over time – so don’t lose hope! You can always contact us for help, our Sales and Support team is eager to answer your questions. You can get professional translations from Get Localization – also for your other content like the actual app UI, website and other marketing materials.

Get Localization Testfront 4.0 for Websites

Get Localization Testfront 4.0 for Websites

testfront-screenshotGet Localization Testfront 4.0 for Websites allows translators, proofreaders and QA teams to translate, test and optimize translations in their actual context.

Contextual mistakes are the most common issue in the world of professional translation. Get Localization allows fast and intuitive translation in our CAT editor and then quick localization quality assurance in the actual context.

With Get Localization Testfront you are able to discover contextual issues and issues with UI elements quickly and effectively. Your team is able to report these issues directly to the translators.

Get Localization Testfront 4.0 is part of Get Localization Professional Suite. You can contact us for more details or try it out for yourself at https://www.getlocalization.com

Get Localization for Photoshop Updated

Get Localization for Photoshop Updated

photoshop_screenshot-2

Get Localization for Photoshop received a facelift and update for Photoshop CC 2015 today. This add-on allows you to easily export text layers to separate XLIFF resource files and also to generate translated PSD and PNG files automatically from resource files. This is handy for example for screenshots and marketing material.

Download Get Localization for Photoshop add-on here

Get Localization Workspace Updated

Get Localization Workspace Updated

Get Localization Workspace received an update and facelift today. We have been refactoring our existing system profoundly. The new version brings multiple improvements to various functions. Most of the improvements are actually in underlying infrastructure but the Workspace UI also got a complete overhaul. I’ll highlight few of the improvements now.

Workspace Dashboard is now completely different, as we have made the timeline into the most prominent element. It’s a great tool for following in detail how your project is moving forward. You can now see at a glance what is happening.

newgl
Updated UI

Statistics

Statistics have been completely rewritten: they are faster and it’s easier for you to find detailed data. We know that companies use different units in their invoicing: words, segments or even characters; and have now taken this better into account. You can also inspect the data based on different attributes like language or date and get those results as a nice graph and also in a tabular format for additional manipulation. Due to the nature of the existing statistics and new stats system, it doesn’t make sense to bring the old data to our new system, so those who are working with old analysis page and data can still use it for invoicing until the new statistics system contains enough data for your billing period.

New order system for professional translation and cheaper prices for Workspace customers

We have now unified our order infrastructure which allows us to bring more cost-efficient translation also to Workspace customers. Packages (Silver, Gold etc) are gone and now you simply pay per word. There will be also new Order API which let’s you streamline the ordering process even more so that it’s fully automatic. It will be out later this summer. However the new Order UI and cheaper prices are available already today.

And more…

New notification system, faster file imports, announcements & better information sharing are just a few of the new features we’re featuring here. The new underlying technology and user interface allows us to add and improve new features faster than ever. We listen your feedback as always, so please keep it coming.