What is meta tag?
It is a specific tag to write your site information inside <head> of HTML.
Visitors don’t see your meta tags, and it doesn’t affect site design.
<!DOCTYPE html>
<html>
<head>
// write here
</head>
<body>
</body>
</html>Meta tags work even inside <body> but you’d better set them up inside <head> unless you have a particular reason.
The list of meta tags you should set
| Tag | Purpose |
|---|---|
| title | page title |
| description | page description |
| charset | page character encoding |
| viewport | setting for mobile devices |
| robots | setting for the google crawler |
| For social network | |
| og:title | page title |
| og:description | page description |
| og:type | page type |
| og:url | page url |
| og:image | thumbnail url |
| og:site_name | website title |
| For Facebook / Twitter | |
| fb:app_id | need to get on facebook for developers |
| fb:admins | need to get on facebook for developers |
| twitter:card | share card type |
| twitter:creator | Twitter account name |
| twitter:title | page title |
| twitter:description | page description |
| twitter:image | thumbnail url |
In the format of actual HTML looks like this.
// HTML
<title>website title</title>
<meta name="description" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta name="fb:app_id" content="">
<meta name="fb:admin" content="">
<meta name="twitter:card" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">I think it’s enough for SEO if you set up these all meta tags. Meta tags for Facebook and Twitter are optional.
I’ll explain respectively.
title
<title>website title</title>Needless to say, this is the title of your website or its page. This is highly important for SEO. The title should include keywords you want the crawler to consider important.
description
<meta name="description" content="50-160 character is the best">This is the tag to describe the website or its page.
It appears under the website name on Google search result.
It’s not considered an important meta tag on the current web. But as long as visitors read it before they click the link, it’s consequently important, right?
50-160 character is the best.
charset
<meta charset="utf-8">This is the one to specify character encoding.
If your website only consists of English you don’t need to set this tag. But no reason NOT to set this up just in case.
It’s not case sensitive.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">This is the setting for mobile devices.
Basically, three settings,
- width
- initial-scale
- shrink-to-fit
You can set many different values for each but I’m not gonna explain all detail this time. The above tag will be OK unless you have specific needs.
robots
<meta name="robots" content="index, follow">On the web, A program called ‘crawler’ is literally crawling the web and checking web pages and evaluating.
That result affects the order of search result.
It means if your website has meaningless pages or low-quality pages your website itself will be evaluated badly eventually.
Setting the robots meta tags can prevent that happens accidentally. You can do that by specifying the page accepts crawler or not.
These are two main settings.
- allow the crawler to index the page (index / noindex)
- allow the crawler to crawl the page (follow / nofollow)
Both are set as ‘true’ by default, so you don’t need to set this tag if you don’t have problems with that.
You can change settings on your needs like this.
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, nofollow">
OGP
<meta property="og:title" content="page title" />
<meta property="og:description" content=page description" />
<meta property="og:type" content="page type" />
<meta property="og:url" content="page url" />
<meta property="og:image" content="thumbnail url" />
<meta property="og:site_name" content="website title" />The post looks nice when you share the link on social networks if you set this tag.
Someone might share the link even though you are not intending to share the link. So it’s worth it to set, isn’t it?
A bit tricky thing here is:
- og:title is the page title.
- og:site_name is the website title.
Don’t be messed up.
og:type has too many types to explain here. Please refer to the official document and set the proper one.
If you get confused just set it as <meta property="og:type" content="website">
Facebook / Twitter
<meta name="fb:app_id" content="facebook for developersで取得する必要あり">
<meta name="fb:admin" content="facebook for developersで取得する必要あり">
<meta name="twitter:card" content="シェアカードの種類">
<meta name="twitter:creator" content="Twitterアカウント名">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページの解説">
<meta name="twitter:image" content="サムネイルのURL"> Lastly, these are specific settings for Facebook and Twitter.
You need to get fb:app_id and fb:admin on facebook for developers
This setting allows you to track much information on Facebook.
The post will look nice already if you set OGP tags, so I think you don’t need to set Facebook tag unless you’re gonna work a lot on Facebook platform.
twitter:card has many types. These two images are the biggest difference.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:card" content="player">
Please refer to official document.
Troublesome but worth it to do
Yeah, I know, these things are troublesome and hard to realize its effects. But it will definitely worth it to do and you can finish it in maybe 30 mins. Let’s have people see your website!
