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.
Hi,
I’m trying to add the following meta tag to the head section in customer_account_login.xml ONLY. Adding
meta name=”robots” content=”NOINDEX,NOFOLLOW”
in the head of the above XML adds the tag successfully, however it breaks the recaptcha. Can the above method be used to add the meta tag without breaking recaptcha? If so, then can you kindly let me know in detail on how to accomplish that since I don’t have much knowledge of custom modules. Would be grateful. Thanks.