>Quick Guide to Add Meta Tags to The Head Block in Magento 2

Quick Guide to Add Meta Tags to The Head Block in Magento 2

Hi all of you guys, 

The <head> element of the HTML page contains different meta tags, the JS and CSS file definitions, and the JS code snippets. In Magento 2, if you desire to insert meta tags into the <head>, you are required to use some custom code snippets. 

Get started now!

You need to create the extend file from the custom theme to add the <meta> tag into the <head> element in your layout.

app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml.

Or you can use head.additional to add a new block with custom class and custom phtml:

<referenceBlock name="head.additional"> <block 
class="Vendor\Module\Block\CustomHead" name="custom_head" 
template="Vendor_Module::custom_head.phtml"/> </referenceBlock>

In default class renders tag meta: \Magento\Framework\View\Page\Config\Renderer.

This class can render 5 types of meta and capture them all: 

  • og: is a protocol used to communicate between your website and social networks. For example, some properties of open graph Og: title, Og: type, Og: description, Og: image, Og: url …
  • charset: is used to specify the character encoding for HTML documents
  • content_type: is used to declare the language display code for the website
  • x_ua_compatible
  • media_type: is used to specify meta types to link
  • “Default” case: uses Magento’s default meta tags like meta title, meta description.

Try to use the following code to add into your theme layout: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
    <!-- This will create a tag like '<meta 
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' -->
    <meta name="x_ua_compatible" content="IE=edge,chrome=1"/>
    <!-- This will create a tag like '<meta property="og:type" 
content="article"/>'' -->
    <meta name="og:type" content="article"/>
    <!-- This will create a tag like '<meta charset="UTF-8">' -->
    <meta name="charset" content="UTF-8"/>
    <!-- This will create a tag like '<meta http-equiv="Content-Type" 
content="content-type-value"/>' -->
    <meta name="content_type" content="content-type-value"/>
    <!-- This tag will not render (see 
\Magento\Framework\View\Page\Config\Renderer for details) -->
    <meta name="media_type" content="any-value"/>
    <!-- This will create a tag like '<meta name="my_custom_type" 
content="my_custom_value"/>' -->
    <meta name="my_custom_type" content="my_custom_value"/>
   </head>
</page>
< Previous Post
Next Post >