I need to add the article image to the post shared on facebook and twitter, this is done by meta tags added in the as shown below
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
{# RIGHT HERE #}
<meta name='og:image' content='{{ file_url(element['#object'].field_image.0.entity.uri.value) }}'>
<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@nestle" />
<meta name="twitter:title" content="Article Picture" />
<meta name="twitter:description" content="A description" />
<meta name="twitter:image" content="{{ file_url(element['#object'].field_image.0.entity.uri.value) }}" />
<meta name="twitter:url" content="{{ base_path }}" />
</head>
I need to add meta tags in the in the html.html.twig file, the problem is those meta tags depend on the article being shared because I need to get the URL of the image, I cannot figure out how to do it such that a block of code written in the node.html.twig file would be placed in the in the html.html.twig file.
WHAT I TRIED i tried adding a block in start of node file and extending the html.html file node--article.html.twig (start of file) :
{% extends "html.html.twig" %}
{% block metablock %}
<meta name='og:image' content='{{ file_url(element['#object'].field_image.0.entity.uri.value) }}'>
<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@nestle" />
<meta name="twitter:title" content="Article Picture" />
<meta name="twitter:description" content="A description" />
<meta name="twitter:image" content="{{ file_url(element['#object'].field_image.0.entity.uri.value) }}" />
<meta name="twitter:url" content="{{ base_path }}" />
{% endblock %}
then calling this block from the html.html file like this:
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
{# RIGHT HERE #}
{{ block('metablock') }}
</head>
But this gives an error
The website encountered an unexpected error. Please try again later.Twig_Error_Syntax: A template that extends another one cannot include contents outside Twig blocks.
I tried putting the rest of code in node--article inside a block, this does work but the metablock block gets placed in the start of every article viewport (Not what I intended) I need it to be placed only in the head tag.
Hope I was clear enough, to summarize, How can I place meta tags in the head from the node--article.html file, not the html.html file.
