Page ViewHelpers

New in version 14.0

The Page ViewHelpers provide access to page-level functionality in frontend Fluid templates. They are used to control aspects of the rendered HTML document that belong to the page itself rather than to individual content elements.

Typical use cases include:

setting the document title
defining SEO and social media meta tags
injecting additional markup into the HTML <head> section

The Page ViewHelpers are designed to be used together and integrate with TYPO3’s frontend rendering and MetaTagManager systems.

For detailed information about each ViewHelper and its arguments, refer to the individual reference pages:

Setting meta data in a PAGEVIEW layout via Fluid

The following example shows how multiple Page ViewHelpers can be combined in a PAGEVIEW layout to manage common page-level concerns such as the document title, SEO-related meta tags, OpenGraph and Twitter / X meta data, as well as favicon and other <head> assets.

This approach is typically used in site packages and custom frontend rendering setups where page title, meta data, and head markup are defined centrally in a layout.

EXT:my_extension/Resources/Private/PageView/Layout/Default.html


<f:page.title>{page.title} - {page.subtitle} - {site.name}</f:page.title>

<f:page.meta property="description">
    {page.description -> f:format.stripTags()}
</f:page.meta>
<f:page.meta property="og:title">{page.title} - {page.subtitle} - {site.name}</f:page.meta>
<f:page.meta property="og:type">article</f:page.meta>
<f:page.meta property="og:description">
    {page.description -> f:format.stripTags()}
</f:page.meta>

<f:page.headerData>
    <link rel="icon"
          href="{f:uri.resource(
                  path: 'Icons/favicon.ico',
                  extensionName: 'my_extension'
              )}"
          sizes="any" />
    <link rel="apple-touch-icon"
          href="{f:uri.resource(
                  path: 'Icons/apple-touch-icon.png',
                  extensionName: 'my_extension'
              )}" />
</f:page.headerData>

<h1>{page.title}</h1>
{page.description -> f:format.html()}
<main>
    <f:render section="Main"/>
</main>

The example above combines several Page ViewHelpers, each responsible for a specific page-level concern:

Page.title ViewHelper <f:page.title> Used to compose a dynamic document title from multiple values instead of relying on the default page title.
Page.meta ViewHelper <f:page.meta> Used to define SEO-related, OpenGraph, and Twitter / X meta tags directly in the Fluid template.
Page.headerData ViewHelper <f:page.headerData> Used to inject additional markup into the HTML <head> section, for example favicon and touch icon definitions.

In addition, the example uses format ViewHelpers to normalize content before it is used in titles and meta tags:

Format.stripTags ViewHelper <f:format.stripTags> Removes HTML markup from rich text values.
Format.html ViewHelper <f:format.html> Renders HTML content safely in the page body.