Back to top

SEO Meta Tags for Web Designers

metatags for web designers

One of my adages throughout everyday life, and in business is this: “If Google guides you to accomplish something, you better complete it.”

What’s more, with regards to utilizing HTML meta labels for SEO, none of us ought to mess around.

All things considered, you know how it is with Google search. The calculations are continually changing and what Google esteems significant one year effectively falls by the wayside the following. Which is the reason a portion of the meta labels you may run into is just inheritance remainders of what Google used to think about?

This guide will assist you in concentrating on the meta labels you completely need to utilize and what you can do with them.

What Are HTML Meta Tags?

The head of a web page contains a ton of data about the substance discovered there. This is the place you’ll discover your HTML meta follows alongside any CSS or JavaScript joins that apply to the page.

Here’s a case of what the looks like for an example post:

HTML-Meta-Tags

 

You can gather a couple of significant insights regarding the page just from this bit:

  • The (meta) title
  • The meta description
  • The meta content sort and viewport

These are all meta labels. More often than not, they’re written in HTML as a name/esteem pair. For example

<meta property="og:title" content="15 Best CSS Libraries for 2019"/>

Basically, meta labels are just information about your web page’s information. They never appear on the page. They’re simply out of sight, hanging tight for search bots to recognize the HTML and use it to improve the page’s query output. They’re likewise helpful for web browsers, social media channels, RSS that channel these subtleties (and show the substance) to users.

Which Meta Tags Do You Need to Use?

One could contend that all meta labels perceived by Google and other web crawlers merit utilizing. Be that as it may, as with all that you do in web design and development, you should pick your fights admirably.

In this way, as opposed to invest your energy filling your web pages with each meta label conceivable, acclimate yourself with which ones are accessible and which of them merit utilizing.

TITLE

HTML test

<title>5 Ways to Beef Up Your WordPress Security Today</title>

What does it do?

This shows the name of the page.

Do you truly require it?

Truly, this one is non-debatable as it tells web crawlers what the name of the page is.

This label proves to be useful on the off chance that you need to tailor your title explicitly for indexed lists, as well. Along these lines, suppose you composed a misleading content title with the goal that guests who see it on the site are constrained to click. Something like:

Instructions to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend

That title string is 98 characters in length and it is highly unlikely Google could ever show it in full. As opposed to change the title for your site, you can utilize the title tag to give Google one that is more up to its measures, as:

<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>

That is 56 characters, inside Google’s title cutoff, and works similarly just as the first

DESCRIPTION

HTML test

<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">

What does it do?

This is a short outline of what’s to be found on the page. In search, this is the page portrayal that shows up underneath the page title and URL.

Do you truly require it?

That’s right, this is another fundamental meta tag.

On the off chance that you surrender it over to Google to create a depiction for the page, it will more than likely be just the initial 160 characters of what it finds there. Furthermore, on the off chance that you have promotions at the highest point of the page, picture alt content, or whatever else its machines can peruse, you may stall out with a bad meta portrayal.

Along these lines, set aside the effort to review one.

CHARACTER SET

HTML test

<meta charset="UTF-8">

What does it do?

This metatag characterizes which character set the program should use to decipher the substance.

Do you truly require it?

UTF-8 isn’t the main character set nor is it all-around satisfactory. Along these lines, ensure you’ve characterized the default character set for your website utilizing this meta tag.

In case you’re uncertain if your website needs an alternate character one, allude to this rundown. It’s sheltered to state that if the website is to be deciphered for a global crowd, you’ll unquestionably need to utilize an alternate charset tag than UTF-8.

HREFLANG

HTML test

<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />

What does it do?

This label discloses to Google which language or territorial lingo the substance of the page is written in, so it can demonstrate it to the correct users.

Do you truly require it?

There are a couple of motivations to utilize this meta tag:

  1. At the point when you’ve manufactured a universal website with various interpreted forms;
  2. At the point when you’ve composed the substance in a particular lingo, similar to en-us versus en-gb;
  3. At the point when your page contains a blend of dialects or lingos and you need every one of them to be identified.

VIEWPORT

HTML test

<meta name="viewport" content="width=device-width, initial-scale=1">

What does it do?

It gives guidance on how Google should render your page on all devices, however, it’s particularly significant in this versatile first world.

Do you truly require it?

Indeed. The viewport meta tag is one that Google has put forth an admirable attempt to clarify. Fundamentally, in the event that you do exclude it, or it’s utilized erroneously, you could disturb the survey understanding for users on cell phones.

That is the reason Google prescribes setting the substance to width=device-width, introductory scale=1 unfailingly. In the event that you attempt to present factors like least scale, you could hurt the presence of your website as it changes from something as straightforward as picture direction to the scene.

CANONICAL LINK

HTML test

<link rel="canonical" href="https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security" />

What does it do?

At the point when you have copy content on your website or pages that are fundamentally the same as each other, the authoritative meta label discloses to Google which page is the first and ought to have traffic headed to it.

Do you truly require it?

Google doesn’t warmly embrace copy content. Yet, suppose your “5 Ways to Beef Up Your WordPress Security Today” piece is a modify of a post called “7 Ways to Beef Up WordPress Security” from 2015.

As opposed to letting Google punish you for having carbon copy content on your website (and, along these lines, attempting to rank twice for something very similar), you’ll utilize this meta tag to show Google where the first lives.

This would likewise prove to be useful in the event that you changed your URL structure and need to ensure all traffic goes to the most current connection.

ROBOTS

HTML test

<meta name="robots" content="noindex,nofollow">

Or on the other hand:

<meta name="googlebot" content="noindex,nofollow">

What does it do?

The robots meta labels tell-all pursuit bots (“robots”) or explicit crawler bots (“googlebot”, “bingbot”, “duckduckbot”, and so.) on the most proficient method to treat a page. It, as a rule, has to do with how a page ought to be ordered.

Do you truly require it?

As a matter of course, web indexes are going to list and follow connects on each page you make on your website.

There are a couple of reasons why you may guide the web crawlers to do something else:

  • noindex: Use this when you need to conceal a page from search. (Try not to depend on this for security, recollect: it’s just a recommendation.)
  • nofollow: This is valuable for websites that acknowledge content from donors however doesn’t vet the substance. That way, if associate connections are planted on the page, Google won’t tail them.
  • nosnippet or max-scrap: This controls how your content, picture, or video bit shows up in search.
  • noarchive: If there are more seasoned stored adaptations of a page, utilize this to restrict web indexes from indicating them.
  • unavailable_after:[date]: This is a decent one for a constrained advancement, as around Black Friday deals. While you should direct people to the page from October to December, it bodes well to get it out of search once the special seasons are done and the arrangements are never again legitimate.

GOOGLE SITE VERIFICATION

HTML test

<meta name="google-site-verification" content="https://mywebsite.com" />

What does it do?

This is one of the techniques you can use to check your site possession for Google Search Console.

Do you truly require it?

You needn’t bother with this meta tag on the off chance that you’ve picked one of the different alternatives. For example, you can check site proprietorship through your Google Analytics following code or by refreshing your DNS record. In the event that you’d like, you can simply add the HTML meta tag to your header.

TWITTER CARDS AND OPEN GRAPH (SOCIAL MEDIA)

HTML test

<meta property="og:type" content="article" /> <meta property="og:title" content="5 Ways to Beef Up Your WordPress Security Today" /> <meta property=”og:description” content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today." /> <meta property="og:image" content="https://mywebsite.com/media/wordpress-security-lock/" /> <meta property="og:url" content="https://mywebsite.com/blog/5-ways-wordpress-security/" /> <meta property=”og:site_name” content="My Website" />

What does it do?

Open Graph meta labels (like the piece above) advise Facebook and LinkedIn how to show the metadata for a page or post shared on those web-based social networking stages.

Twitter Card meta labels do likewise, with the exception of Twitter and as a rule, request your handle (@) also.

Do you truly require it?

It can help, however, it’s a long way from fundamental. As far as I can tell, when I fill in the fundamental metadata (for example title, meta portrayal, included picture) for a page on my website, that is actually what shows up when I advance it on social.

Resume

This is in no way, shape or forms a comprehensive rundown of the entirety of the meta labels that exist.

For example, you may run into web pages that contain heritage meta labels like the ones that proclaim the creator, copyright, or rating. These are never again fundamental and you shouldn’t burn through your time on them.

What this is, is a thorough rundown of the HTML meta labels you ought to utilize when it’s pertinent to do as such.

Along these lines, centre around telling the web crawlers precisely what they have to list your page while shielding your HTML docs from getting invade by pointless labels.