WIP: Update default meta tags shipped with Sulu

[leon-witlif]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Fixed tickets	#6940
Related issues/PRs	#6940
License	MIT
Documentation PR	Needs to be created when all ToDos are finished

What's in this PR?

Changes what meta tags Sulu renderes by default. As a guide I used the already defined tags used in the sulu-demo. The behavior of what gets outputted can be changed via a new array supplied to the template. For more information on that, see below.

Why?

As pointed out in #6940 the current state is that the default meta tags have to be overwritten with every new instance of Sulu. This new version extends the already existing output and adds additional meta information used by Twitter, Facebook and other social media platforms (e.g. Discord) and improves their social sharing display.

Example Usage

{% embed "@SuluWebsite/Extension/seo_meta.html.twig" with {
    "seo": extension.seo|default([]),
    "content": content|default([]),
    "localizations": localizations|default([]),
    "shadowBaseLocale": shadowBaseLocale|default(),
    "meta": {
        {# Used to configure the default meta tags, possible options: audience, author, copyright, distribution, image, imageFormat, language, publisher #}
        "default": {},
        {# Inherits data from default, but can also be customized with these options: url, type, title, description, image, imageFormat #}
        "twitter": {},
        {# Same as twitter, but a few different options: card, url, title, description, image, imageFormat #}
        "facebook": {},
    }
} %}
{% endembed %}

If a tag should be ommited completely, it can be set to false

"meta": {
    "default": {
        "author": false,
    },
}

Adding now tags could be achieved as follows

{% embed "@SuluWebsite/Extension/seo_meta.html.twig" with {
    ...
} %}
    {%- block twitterTags -%}
        {%- set twitterTags = twitterTags|merge({ "twitter:creator": "@sulu" }) -%}
        {{- parent() -}}
    {%- endblock -%}
{% endembed %}

Special note about how images are handled

In its current state images are loaded with the intern size sulu-400x400-inset which can be changed via the imageFormat variable, in either the default, twitter or facebook key. An image is only rendered if its found in the extensions.excerpt.images array. If there is no image present, you could also define a fallback image via the fallbackImage variable in default, twitter and facebook.

Current output

With the new default configuration the output would look as follows

<title>Homepage</title>
<meta name="description" content="Example description for my homepage">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://sulu-dev.wip/">

<meta name="audience" content="all">
<meta name="distribution" content="global">
<meta name="image" content="https://sulu-dev.wip/uploads/media/sulu-400x400-inset/02/2-Forest.jpg?v=1-0">
<meta name="language" content="en">

<meta name="og:url" content="https://sulu-dev.wip/">
<meta name="og:type" content="website">
<meta name="og:title" content="Homepage">
<meta name="og:description" content="Example description for my homepage">
<meta name="og:image" content="https://sulu-dev.wip/uploads/media/sulu-400x400-inset/02/2-Forest.jpg?v=1-0">

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://sulu-dev.wip/">
<meta name="twitter:title" content="Homepage">
<meta name="twitter:description" content="Example description for my homepage">
<meta name="twitter:image" content="https://sulu-dev.wip/uploads/media/sulu-400x400-inset/02/2-Forest.jpg?v=1-0">

ToDo

• Create a documentation page
• Check if there are more tags that could be added
• Check if there are other/easier ways to extend the template
• Should all of this be enabled by default
• Which defaults should be set in the base.html.twig template
• Test if there are ways to crash the website