Using metadata correctly in TYPO3

Last modified:

Metadata provides various information about a single web page delivered by the web server. As part of the header area in the delivered HTML code, they are usually not visible to visitors (at least not directly). For machines (search robots, reading devices, etc.), however, they are an important tool for interpreting the page. We present the most important parameters below. The "most important" means that there are others, but they tend to play a minor role (e.g. the favicon, manifest file, meta tags for keywords, publisher, etc.), are set by default (e.g. robots instructions) or are purely technical in nature (e.g. charset, viewport, etc.). Also "out-of-scope" are the structured data described on a separate page.

 

Page title and description

Besides the URL, the metadata "Title" and "Description" are probably the most important OnPage parameters in search engine optimisation and have a direct influence on the appearance in search engine results (SERP):

The following applies to the two metadata:

 

Title:

  • Short meaningful and correct description of the respective page content
  • Avoid repetitions such as the company name
  • Total length should be between 50-60 characters
  • Important keyword(s) rather at the beginning
  • High influence on click-through-ratio (CTR), because of prominent display in SERP (blue part in figure above).)

Description:

  • 1-2 sentences with a likewise meaningful and correct description of the content
  • Approx. 160 characters
  • Each description should be unique
  • Use emoji icons as eye-catchers (but sparingly)
  • when appropriate.
  • Influence on CTR, as visible as teaser text in SERP (black text in image above).

In TYPO3, the title and description are entered under the page properties in the "SEO" tab (note: the system extension seo must be activated for this):

 


Social Media Integration

OpenGraph-Tags

With the OpenGraph tags you define how the link to one of your web pages looks on social media platforms:

 

You can define, among other things:

 

  1. Which image should appear
  2. What the title should be
  3. Which description should be given

TwitterCards

TwitterCards are basically the same as the OpenGraph tags. Only specifically for Twitter:

 

You can test the display here, among other places:

 

Setup in TYPO3

Sowohl TwitterCards as well as the OpenGraph metatags can be easily integrated into TYPO3 via the "Social media" tab:


Canonical Tag

With the Canonical tag, you specify the URL of the page from which the original content originates. As a rule, this is the page itself. Many websites can be reached via different addresses:

 


Examples:

www.meineseite.de/ueber-uns.html


www.meineseite.de/ueber-uns.html


meineseite.de/ueber-uns.html


...

As long as they all point to only one address (e.g. through a 301 redirect), this is not a problem and a Canonical tag is not required. However, it can happen that several addresses output the same content. This can be recognised by the fact that the address remains in the URL browser bar and no forwarding takes place. This often happens with temporary (working) domains of the provider (e.g. "p123456-.mittwaldserver.info").

In such cases, search engines do not "know" which URL is to be indexed or, in the worst case, assume "duplicate content", which can lead to a downgrade in the search engine ranking(due to this risk, the tag is dealt with here in the first place).

In TYPO3, the Canonical tag is automatically set by the system extension seo to the URL according to the site configuration (protocol + domain) and the slug (see page properties->General). So by default it points to itself with the correct URL.

You can also set the Canonical URL manually (Page properties ->SEO), which is useful, for example, if you copy content from other pages:


hreflang-Tag

The hreflang tag is primarily used to inform search engines about versions of a page in other languages. In this way, the pages are given more consideration when searching in other languages. A tag is assigned for each language. In addition, the default language is defined with "x-default" (for all undefined languages).

 

Examples:
<link rel="alternate" hreflang="en-US" href="https://www.wacon.de/customize"/>
<link rel="alternate" hreflang="da-DK" href="https://www.wacon.de/da/dansk-customize"/>
<link rel="alternate" hreflang="de-DE" href="https://www.wacon.de/de/german-customize"/>
<link rel="alternate" hreflang="x-default" href="https://www.wacon.de/customize"/>

The hreflang tag is automatically output according to the definitions of the existing website languages under the site configuration:

Under Language Tag, enter the language abbreviation  according to ISO 639-1 (see: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) and optionally a region according to ISO 3166-1 Alpha 2 (see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ).

 

Examples:

 

en   English-language content (region does not matter)
en-US English-language content for visitors from the USA
de-AT German-language content for visitors from Austria

Google search engine optimisation

As an internet agency, we deal intensively with the topic of machine readability of websites and thus also on the question of how you can achieve an optimal Seo for Google. We offer interested parties using TYPO3 a free short website audit. Simply contact us.