Create hreflang tags in TYPO3 with FLUID

I was looking for a clean, simple and performant way to generate hreflang tags in the TYPO3 headerData. Most methods I’ve found online concentrate on generating the tags by using a Typoscript language HMENU. Since our team at Koch Kommunikation has switched over to using MenuProcessor instead of HMENU a while ago, I wanted to find a FLUID based approach and came up with the following.

Adding hreflang to headerData

page.headerData{
    104 = FLUIDTEMPLATE
    104 {
        file = EXT:your_distribution/Resources/Private/Templates/HrefLang.html
    }
}

Option A: Reusing your MenuProcessor based language menu

Assuming you already have a MenuProcessor which generates a language menu for you, you can pass that to the headerData FLUID-Template.

page.headerData.104.dataProcessing.10 < page.10.dataProcessing.30

Option B: Creating a MenuProcessor language menu

If you don’t have a language menu already, you can create one.

page.headerData.104 {
    dataProcessing {
	10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
	10 {
		special = language
                // List of language ids that should be checked and outputted in hreflang
                addQueryString = 1
                addQueryString {
                    exclude = id, L, cHash
                    method = GET
                }
		special.value = 0,1,3
		as = language
	}
    }
}

The FLUID Template

The FLUID-Template code below will generate a hreflang tag for all languages of the present document, that have an existing translation. I am using the language file of the distribution to generate the correct locale for the given language id, but you can choose any method you like. We usually have to handle four languages and have standardized the ids, their handling etc.

<html xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
    <f:for each="{language}" as="langItem">
        <f:if condition="{langItem.available}">
            <link rel="alternate" hreflang="{f:translate(key:'LLL:EXT:your_distribution/Resources/Private/Language/locallang.xlf:language.{langItem.languageUid}.locale')}" href="{langItem.link}" />
        </f:if>
    </f:for>
</html>

That is all there is to it. Now your TYPO3 will generate the appropriate hreflang tags for the page it displays.

EDIT: changed the condition to only show other languages to show all and added addQueryString to the language menu, so the link will include parameters for plugins like news etc. – thanks for the notice by Sebastian Klein

2 Comments

  1. Hey, that’s a great solution! Thanks for sharing. I changed two things for my site: Google demands that “each language version must list itself as well as all other language versions”, so I removed the first condition to always show all available languages.
    In the MenuProcessor I added ‘addQueryString = 1’ to get the news detail links. Depending on the website it may be better to put this in a condition like [globalVar = GP:tx_news_pi1|news > 0], so that not every plugin is affected.
    What do you think?

  2. Yeah, the addQueryString + its configuration is missing in this example, because I’ve used my already existing language-menu MenuProcessor in the practical example that had this configuration in it.

    I don’t think addQueryString in the language menu should be a problem for any plugin – if it’s configured and programmed correctly. We have it as a default in our standard distribution.

    Thanks for noting that part of showing even the same language. I need to correct that in the example and our standard system, I thought it made no sense to list itself… but if almighty Google wants it 😀

Leave a Comment

Your email address will not be published. Required fields are marked *