Skip to content

Commit d4dfc94

Browse files
linawolflinawolf
authored
[FEATURE] Introduce Fluid page meta ViewHelper (#189)
Resolves: TYPO3-Documentation/Changelog-To-Doc#1461 Releases: main
1 parent 5c0766d commit d4dfc94

File tree

3 files changed

+225
-9
lines changed

3 files changed

+225
-9
lines changed

‎Documentation/Global/Page/Index.rst‎

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,75 @@
1-
.. This reStructured text file has been automatically generated, do not change.
1+
22
.. include:: /Includes.rst.txt
3+
.. _typo3-fluid-page-viewhelpers:
4+
5+
================
6+
Page ViewHelpers
7+
================
8+
9+
.. versionadded:: 14.0
10+
11+
The Page ViewHelpers provide access to page-level functionality in frontend
12+
Fluid templates. They are used to control aspects of the rendered HTML
13+
document that belong to the page itself rather than to individual content
14+
elements.
15+
16+
Typical use cases include:
317

4-
====
5-
Page
6-
====
18+
* setting the document title
19+
* defining SEO and social media meta tags
20+
* injecting additional markup into the HTML `<head>` section
721

22+
The Page ViewHelpers are designed to be used together and integrate with
23+
TYPO3’s frontend rendering and MetaTagManager systems.
24+
25+
For detailed information about each ViewHelper and its arguments, refer to
26+
the individual reference pages:
827

928
.. toctree::
1029
:titlesonly:
1130
:glob:
1231

1332
*/Index
1433
*
34+
35+
.. _typo3-fluid-page-viewhelpers-integrated-example:
36+
37+
Setting meta data in a PAGEVIEW layout via Fluid
38+
================================================
39+
40+
The following example shows how multiple Page ViewHelpers can be combined
41+
in a `PAGEVIEW <https://docs.typo3.org/permalink/t3tsref:cobj-pageview>`_
42+
layout to manage common page-level concerns such as the document title,
43+
SEO-related meta tags, OpenGraph and Twitter / X meta data, as well as
44+
favicon and other `<head>` assets.
45+
46+
This approach is typically used in site packages and custom frontend
47+
rendering setups where page title, meta data, and head markup are defined
48+
centrally in a layout.
49+
50+
.. literalinclude:: _codesnippets/_PageLayout.html
51+
:caption: EXT:my_extension/Resources/Private/PageView/Layout/Default.html
52+
53+
The example above combines several Page ViewHelpers, each responsible for a
54+
specific page-level concern:
55+
56+
* `Page.title ViewHelper <f:page.title> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-page-title>`_
57+
Used to compose a dynamic document title from multiple values instead of
58+
relying on the default page title.
59+
60+
* `Page.meta ViewHelper <f:page.meta> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-page-meta>`_
61+
Used to define SEO-related, OpenGraph, and Twitter / X meta tags directly
62+
in the Fluid template.
63+
64+
* `Page.headerData ViewHelper <f:page.headerData> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-page-headerdata>`_
65+
Used to inject additional markup into the HTML `<head>` section, for
66+
example favicon and touch icon definitions.
67+
68+
In addition, the example uses format ViewHelpers to normalize content before
69+
it is used in titles and meta tags:
70+
71+
* `Format.stripTags ViewHelper <f:format.stripTags> <https://docs.typo3.org/permalink/t3viewhelper:typo3fluid-fluid-format-striptags>`_
72+
Removes HTML markup from rich text values.
73+
74+
* `Format.html ViewHelper <f:format.html> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-format-html>`_
75+
Renders HTML content safely in the page body.

‎Documentation/Global/Page/Meta.rst‎

Lines changed: 129 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.. This reStructured text file has been automatically generated, do not change.
2-
.. Source: https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Page/MetaViewHelper.php
3-
4-
:edit-on-github-link: https://github.com/TYPO3/typo3/edit/main/typo3/sysext/fluid/Classes/ViewHelpers/Page/MetaViewHelper.php
51
:navigation-title: page.meta
62

73
.. include:: /Includes.rst.txt
@@ -12,5 +8,133 @@
128
Page.meta ViewHelper `<f:page.meta>`
139
====================================
1410

11+
.. versionadded:: 14.0
12+
13+
.. typo3:viewhelper:: page.meta
14+
:source: /Global.json
15+
:display: tags, gitHubLink
16+
:noindex:
17+
18+
.. contents:: Table of contents
19+
20+
The Fluid ViewHelper :html:`<f:page.meta>` allows meta tags to be defined
21+
directly within Fluid templates by leveraging TYPO3's MetaTagManager API.
22+
23+
This allows frontend rendering logic—such as Extbase plugins, Fluid-based
24+
content elements, or site package templates—to control meta tags (for
25+
example descriptions, OpenGraph data, and social media cards) directly in
26+
Fluid templates, without requiring custom PHP logic.
27+
28+
Meta tags can be defined and managed directly in Fluid templates, reducing
29+
or eliminating the need for additional TypoScript configuration in many
30+
common scenarios.
31+
32+
.. _typo3-fluid-page-meta-usage-examples:
33+
34+
Using the `<f:page.meta>` ViewHelper
35+
===================================
36+
37+
The following examples demonstrate common use cases for the
38+
:html:`<f:page.meta>` ViewHelper in frontend Fluid templates. They show how
39+
meta tags can be defined, extended, and replaced directly in Fluid while
40+
integrating with TYPO3's MetaTagManager system.
41+
42+
.. _typo3-fluid-page-meta-example-detail-view:
43+
44+
Set meta tags in a detail view template
45+
--------------------------------------
46+
47+
Meta tags can be defined directly in a Fluid template, for example in a
48+
detail view that renders a single domain object.
49+
50+
.. code-block:: html
51+
:caption: EXT:my_extension/Resources/Private/Templates/Item/Show.html
52+
53+
<f:page.meta property="description">{item.description}</f:page.meta>
54+
<f:page.meta property="og:title">{item.title}</f:page.meta>
55+
<f:page.meta property="og:type">article</f:page.meta>
56+
57+
<h1>{item.title}</h1>
58+
<p>{item.description}</p>
59+
60+
61+
.. _typo3-fluid-page-meta-example-opengraph:
62+
63+
Define OpenGraph and Twitter / X Card meta tags
64+
-----------------------------------------------
65+
66+
OpenGraph and Twitter / X Card meta tags can be used to control how pages
67+
are displayed when shared on social media platforms.
68+
69+
.. code-block:: html
70+
71+
<f:page.meta property="og:title">My Article Title</f:page.meta>
72+
<f:page.meta property="og:description">Article description</f:page.meta>
73+
<f:page.meta property="twitter:card">
74+
summary_large_image
75+
</f:page.meta>
76+
77+
78+
.. _typo3-fluid-page-meta-example-subproperties:
79+
80+
Use sub-properties for complex meta tags
81+
----------------------------------------
82+
83+
Some meta tags, such as image-related tags, support additional
84+
sub-properties like dimensions or alternative text.
85+
86+
.. code-block:: html
87+
88+
<f:page.meta property="og:image"
89+
subProperties="{width: 1200, height: 630,
90+
alt: 'Article image'}">
91+
{item.image.url}
92+
</f:page.meta>
93+
94+
95+
.. _typo3-fluid-page-meta-example-custom-types:
96+
97+
Define custom meta tag types
98+
----------------------------
99+
100+
Custom meta tags can be defined by explicitly specifying the meta tag type
101+
attribute.
102+
103+
.. code-block:: html
104+
105+
<f:page.meta property="author" type="name">John Doe</f:page.meta>
106+
<f:page.meta property="robots" type="name">
107+
index, follow
108+
</f:page.meta>
109+
110+
111+
.. _typo3-fluid-page-meta-example-replace:
112+
113+
Replace existing meta tags
114+
--------------------------
115+
116+
Existing meta tags with the same property can be replaced explicitly when
117+
required.
118+
119+
.. code-block:: html
120+
121+
<f:page.meta property="description" replace="true">
122+
Override any existing description
123+
</f:page.meta>
124+
125+
126+
All examples shown above integrate with TYPO3's MetaTagManager system and
127+
respect configured meta tag managers, priorities, and rendering rules.
128+
This enables a template-centric approach to managing SEO-relevant meta
129+
data that reflects the rendered content accurately.
130+
131+
.. _typo3-fluid-page-meta-arguments:
132+
133+
Arguments of the `<f:page.meta>` ViewHelper
134+
===========================================
135+
136+
.. include:: /_Includes/_ArbitraryArguments.rst.txt
137+
15138
.. typo3:viewhelper:: page.meta
16-
:source: ../../Global.json
139+
:source: /Global.json
140+
:display: arguments-only

‎Documentation/Global/Page/_codesnippets/_PageLayout.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
<f:page.title>{page.title} - {page.subtitle} - {site.name}</f:page.title>
3+
4+
<f:page.meta property="description">
5+
{page.description -> f:format.stripTags()}
6+
</f:page.meta>
7+
<f:page.meta property="og:title">{page.title} - {page.subtitle} - {site.name}</f:page.meta>
8+
<f:page.meta property="og:type">article</f:page.meta>
9+
<f:page.meta property="og:description">
10+
{page.description -> f:format.stripTags()}
11+
</f:page.meta>
12+
13+
<f:page.headerData>
14+
<link rel="icon"
15+
href="{f:uri.resource(
16+
path: 'Icons/favicon.ico',
17+
extensionName: 'my_extension'
18+
)}"
19+
sizes="any" />
20+
<link rel="apple-touch-icon"
21+
href="{f:uri.resource(
22+
path: 'Icons/apple-touch-icon.png',
23+
extensionName: 'my_extension'
24+
)}" />
25+
</f:page.headerData>
26+
27+
<h1>{page.title}</h1>
28+
{page.description -> f:format.html()}
29+
<main>
30+
<f:render section="Main"/>
31+
</main>

0 commit comments

Comments
 (0)