In the last releases of TYPO3, a lot of features have been added to make it easier to optimize your website for search engines. One of those features is the automatically generated hreflang tags if you have a multi-language website. This feature is based on best practices for language handling within TYPO3. Sometimes you have a situation though, that you need to do it differently and you might want to alter or even disable the automatically generated hreflang tags.
Let’s go back to the beginning. What are hreflang tags and how do they help me? As you most probably know, most search engines are using several parameters to define which results are the best fit for your search query. One of those parameters is the language you are searching in and in which region you are. When I do a search query from the Netherlands in my Dutch browser, I most probably get different results as someone from Germany in a German browser. A search engine tries to find out if you have alternate languages of your pages, but of course it is even better to give the search engine some information about the alternate languages.
Hreflang tags are not only about languages. If the website of your company is for example targeting the German market as well as the Austrian market, you should use the hreflang tags as well. Maybe the content is exactly the same, but you show the contact information of your Austrian office. If someone from Austria is searching, it will be shown the version with the Austrian office information. If someone from Germany is searching, it will be shown the German version. This will only happen when the search engine knows about the alternatives you provide for the page.
My friends of Yoast wrote an ultimate guide about hreflang. I can only recommend you to read that post if you want to have more information about these tags.
There are more ways to tell search engines about the alternates of your page, but for TYPO3 we have chosen to use hreflang tags are the most easy way to do so.
From a technical point of view, TYPO3 is using the languageMenuProcessor. It will check if you have enabled multiple languages for the current site and based on the settings like fallbacks, it will generate the right links if there is a specific version available. By using the languageMenuProcessor, we make sure that a visible language switch for visitors and the hreflang tags are giving the same results. TYPO3 will make the proper links in 99% of your cases. There might be reasons why you want to alter the hreflang tags though.
Before I start explaining how you can do this, I want to make sure that you only do such things if you have a special edge case. If you have a situation where you get the wrong hreflang tags and you are convinced it should generate the right ones as you have done nothing special, please contact us on Slack in the #cig-seo channel. Maybe it is a bug or just a small setting that is wrong. So, if you are in doubt, just check with the community first. We are happy to help and can use any feedback!
Yes, you can. From TYPO3 CMS v10.3 we have a possibility to interact with the automatically generated tags. This is done by a so called PSR-14 event. More information about PSR-14 events can be found on this page in the TYPO3 documentation.
You can interact with the automatically generated hreflang tags by following these steps:
TYPO3\CMS\Frontend\Event\ModifyHrefLangTagsEvent event.Configuration/Services.yaml file and make sure to add the property after: 'typo3-seo/hreflangGenerator'.That’s it.
As you see, it is quite easy to do so, but let’s show you how you can exactly do this by explaining the steps in the previous chapter. Before we start, make sure to have an extension where you can add this code. Most probably something like a site package extension or something likewise. Make sure you are able to add code to this extension. In my example my extension key is my_extension and the namespace prefix of my extension is Vendor\MyExtension.
First, we should create a file for the EventListener. So create a file in the path EXT:my_extension/Classes/HrefLang/EventListener/RemoveHrefLangTags.php (please update filename and extension key if needed). This file should contain the following code:
<?php
namespace Vendor\MyExtension\HrefLang\EventListener;
use TYPO3\CMS\Frontend\Event\ModifyHrefLangTagsEvent;
class RemoveHrefLangTags
{
public function __invoke(ModifyHrefLangTagsEvent $event): void
{
$hrefLangs = $event->getHrefLangs();
// Do anything you want with $hrefLangs.
// In this case we just want to have all tags removed.
$hrefLangs = [];
// Update the hreflang tags in the event
$event->setHrefLangs($hrefLangs);
}
}
After you created your code, TYPO3 needs to know you want to listen to the event. To do so, create a file with the following path EXT:my_extension/Configuration/Services.yaml. You can put the following code in that file.
services:
Vendor\MyExtension\HrefLang\EventListener\RemoveHrefLangTags:
tags:
- name: event.listener
identifier: 'my-ext/removeHrefLangTags'
after: 'typo3-seo/hreflangGenerator'
event: TYPO3\CMS\Frontend\Event\ModifyHrefLangTagsEvent
As you have altered the Services.yaml file, you need to make sure all caches are cleared. To do so, use the Flush TYPO3 and PHP caches option in the Maintenance part of the install tool.
After you have followed these steps, you should not have any hreflang tags in the frontend anymore.
Do you have a question? Do you want to work together? Just send me a message and I will get in touch as soon as possible.
