Dynamic SEO / Open Graph Tags

[michaelkubina]

Description

Problem

Currently documents displayed in pageview are missing valuable meta-tags in the html-head, that could be used for SEO and Open Graph Tags. The output of Highwire-Press-Tags and DC-Schema-Tags would be appreciated.

Proposed Solution

I just wanted to share this solution, that we have presented in the Praxistreffern 2023 in Berlin, so it could be used as an inspiration or base for further development. I believe here is more room for discussion.

A possible path to do this, would be to use the output of the metadata-plugin (and pageview-plugin), to enrich the html head with such tags. Fluid can change the html-head through the <f:section name="HeaderAssets"> (https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/8.6/Feature-79409-AutorenderAssetSectionsInFluidTemplateWithController.html). In order for it to work, the data needs to be in the {settings} variable. This would require a pre-structured output of the metadata into the settings variable as well, which then gets passed to the view (if possible). At least for some core bibliographic data this should be more or less universal for all users.

Open Graph Tags work best with a thumbnail image, which could be grabbed from the pageview-plugin, which already knows about the image currently shown.

Mockups and Examples

In our approach, we currently circumvented the issue with the {settings} variable by using the vhs-viewhelpers function to set a custom variable in the template. This is then later used in the HeaderAssets section.

e.g. Metadata/Main.html

...
        <v:variable.set name="settings.title" value="{documentMetadataSections.0.title.0}" />
        <v:variable.set name="settings.author" value="{documentMetadataSections.0.author}" />
...
<f:section name="HeaderAssets">
    <f:comment><!-- Highwire Press Tags --></f:comment>
    <meta name="gs_meta_revision" content="1.1">
    <meta name="citation_title" content="{settings.title}"/>
    <f:for each="{settings.author}" as="author" iteration="iter">
        <meta name="citation_author" content="{settings.author.{iter.index}}"/>
    </f:for>
...
<f:comment><!-- DC Schema Tags --></f:comment>
    <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
    <meta name="DC.Title" content="{settings.title}"/>
    <f:for each="{settings.author}" as="author" iteration="iter">
        <meta name="DC.Creator" content="{settings.author.{iter.index}}"/>
    </f:for>
...
    <f:comment><!-- Open Graph --></f:comment>
    <meta name="og:title" content="{settings.portal}" />
    <meta name="og:description" content="{settings.title} {settings.volume}" />

e.g. PageView/Main.html

<v:variable.set name="settings.image" value="{images.0.url}" />
<f:section name="HeaderAssets">
    <meta name="og:image" content="{settings.image}" />
</f:section>

Target Version

I was only able to test the fluid-section mechanism with Kitodo.Presentation 4.0.1 and Typo3 10.4.36, but i believe it to work with newer typo3 versions as well.

Additional Context

The Meta-Tags (especially highwire and dc) are favored by search engines and would have a higher impact then just the output of the metadata-plugin in the applied wrappers. Open Graph Tags are favorable, when sharing links to documents over social media, as it gets displayed as an eye-catching card.

[sebastian-meyer]

I know that SLUB Dresden also provides Open Graph tags for their digital documents. Maybe @beatrycze-volk or @ByteParty can give some insight on how they achieve this?