Use Coupon Code ILOVEJENIUS for 10% off

A information to HTML and meta tags in 2018

We’ve beforehand coated HTML meta tags and meta tags and in some depth, however as with most issues in web optimization, it’s an ever-changing panorama and the accepted utilization and definitions of tags is usually altering.

It’s value mentioning that for those who’re on this realm of web optimization optimization, you also needs to be getting the low-down and implementing structured information to make sure crawlers get the perfect expertise doable.

HTML meta tags vs meta tags: what’s the deal?

Firstly, it’s time to clear up a few of the confusion round HTML meta tags and meta tags.  The distinction between the 2 tag sorts is basically arbitrary, with the syntax for an HTML meta tag which means it’ll include the phrase meta inside it, whereas a tag outlined as a meta tag doesn’t essentially should.

The choice for which do or don’t are outlined by W3C and are open to vary over time, nevertheless, what’s essential for us to recollect is that they each serve the identical goal, that’s which is that they’re used to supply search engines like google and yahoo with details about an online web page

Sidenote: Some folks embrace header tags as meta tags, however as they describe one aspect of a web page, not the contents of a web page as a complete, we’ve determined to go away them out. Nevertheless, it goes with out saying that guaranteeing you’re optimizing your header tags will assist search engines like google and yahoo, and extra importantly customers, perceive what your content material is about.

With that cleared up, we are able to get right down to enterprise and try a choice of each HTML and meta tags that we expect are helpful when performing web optimization.


So to begin off on the flawed foot, the Hreflang tag isn’t technically a tag. It’s an attribute, nevertheless it is a crucial attribute that may assist inform Google which language you’re content material is utilizing on a webpage.

In case you have a web site which makes use of a number of translations, or that serves completely different territories, you must positively use Hreflang to make sure that the proper language model is being served within the right variations of Google. This may also help search engines like google and yahoo rank your content material higher, and extra importantly ensures customers in several territories get the correct expertise.

An instance code snippet for concentrating on a webpage at English language customers within the UK:

Canonical tag

One other essential one is the canonical tag. Set it up incorrectly and also you threat shedding visibility within the SERPs and inflicting actual points in your web site. Used appropriately, nevertheless, it’s an effective way of telling search engines like google and yahoo webpage URL is the defacto model. It’s the easiest way to keep away from duplicate content material points in your web site, brought on by search engines like google and yahoo crawling a number of URLs that include the identical or near an identical content material on them.

On the whole, if a search engine finds a number of URLs with an identical content material, it’ll have a more durable job figuring out which is the unique and which is the duplicate. This could result in decrease rankings for each, or worse, an essential web page gained’t rank.

An instance code snippet for canonical tag use:

Content material sort tag

The content material sort tag is used for outlining a pages content material sort and the character set it makes use of. Utilizing this helps your browser perceive and decode a web page, and is due to this fact essential.

An instance code snippet for content material sort tag use:

Title tag

In all probability one of many extra recognizable and used tags for anybody finishing up web optimization work. The title tag is used to specify what the net web page is about. They’re displayed in your browser tab to offer customers a steer, and extra importantly are utilized by search engines like google and yahoo to generate the outcomes we see within the SERPs.

From an web optimization perspective, optimizing your title tag to include matters/key phrases details about the contents on the web page may also help to enhance your rankings for these matters/key phrases. At the moment you possibly can count on Google to show between 50-60 characters of your title earlier than it’s truncated, so control size when writing these.

An instance code snippet for the title tag, which sits inside the head tag on the prime of your webpage: | The perfect examples on the internet

Meta description tag

Much like the title tag, the meta description tag is well-known and gives you with a chance to inform search engines like google and yahoo and customers within the SERPs what your webpage content material is about. Whereas not a direct rating issue, you must optimize your meta description to supply a compelling succinct account of your net pages content material.

If Google doesn’t suppose you’ve performed a adequate job, they could select to exchange your meta description tag with their very own interpretation, usually utilizing content material from the opening few paragraphs of your web site.

An instance code snippet for meta description tag:

Viewport tag

The viewport tag is a helpful tag for serving to browsers perceive and management the size of your net web page.

Up to now, there was no want for this tag as everybody seen webpages on desktop on comparable sized shows, however with the rise and rise of cell and pill utilization, a lot of which have completely different dimensions, it’s now extra essential to make sure that you’re telling the browser this data.

Right implementation of the viewport tag will be sure that customers expertise your web site within the right manner, and if there are

An instance code snippet for the viewport meta tag:

Robots meta tags

There’s a lot of robotic meta tags you need to use, all of which is able to assist search engine crawlers do their job of crawling and indexing net pages throughout the web. Not all search engines like google and yahoo will observe all instructions, however beneath are a number of examples of robotic meta tags and what they ask the crawlers to do:

Nofollow Tells crawlers to not observe any of the hyperlinks listed on that web page, and likewise to not cross any fairness to linked web page
Noindex Tells crawlers to not index that web page
Noimageindex Tells crawlers to not index photos from that web page
Noarchive Tells crawlers to not embrace a cached model

An instance code snippet for the robotic meta tag:

Open graph (OG) meta tags for social

Lastly, we now have the OG meta tags for social. Whereas much less a direct focus for web optimization, guaranteeing you will have appropriately carried out OG meta tags for social may also help guarantee your content material appears to be like nice when it’s shared, may also help to enhance engagement with posts and in the end enhance visitors.

For sure, there are a number of different tags you need to use in your web site, and this record isn’t exhaustive, however hopefully provides you a steer on a few of the extra essential and helpful tags you need to use in your web site to make it the expertise higher for each search engines like google and yahoo and crawlers.

Joshua is an web optimization specialist and strategist at atom42

Leave a Reply