If you are interested in knowing more about SEO, there is no better way to start than with Meta tags. According to Wordstream: Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s code.
In short, Meta tags are key components for all search engines that appear in the HTML code of a website page and tell search engines what your page is about.
Meta tags are added in the <head> section of an HTML web page and they are the “Legally” Hide Words on Your Pages for Search Engines.
Every platform has a different solution for adding Meta tags. WordPress, for example, has FREE plugins to choose from. I personally recommend All in One SEO Pack and Yoast SEO. Both are popular and the most used WordPress plugins of all time and you can choose either according to your needs.
Do Meta Tags matter for SEO in 2018?
Yes, they do, but not all Meta tags can help you in 2018. In my experience, if you want to rank high in Google in 2018, then you also need to focus on high-quality content and user satisfaction. The main goal of this post is to explain which Meta tags are useful and which are unimportant. (See below: There are a few tags which we can call bad Meta tags and should simply be ignored).
“Meta Tags can affect the way that users see your site in the search results and whether or not they actually click through to your site.” John Mueller 2017
How to check meta tags on a site?
If you want to check the Meta tags for any page, just right-click anywhere on the page and select “View Page Source.” You can also use tools like SEMRush (specifically the SEMRush Audit Tool), and Screaming Frog to check the Meta tags on any site.
The Most Important Meta Tags For SEO in 2018
For any startup business or running website, I personally focus on the 8 major Meta tags which can improve the optimization of your site.
I am sharing my opinions about them all below:
- Title tag
- Meta description
- Canonical Tag
- Alternative text (Alt) Tag
- Robots meta tag
- Social Media Meta Tags (Open Graph and Twitter Cards)
- Header tags
- Responsive Design Meta Tag
Title tag
A title tag is the very first HTML element that specifies your web page for search engines and to visitors. The Title element is supported all browsers including Chrome, Firefox Safari etc.
Add your title tag in the <head> section of your site.
<head>
<title>This is a Title Sample</title>
</head>
Optimal length for the Title tag: Google typically shows 55-64 characters (Keep it under 60 characters) in the Title tag.
Title tags are important for SEO and visitors and it shows up in the SERPs and in Browser Tabs.
Browser Tab Title Tag shown below for SEMrush post:
E.g. SERP Title Tag shown below:
According to MOZ: Title tags are the second most important on-page factor for SEO, after content
You cannot add more than one <title> element in your web page. w3schools
Key Points for writing a good title tag:
- Add “modifiers” to your title tag –
How to |The current year | Review |Best | Tips | Top |Find | Buy | Easy - Embed Long Tail Keywords In Title Tags
- Add numbers to your title –
9 Important HTML tags for your website to improve your SEO - Start your title tag with your main targeted keyword
- Don’t stuff your keywords
- Every page should have a unique title tag.
Meta description
A Meta Description is an HTML element that summarizes your webpage. Search engines typically show the Meta description in search results below your Title tag.
Code sample
<head>
<meta name="description" content="This is a meta description Sample. You can add up to 300 characters.">
</head>
Google does not use the Meta description as a ranking signal but it still it has a massive effect on your page CTR, or clickthrough rate because it shows up in search results.
Optimal length for the Description tag: in December 2017, Google officially increases length of snippets in search results. Your Meta descriptions should be between 50–300 characters.
Google generated Description in Search Result
Key Points to writing a good Description tag:
- Don’t overly focus on the number of characters because Google might pull description text from your content based on a user’s query.
- Do not add duplicate Meta Descriptions
- Add a clear Call-to-action (CTA) in your descriptions like Apply today, Check out, Contact us today etc. Check out 100 Call to Action Keywords for Marketing Campaigns.
- Add targeted keywords in your descriptions
- Strategically provide a solution to a problem
- Write for your users and encourage them to click with specific and relevant content
- Add any discounts or offers you have going on
- Show empathy while writing your Meta Descriptions
Canonical Tag
The Canonical tag is an HTML link tag with the attribute “rel=canonical” and is used if you have a single page URL that has the same content as other multiple page URLS.
By implementing the Canonical tag in the code, we are telling search engines that this URL is the main page and to avoid indexing other duplicate page URLS.
A canonical tag Syntax:
<link rel="canonical" href="http://example.com/" />
Where should the canonical tag be used?
Multiple URLs:
http://www.example.com
https://www.example.com
http://example.com
http://example.com/index.php
To a search engine crawler the above URLs are considered to be 4 copies of the Home page. The canonical tag was created to fix this problem.
Session ID URLs
These are the automatic system generated URLS and commonly generated due to the tracking URLs, breadcrumb links and permalinks in CMS
http://example.com/properties/villa-331-luxury-rental?partnerID=18
http://example.com/target.php?session_id=rj3ids98dhpa0mcf3jc89mq1t0
Mobile URL – when using a special URL (m. example.com) for the mobile version of your website.
SEMrush itself has 2 versions – one is a mobile version and the other a desktop version.
For the mobile and desktop versions SEMrush is using the following canonical tag
<link rel=”canonical” href=”https://www.semrush.com/” />
Alternative text (Alt) Tag
Alt text is important for any images because search engines cannot read images, and you need to add proper Alt text to the images so that search engines can consider your images.
Syntax for Alt Text:
<img src=” http://example.com/xyz.jpg” alt=”xyz” />
In addition, the key points to consider while creating alt-tags for images:
- Always use a proper description; never stuff your keywords in this tag.
- All images should have informative filenames.
- Alt text needs to be short, clear and to the point.
- Always use the Original, Right type of image, as this is an essential step towards success.
- Create an image sitemap
- Use 50-55 characters (upto 16 words) in the alt text
- Use an Optimal File Size without losing its quality for faster page loading speed
Robots Meta tag
The Robots Meta tag is an HTML tag that provides instructions to web crawlers either to index or not index web pages.
Meta robots tags have four main values for search engine crawlers:
FOLLOW –The search engine crawler will follow all the links in that webpage
INDEX –The search engine crawler will index the whole webpage
NOFOLLOW – The search engine crawler will NOT follow the page or any links on that webpage
NOINDEX – The search engine crawler will NOT index that webpage
Syntax
<meta name=”robots” content=”noindex,nofollow”> Means not to index or not to follow this webpage.
<meta name=”robots” content=”index,follow”> Means index and follow this webpage.
Note: The robots Meta tag should be placed in the <head> section of your webpage.
Social Media Meta Tags (Open Graph and Twitter Cards)
Open Graph Tags:
Open Graph Meta tags are designed to promote integration between Facebook, LinkedIn, Google and your website URLS that you shared on these platforms.
Here is a sample of how Open Graph tags look like in standard HTML:
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property=”og:description” content=”DESCRIPTION OF PAGE CONTENT” />
<meta property=”og:image” content=”LINK TO THE IMAGE FILE” />
<meta property=”og:url” content=”PERMALINK” />
<meta property="og:site_name" content="SITE NAME" />
Twitter Cards:
Twitter cards work in a similar way to Open Graph except you add these special Meta tags only for Twitter. Twitter will use these tags to enhance the display of your page when shared on their platform.
Here is a sample of How Twitter card look like in standard HTML:
<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name=”twitter:image” content=”LINK TO IMAGE”>
<meta name=”twitter:site” content=”@USERNAME”>
<meta name="twitter:creator" content="@USERNAME">
Both these Social Media Meta Tags look like:
Header tags
Header tags are used for headings creation i.e. by using these we can apply font changes.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
Here is an example of how we can use header tags taken from https://www.semrush.com/blog/shopify-site-speed/
<h1> 9 Tips for Boosting the Speed of your Shopify Website </h1>
<p>Paragraph of content</p>
<p>another paragraph of content</p>
<h2>Performance Analysis</h2>
<p>Paragraph of content</p>
<h3>Analyzes the Mobile and Desktop Performance with PageSpeed Insights</h3>
Important Point to consider: Use as Many H1 Tags as You Want source
Responsive Design Meta Tag
The final important Meta tag is the responsive design Meta tag, which we call “Viewport Meta Element”. By using the viewport meta tag you can turn your web pages into responsive web pages on mobile browsers.
This viewport element is included in the head section of your web page.
Syntax
<meta name="viewport" content="width=device-width,initial-scale=1">
If you want to learn more about responsive design Meta tags, head over to this nicely written post here
Note: Do not use this responsive Meta tag if your website pages are not designed to be responsive, as it will make the user experience worse.
There are few tags that we can call bad Meta tags and should simply be ignored:
- Keywords tag- Google does not use the keywords Meta tag in web ranking Source
- Revisit after – This HTML tag is a command to the robots to return to a page after a specific period. This tag is not followed by any major search engine and has no value in SEO. It is better to avoid this tag and leave it to the search engines to decide how to crawl your website. Syntax: <meta name=”revisit-after” content=”7 days” />
- Expiration/date – This tag defines the expiration date of your page. Personally I would not recommend this. Just remove it. Syntax: <meta http-equiv=”Expires” content=”Fri, 28 April 2018 23:59:59 GMT”>
- Site verification- Just Ignore this. You can verify your site using Google search console and the Bing webmaster tool.
- Copyright- Every site puts the copyright in their web page footer so why would you need a separate tag. A big No for this tag.
- Distribution – The “distribution” value is supposedly used to control who can access the document, typically set to “global.” It’s inherently implied that if the page is open (not password-protected, like on an intranet) that it’s meant for the world. Go with it, and leave the tag off the page. Source
- Generator – useless tag.
- Cache control –This Tag allows web publishers to define how often a page is cached. Generally, these are not required; we can simply use the HTTP header instead of this HTML tag.
- The ODP Robots Meta Tag – Google no longer follows this Meta tag.
Google Stops Support for NOODP Robots Directive & Taking DMOZ Description –Source
- Geo Meta Tags- Google does not use Geo Meta Tags to Rank Pages.
We don’t use geo meta tags at all for search, probably never have. Use hreflang + normal geotargeting – Source
So, these are the few HTML tags which we should consider or simply ignore. Now you can easily use the relevant HTML Meta tags intelligently. Don’t forget to comment below and share your views on HTML Tags. Thanks for reading.
