Magento 2 Add Meta Tag to Head Block? 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 on Magento 2 Add Meta Tag to Head
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.
>>> For more detailed instructions for extending the magento layout, visit BSS Commerce Blog: Magento 2 Extend Layout
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, the 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 to 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>
>>> Transform Your Magento 2 Store: Click Here to Read the Ultimate Magento eCommerce Tutorial!
Conclusion
Magento 2 add meta tag to head block is a crucial step for enhancing SEO and improving your store’s visibility in search engines. By following the right steps, you can easily optimize your site, boost organic traffic, and provide a better experience for both users and search engines.
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.
