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
		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.active} && {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.

Leave a Comment

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