Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
@lang
and @dir
, at least on the html
element:<html lang="ar" dir="rtl">
direction
or unicode-bidi
. (For XML, the situation changes again. XML doesn’t offer special internationalization markup, so here it’s advisable to use CSS.)<link href="default.rtl.css" rel="stylesheet">
<link href="default.css" rel="stylesheet">
[dir='rtl']
attribute selector[dir='rtl']
.aside {
float: right;
margin: 0 0 1em 1em;
}
[dir='rtl'] aside {
float: left;
margin: 0 1em 1em 0;
}
:lang()
pseudo class:lang()
pseudo class. (Note that we’re talking documents here, not text snippets, as targeting snippets of a particular language makes things a little more complex.):lang(zh) strong,
:lang(zh) b {
font-weight: normal;
color: #900;
}
float
, or text-align
.text-align: left
in LTR needs to be text-align: right
in RTL.box-shadow
and text-shadow values
, and JavaScript positioning and animations: These may require being swapped and accommodated for in the opposite directionality.[dir='rtl']
(or [dir='ltr']
) hook (tip #2), you’re using a selector of higher specificity. This can lead to issues. Just have an eye out, and adjust accordingly.Webmaster level: All
In December 2011 we announced annotations for sites that target users in many languages and, optionally, countries. These annotations define a cluster of equivalent pages that target users around the world, and were implemented using rel-alternate-hreflang link elements in the HTML of each page in the cluster.
Based on webmaster feedback and other considerations, today we’re adding support for specifying the rel-alternate-hreflang annotations in Sitemaps. Using Sitemaps instead of HTML link elements offers many advantages including smaller page size and easier deployment for some websites.
To see how this works, let's take a simple example: We wish to specify that for the URL http://www.example.com/en, targeting English language users, the equivalent URL targeting German language speakers http://www.example.com/de. Up till now, the only way to add such annotation is to use a link element, either as an HTTP header or as HTML elements on both URLs like this:
<link rel="alternate" hreflang="en" href="http://www.example.com/en" >
<link rel="alternate" hreflang="de" href="http://www.example.com/de" >
As of today, you can alternately use the following equivalent markup in Sitemaps:
<url>
<loc>http://www.example.com/en</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://www.example.com/de" />
<xhtml:link
rel="alternate"
hreflang="en"
href="http://www.example.com/en" />
</url>
<url>
<loc>http://www.example.com/de</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://www.example.com/de" />
<xhtml:link
rel="alternate"
hreflang="en"
href="http://www.example.com/en" />
</url>
Briefly, the new Sitemaps tags shown in bold function in the same way as the HTML link tags, with both using the same attributes. The full technical details of how the annotations are implemented in Sitemaps, including how to implement the xhtml namespace for the link tag, are in our new Help Center article.
A more detailed example can be found in our new Help Center article, and if you need more help, please ask in our brand new internationalization help forum.
Written by Pierre Far, Webmaster Trends Analyst
this is a topic published in 2013... to get contents for your blog or your forum, just contact me at: devnasser@gmail.comEmail us at <span class="notranslate">sales at mydomain dot com</span>And if you have an entire page that should not be translated, you can add:
<meta name="google" value="notranslate">to the <head> of your page and we won't translate any of the content on that page.
<meta name="google" content="notranslate">Thanks to chaoskaizer for pointing this out in the comments. :)
google.load
function, which lets you load the individual Google APIs. For loading Google Transliteration API, call to google.load
looks like this:ccTLDs eg: example.de, example.fr | Subdomains with gTLDs eg: de.site.com, fr.site.com, etc. | Subdirectories with gTLDs eg: site.com/de/, site.com/fr/, etc. | URL parameters eg: site.com?loc=de, ?country=france, etc. |
pros (+) - clear geotargeting - server location is irrelevant - easy separation of sites - legal requirements (sometimes) | pros (+) - easy to set up - can use Webmaster Tools geotargeting - allows different server locations - easy separation of sites | pros (+) - easy to set up - can use Webmaster Tools geotargeting - low maintenance (same host) | pros (+) (not recommended) |
cons (-) - expensive (+ availability) - more infrastructure - ccTLD requirements (sometimes) | cons (-) - users might not recognize geotargeting from the URL alone (is "de" the language or country?) | cons (-) - users might not recognize geotargeting from the URL alone - single server location - separation of sites harder | cons (-) - segmentation based on the URL is difficult - users might not recognize geotargeting from the URL alone - geotargeting in Webmaster Tools is not possible |
<p>ابةتث <img src="foo.jpg" alt=" جحخد"< ذرزسش!</p>
<body class="rtl">
<h1><a href="http://www.blogger.com/"><img alt="Google" src="http://www.google.com/images/logos/google_logo.png" /></a> Heading</h1>
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
<h2>עוד ב- <span dir="ltr">Google</span></h2>
<title>‫הפוך את Google לדף הבית שלך‬</title>
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
Webmaster Level: All
The homepages of multinational and multilingual websites are sometimes configured to point visitors to localized pages, either via redirects or by changing the content to reflect the user’s language. Today we’ll introduce a new rel-alternate-hreflang annotation that the webmaster can use to specify such homepages that is supported by both Google and Yandex.
To see this in action, let’s look at an example. The website example.com has content that targets users around the world as follows:
In this case, the webmaster can annotate this cluster of pages using rel-alternate-hreflang using Sitemaps or using HTML link tags like this:
<link rel="alternate" href="http://example.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
The new x-default hreflang attribute value signals to our algorithms that this page doesn’t target any specific language or locale and is the default page when no other page is better suited. For example, it would be the page our algorithms try to show French-speaking searchers worldwide or English-speaking searchers on google.ca.
The same annotation applies for homepages that dynamically alter their contents based on a user’s perceived geolocation or the Accept-Language headers. The x-default hreflang value signals to our algorithms that such a page doesn’t target a specific language or locale.
As always, if you have any questions or feedback, please tell us in the Internationalization Webmaster Help Forum.
Posted by Pierre Far, Webmaster Trends Analyst
this is a topic published in 2013... to get contents for your blog or your forum, just contact me at: devnasser@gmail.comUpdate: This markup can now be used for multilingual and multi-regional content in general. More information.
<link rel=”alternate” hreflang="a-different-language" href="http://url-of-the-different-language-page" />
rel=”alternate” hreflang=”x”
is included in conjunction with rel=”canonical”
or 301s, not only will our indexing and linking properties be more accurate, but we can better serve users the URL of their preferred language.rel=”alternate” hreflang=”x”
Step 1: Select the proper canonical.Once the steps are completed, the configuration on “The Network” would look like this:
The canonical designates the version of your content you’d like indexed and returned to users.The first step towards making the right content indexable is to pick one canonical URL that best reflects the genuine locale of the page’s main content. In the example above, since Javier is a Spanish-speaking user and he created his profile on es.example.com, http://es.example.com/javier-lopez is the logical canonical. The title and snippet in all locales will be selected from the canonical URL.Step 2: In the canonical URL, specify the various language versions via the rel=”alternate” link tag, using its
Once you have the canonical URL picked out, you can either:A. 301 (permanent redirect) from the language variants to the canonical
As an example, if a French speaker visits fr.example.com/javier-lopez (not the canonical), have this page include a cookie to remember the user's language preference of French. Then permanently redirect from fr.example.com/javier-lopez to the canonical at es.example.com/javier-lopez. Because of the cookie, es.example.com/javier-lopez will still render its boilerplate in French (even on the es.example.com subdomain!). Similarly, en.example.com/javier-lopez would set the value of this cookie to English and then 301 redirect to es.example.com/javier-lopez.
Including a language selection link is also helpful should a multilingual user prefer a different experience of your site.
B. Use rel=”canonical”
On the other language variants, include alink rel=”canonical”
tag pointing to your chosen canonical. In our example, since the canonical for Javier’s profile is the Spanish version, the English and French pages (and optionally even the Spanish page itself) would include<link rel=”canonical” href="http://es.example.com/javier-lopez" />
.
Cookies are not involved in this setup. Therefore, a French speaker will be served es.example.com/javier-lopez with a Spanish template. Implement step 2 if you want the French speakers to be served the French version at fr.example.com/javier-lopez in Google search results.hreflang
attribute.
rel=”alternate” URLs can be displayed in search results in accordance with a user’s language preference. The title and snippet, however, remain generated from the canonical URL (as is customary with rel=”canonical”), not from the content of any rel=”alternate”.You can help Google display the correctly localized variant of your URL to our international users by adding the following tags to http://es.example.com/javier-lopez, the selected canonical:<link rel=”alternate” hreflang="en" href="http://en.example.com/javier-lopez" />
<link rel=”alternate” hreflang="fr" href="http://fr.example.com/javier-lopez" />
rel=”alternate”
indicates that the URL contains an alternate version located at the URI of thehref
value.hreflang
identifies the language code of the alternate URL and can be specified with ISO-639.
Please note: If your site supports many languages and you’re worried about the increased file size when declaring numerous rel=”alternate” URLs, please see our Help Center article about configuring rel=”alternate” with file size constraints.
either 301s with a language cookie or contains <link rel=”canonical” href=”http://es.example.com/javier-lopez” />
either 301s with a language cookie or contains <link rel=”canonical” href=”http://es.example.com/javier-lopez” />
is the canonical and contains<link rel=”alternate” hreflang="en" href="http://en.example.com/javier-lopez" />
and<link rel=”alternate” hreflang="fr" href="http://fr.example.com/javier-lopez" />
rel=”canonical”
or a 301 redirect, we can cluster the language variations with the canonical. With rel=”alternate” hreflang=”x”
at serve-time we can deliver the URL of the most appropriate language to the user: English speakers will be served en.example.com/javier-lopez
as the result for the URL in Javier’s profile, French speakers will see fr.example.com/javier-lopez
, Spanish speakers will see es.example.com/javier-lopez
.es.example.com/javier-lopez
is the canonical, queries that include template content from this page, e.g. [Javier Lopez familia] -- when using any language preference -- may return his profile (content from the canonical version). On the other hand, queries that include template content of the “duplicate” version, e.g. [Javier Lopez family], are less likely to return his profile page. If you would like the other language versions indexed separately and searchable, avoid using rel=”canonical” and rel=”alternate”.hreflang
attribute. This way, Google can show the correctly-localized variant of your URLs to our international users.If you specify a regional subtag, we’ll assume that you want to target that region.
<link rel="alternate" hreflang="es" href="http://www.example.com/" />
<link rel="alternate" hreflang="es-ES" href="http://es-es.example.com/" />
<link rel="alternate" hreflang="es-MX" href="http://es-mx.example.com/" />
<link rel="alternate" hreflang="en" href="http://en.example.com/" />