diff --git a/content/applications/websites/website/configuration/translate.rst b/content/applications/websites/website/configuration/translate.rst index d05c9388f..7416febae 100644 --- a/content/applications/websites/website/configuration/translate.rst +++ b/content/applications/websites/website/configuration/translate.rst @@ -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 `. When additional languages are installed, users -can choose their preferred language using the :ref:`language selector `. +:ref:`Translate ` the website into multiple languages to allow visitors to view +the content in their preferred language. -The :ref:`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 ` 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 ` 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 `. 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 `. + +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 ` and +:ref:`meta tags ` for :ref:`Search Engine Optimization `. + +To translate alt tags on any image, first :ref:`define an alt tag ` 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 `, access the page in the desired language +and follow the steps from the :ref:`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 diff --git a/content/applications/websites/website/structure/seo.rst b/content/applications/websites/website/structure/seo.rst index 62fd31623..f0d989faa 100644 --- a/content/applications/websites/website/structure/seo.rst +++ b/content/applications/websites/website/structure/seo.rst @@ -19,6 +19,9 @@ speed. `Magic Sheet - Optimize your website [PDF] `_ + +.. _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