Home >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

Add meta tags to head block in Magento 2? How to do it quicker and easier?

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!

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

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.

5 Types Of Meta

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>

Conclusion

This is all about our quick guide to add meta tags to the head block in Magento 2.

BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bringing high-quality products and services to optimize your business effectively. Furthermore, we offer FREE Installation – FREE 1-year Support and FREE Lifetime Update for every Magento extension.

CONTACT NOW to let us know your problems. We are willing to support you every time.

< Previous Post
Next Post >
+ posts