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.
