mirror of
https://github.com/odoo/documentation.git
synced 2025-12-12 07:29:27 +07:00
[IMP] Website: add alt tag and metadata translation tips
task-5003381
This commit is contained in:
jacbodoo
@@ -2,111 +2,144 @@
|
||||
Translations
|
||||
============
|
||||
|
||||
Your website is displayed in the language that matches your visitor’s browser. If the browser’s
|
||||
language has not been installed and added to your website, the content is shown in the
|
||||
:ref:`default language <translate/default-language>`. When additional languages are installed, users
|
||||
can choose their preferred language using the :ref:`language selector <translate/language-selector>`.
|
||||
:ref:`Translate <translate/translate>` the website into multiple languages to allow visitors to view
|
||||
the content in their preferred language.
|
||||
|
||||
The :ref:`Translate <translate/translate>` feature on your website allows automatic translation of
|
||||
standard terms and provides a tool for manual content translation.
|
||||
The website content is displayed in the :ref:`default language <translate/default-language>` defined
|
||||
in the database.
|
||||
|
||||
To make the content available in other languages, you must install the required
|
||||
languages and add them to the website. Once this is done, a
|
||||
:ref:`Language selector <translate/language-selector>` is automatically added to the website,
|
||||
allowing visitors to choose their preferred language.
|
||||
|
||||
Install languages
|
||||
=================
|
||||
|
||||
To allow translation of your website, you must first :doc:`install <../../../general/users/language>`
|
||||
the required languages and add them to your website. To do so, go to :menuselection:`Website -->
|
||||
Configuration --> Settings` and click :icon:`fa-arrow-right` :guilabel:`Install new languages` in
|
||||
the :guilabel:`Website Info` section. In the dialog box that opens, select the :guilabel:`Languages`
|
||||
you want from the dropdown menu, tick the required :guilabel:`Websites to translate`, and click
|
||||
:guilabel:`Add`.
|
||||
|
||||
To edit your website's languages, go to :menuselection:`Website -–> Configuration -–> Settings` and
|
||||
add/remove the required languages in/from the :guilabel:`Languages` field in the
|
||||
:guilabel:`Website info` section.
|
||||
To allow translation on the website, first :doc:`install <../../../general/users/language>`
|
||||
the required languages and add them to the website. To do so, go to :menuselection:`Website -->
|
||||
Configuration --> Settings`.
|
||||
Then, go to the :guilabel:`General` section and click :icon:`oi-arrow-right`
|
||||
:guilabel:`Install new languages`. In the dialog box that opens, select the :guilabel:`Languages`
|
||||
from the dropdown menu, tick the required :guilabel:`Websites to translate`, click :guilabel:`Add`,
|
||||
and click :guilabel:`Close`.
|
||||
|
||||
.. tip::
|
||||
Alternatively, once the languages have been installed, you can add them from the :ref:`language
|
||||
selector <translate/language-selector>`. You might then need to refresh your page to see the new
|
||||
language.
|
||||
Once the new languages have been added, refreshing the page might be necessary to see them in the
|
||||
:ref:`Language selector <translate/language-selector>`.
|
||||
|
||||
To remove a language from the website, go to :menuselection:`Website --> Configuration --> Settings`.
|
||||
In the :guilabel:`Languages` field of the :guilabel:`General` section, click the :icon:`oi-close` on
|
||||
a language to remove it.
|
||||
|
||||
.. _translate/default-language:
|
||||
|
||||
Default language
|
||||
----------------
|
||||
|
||||
When multiple languages are available on your website, you can set a default language to be used if
|
||||
the visitor’s browser language is not available. To do so, go to :menuselection:`Website –->
|
||||
Configuration -–> Settings`, and select a language in the :guilabel:`Default` field.
|
||||
When multiple languages are available on the website, a default language can be defined to be used
|
||||
when the visitor’s browser language is not available. To do so, go to :menuselection:`Website -->
|
||||
Configuration --> Settings`.
|
||||
Go to the :guilabel:`General` section and select a language in the :guilabel:`Default` field.
|
||||
|
||||
.. note::
|
||||
This field is only visible if multiple languages have been installed and added to your website.
|
||||
The :guilabel:`Default language` field is only visible if multiple languages have been installed
|
||||
and added to the website.
|
||||
|
||||
.. _translate/language-selector:
|
||||
|
||||
Language selector
|
||||
=================
|
||||
|
||||
Your website’s visitors can switch languages using the language selector, available by default in
|
||||
the :guilabel:`Copyright` section at the bottom of the page. To edit the language selector menu:
|
||||
Once other languages are installed and added in the website, a :guilabel:`Language selector`
|
||||
appears on the website, allowing visitors to switch between languages. It automatically appears in
|
||||
the header as a dropdown menu and in the :guilabel:`Copyright` section at the bottom of the page.
|
||||
|
||||
#. Go to your website and click :guilabel:`Edit`;
|
||||
#. Click the language selector available in the :guilabel:`Copyright` block and go to the
|
||||
:guilabel:`Copyright` section of the website builder;
|
||||
#. Set the :guilabel:`Language Selector` field to either :guilabel:`Dropdown` or :guilabel:`Inline`.
|
||||
Click :guilabel:`None` if you do not want to display the :guilabel:`Language selector`;
|
||||
|
||||
.. image:: translate/language-selector.png
|
||||
:alt: Add a language selector menu.
|
||||
To customize the appearance of the :guilabel:`Language selector`:
|
||||
|
||||
#. Go to the website in the default language and click :guilabel:`Edit`.
|
||||
#. Click the :guilabel:`Language Selector` available in the header block to customize the language
|
||||
selector from the header, or the one in the footer to customize the language selector from the
|
||||
footer.
|
||||
#. In the website builder, go to the :guilabel:`Language Selector` field.
|
||||
#. Set the :guilabel:`Language Selector` field to either :guilabel:`Dropdown`, :guilabel:`Inline`,
|
||||
Click :guilabel:`None` if the :guilabel:`Language selector` is not intended to be displayed.
|
||||
#. Set the :guilabel:`Label` to either :guilabel:`Text`, :guilabel:`Flag`, :guilabel:`Flag and Text`,
|
||||
:guilabel:`Code`, or :guilabel:`Flag and Code`.
|
||||
#. Click :guilabel:`Save`.
|
||||
|
||||
.. tip::
|
||||
You can also add the :guilabel:`Language Selector` to the :guilabel:`Header` of your page. To do
|
||||
so, click the :guilabel:`Header` block and go to the :guilabel:`Navbar` section to edit the
|
||||
:guilabel:`Language Selector`.
|
||||
Change website's language
|
||||
=========================
|
||||
|
||||
Go to the website page, select the language from the :guilabel:`Language selector` in the header or
|
||||
in the footer, to see the content of the website in another language.
|
||||
In added languages, standard terms are translated, but the rest of the content can be translated
|
||||
using the :guilabel:`Translate` feature.
|
||||
|
||||
.. _translate/translate:
|
||||
|
||||
Translate your website
|
||||
======================
|
||||
Translate website page
|
||||
----------------------
|
||||
|
||||
Select your desired language from the language selector to see your content in another language.
|
||||
Then, click the :guilabel:`Translate` button in the top-right corner to manually activate the
|
||||
translation mode so that you can translate what has not been translated automatically by Odoo.
|
||||
|
||||
Translated text strings are highlighted in green; text strings that were not translated
|
||||
automatically are highlighted in yellow.
|
||||
|
||||
.. image:: translate/translated-text.png
|
||||
:alt: Entering the translation mode
|
||||
|
||||
In this mode, you can only translate text. To change the page's structure, you must edit the master
|
||||
page, i.e., the page in the original language of the database. Any changes made to the master page
|
||||
are automatically applied to all translated versions.
|
||||
|
||||
To replace the original text with the translation, click the block, edit its contents, and
|
||||
To translate the page, click the :guilabel:`Language selector` and select the language with
|
||||
missing translation. Then, click :menuselection:`Edit --> Translate` in the top-right corner to
|
||||
activate the translation mode. The translated text is highlighted in green, while the text that is
|
||||
not translated is highlighted in yellow.
|
||||
Translate the entire page with one click by clicking on the green language button on the top-right
|
||||
corner to automatically translate all the content highlighted in yellow.
|
||||
Or translate the required text manually by clicking the block, editing its contents, then clicking
|
||||
:guilabel:`Save`.
|
||||
|
||||
.. image:: translate/translated-text.png
|
||||
:alt: Entering the translation mode
|
||||
|
||||
.. note::
|
||||
When a website supports multiple languages, the core URL structure remains consistent across
|
||||
languages, while specific elements like product names or categories are translated. For example,
|
||||
`https://www.mywebsite.com/shop/product/my-product-1` is the English version of a product page,
|
||||
while `https://www.mywebsite.com/fr/shop/product/mon-produit-1` is the French version of the same
|
||||
page. The structure (/shop/product/) stays unchanged, but the translated elements (e.g., product
|
||||
name) adapt to the selected language.
|
||||
The :guilabel:`Edit` button opens the translation mode only while viewing the page in a language
|
||||
that is not the default one. In this mode, only translations can be edited. Any other type of
|
||||
modification with the website builder must be carried out while using the default language.
|
||||
Any changes made to the default language pages are automatically applied to the pages of all
|
||||
other languages.
|
||||
|
||||
.. note::
|
||||
When a website supports multiple languages, the core URL structure remains consistent across
|
||||
languages, while specific elements like product names or categories are translated. For example,
|
||||
`https://www.mywebsite.com/shop/product/my-product-1` is the English version of a product page,
|
||||
while `https://www.mywebsite.com/fr/shop/product/mon-produit-1` is the French version of the same
|
||||
page. The structure (/shop/product/) stays unchanged, but the translated elements (e.g., product
|
||||
name) adapt to the selected language.
|
||||
|
||||
.. tip::
|
||||
Once the desired language is installed, you can translate some items from the backend (e.g., the
|
||||
product's name in the product form). To do so, click the language code (e.g., :guilabel:`EN`) next
|
||||
to the text you want to translate and add the translation.
|
||||
Once the desired language is installed, some items from the backend can be translated (e.g., the
|
||||
product's name in the product form). To do so, click the language code (e.g., :guilabel:`EN`)
|
||||
next to the text you want to translate and add the translation.
|
||||
|
||||
Translation for SEO
|
||||
-------------------
|
||||
|
||||
Once the pages are translated, translate the :ref:`alt tags <seo/alt-tag>` and
|
||||
:ref:`meta tags <seo/meta-tags>` for :ref:`Search Engine Optimization <seo/content-optimization>`.
|
||||
|
||||
To translate alt tags on any image, first :ref:`define an alt tag <website/elements/images>` on the
|
||||
image. Then switch to the language to translate, click on :menuselection:`Edit --> Translate` and
|
||||
click on the image. In the :guilabel:`Translate Attribute` box that opens, add translation to the
|
||||
:guilabel:`title` and the :guilabel:`alt`.
|
||||
|
||||
To add translation to :ref:`meta tags <seo/meta-tags>`, access the page in the desired language
|
||||
and follow the steps from the :ref:`Content optimization <seo/content-optimization>`.
|
||||
|
||||
.. note::
|
||||
When viewing the website in its default language, you will see all the added keywords,
|
||||
regardless of their language. However, if you switch the website to a different language, such as
|
||||
French, you will only see the keywords relevant to that language. Filtering all keywords by each
|
||||
language is not possible.
|
||||
|
||||
Content visibility by language
|
||||
------------------------------
|
||||
==============================
|
||||
|
||||
You can hide content (such as images or videos, for example) depending on the language. To do so:
|
||||
|
||||
#. Click :guilabel:`Edit` and select an element of your website;
|
||||
#. Go to the :guilabel:`Text - Image` section and :guilabel:`Visibility`;
|
||||
#. Go to the :guilabel:`Title - Image` section and :guilabel:`Visibility`;
|
||||
#. Click :guilabel:`No condition` and select :guilabel:`Conditionally` instead;
|
||||
#. Go to :guilabel:`Languages` to configure the condition(s) to apply by selecting
|
||||
:guilabel:`Visible for` or :guilabel:`Hidden for`, and click :guilabel:`Choose a record` to
|
||||
|
||||
@@ -19,6 +19,9 @@ speed.
|
||||
`Magic Sheet - Optimize your website [PDF]
|
||||
<https://drive.google.com/drive/folders/1Ywip4tWF2DPkcBaEbeXJxIZg2CjkwKgb>`_
|
||||
|
||||
|
||||
.. _seo/content-optimization:
|
||||
|
||||
Content optimization
|
||||
====================
|
||||
|
||||
@@ -48,6 +51,8 @@ real impact on ranking. They cannot be edited in the :guilabel:`optimize SEO` po
|
||||
.. important::
|
||||
It is strongly recommended to only use one H1 title per page for SEO.
|
||||
|
||||
.. _seo/meta-tags:
|
||||
|
||||
Meta tags and meta keywords
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
@@ -96,6 +101,8 @@ efficiently.
|
||||
**To modify an image** from your website, select the image, click :guilabel:`Edit`, then go to the
|
||||
:guilabel:`Customize` tab, and adapt the :guilabel:`Format` in the :guilabel:`Image` section.
|
||||
|
||||
.. _seo/alt-tag:
|
||||
|
||||
.. important::
|
||||
Alt tags are used to provide context to what an image is displaying, informing search engine
|
||||
crawlers and allowing them to index an image correctly. Adding alt tags keywords in the
|
||||
|
||||
Reference in New Issue
Block a user