How to Add Meta Tags to Header in Magento 2
Vinh Jacker | 12-18-2024
As you might already know, the HTML <head> section of the page includes different meta tags, CSS, JS files definition, JS code’s pieces, etc. Normally, no complex logic is needed to add some proper content there. However, in various situations, we will need to insert several elements which depend on the configuration of the system into the head section.
If you have been working with Magento 1, you will find out that it’s easy to operate with the contents of the head section. However, in the newest Magento version, adding meta tags to the header might be a bit tricky for you. Because of that, in today’s post, I will guide you on how to add blocks and templates, more specifically how to Add Meta Tags to the head section in Magento 2.
Magento SEO Services
by Mageplaza
Let experienced professionals optimize your website's ranking
Learn more
Add Meta Tags to Header
In order to add <meta> tags to your layout’s <head> element, you need to create a theme extending file which is similar to this: app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml.
By default, \Magento\Framework\View\Page\Config\Renderer is the class by which the <meta> tags are rendered by. There are five types of meta, and a catch-all (the default) is rendered by this class:
- og
- charset
- content_type
- x_ua_compatible
- media_type
- “default” case
You can use the following as an examples to include in your layout themes:
<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
Above I have just provided you the method to add meta tags to header in Magento 2. I hope it is helpful for you. Should you have any questions or new ideas, feel free to leave a comment below.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started