How to localise html5 meta tag information

Question

I am building a website designed for 4 different languages, using Sinatra, and using the I18n libs to insert localised content, but I am wondering what to do about the standard HTML5 meta tags for things like description and keywords, and how Google and other search engines will treat them if I localise the content in those tags.

Ideally I want to be able to tell Google (et al), perhaps via information in a sitemap.xml file or something (though I'm not certain that's even possible), that the site may be parsed in these 4 languages, and so present correctly localised keywords, and descriptions to users depending on their locale preference.

Likewise I want to be able to localise the information going out to Twitter and Facebook by localising the relevant og meta tags, and twitter:card` meta tags.

Note: the actual page URLs will be the same no matter the language chosen, localised content is rendered in the Slim templates themselves.

Is it enough, for example, to specify

html lang='de_DE'

I'm after a best-practice and DRY way of achieving nicely localised search result summary information for my international users.

Answer 1

If the different language versions reside at the same URL, then what search engines get is what your server sends to a browser that does specify any language preferences. According to your description, it thus seems that they always get the default (English) version. No meta tags or lang attributes can affect this. (And search engines ignore lang attributes.)

So you should arrange thing so that each language version of a page has a URL of its own. (The difference could be in the query part only, e.g. ?lang=de-DE at the end.) Moreover, the versions should be interlinked, with link elements or with visible a links, so that when a search engine has found one version, it will find the other versions, too, just by following links.

P.S. Writing <meta name=keywords ...> tags is probably waste of time. Google has ignored them long ago.

Answer 2

You can provide meta elements with content in different languages on the same HTML document by using the lang attribute:

<meta name="description" lang="de" content="…" />
<meta name="description" lang="en" content="…" />
<meta name="description" lang="es" content="…" />
<meta name="description" lang="fr" content="…" />

If any third party services like Google or Facebook recognize this is a different question which cannot be answered in general, depends on the specific service, context and the point in time, as things might change rapidly.

However (as Jukka K. Korpela notes, too), in general you should use separate URLs for translations. Give users (and search enginges etc.) the ability to link to a specific language version.