Estimated reading time: 15 minutes.
Table of content:
- What is meta tag?
- Why to write your meta description?
- What makes a good meta description?
- Different types of meta tags
- Setting up the Viewport
- A Luk recipe of meta tag section
What are Meta Tags?
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. It sounds very “coding”, right? Let’s rephrase.
Meta tags provide information about the webpage in the HTML of the document. This information is called "metadata" and while it is not displayed on the page itself, it can be read by search engines and web crawlers.
Search engines such as Google use metadata from meta tags to understand additional information about the webpage. They can use this information for ranking purposes, to display snippets in search results, and sometimes they can ignore meta tags.
Examples of meta tags including so many elements which may help you with SEO.
- <title>
- <description>
- <keywords>
- <author>
- <refresh>
- <viewport>
For example:
<meta name="keywords" content=”Shoplazza, SaaS, cross-border shopping cart platform">
This piece of code snippets or we call it “syntax”, refers to define the SEO keywords for “home page” or “any other webpage”.
We will go through these tags, and you will find them amazingly simple. No coding knowledge or background is required to quickly understand and also write them in your blog editor all by yourself.
Why to write your Meta Description?
Its purpose is simple: it needs to get someone searching with a search term on Google to click your link. In other words, meta descriptions are there to generate click-throughs from search engines.
Search engines say there is no direct SEO benefit from the meta description – they don’t use it in their ranking algorithm. But there is an indirect benefit: Google uses click-through-rate (CTR) as a way of working out whether you’re a good result. If more people click on your result, Google considers you to be a good result and will – based on your position – move you up the rankings. This is why optimizing your meta description is so important, as is optimizing your titles.
Unfortunately, there is no guarantee that Google will display the meta description that you’ve written. But, as there is a chance it will, it’s always worth the effort to add it to your post or page.
One of the most critical function that Meta Tag, “Viewport”, will help with is not only referring to SEO search terms, but also help your webpage become more responsive to adjust the size of display screens on different mobile devices, like tablets or smartphones.
What makes a good meta description?
The right length doesn’t really exist; it depends on the message you want to convey. You should take enough space to get the message across, but keep it short and snappy at the same time. However, if you check the search results in Google, you’ll mostly see snippets of 120 to 156 characters.
Include a Call-to-Action
“Hello, we have such and such new product, and you want it. Find out more!” This overlaps with what I said about the active voice, but I wanted to emphasize it once again. The meta description is your sales text. Except, in this case, the “product” you are trying to sell is the page that is linked. Invitations like Learn more, Get it now, Try for free come in handy and we use them too.
Different types of Meta Tags
To define keywords for search engines
<meta name="keywords" content="Shoplazza, global eCommerce,SaaS platform">
To define a key description of your web page
<meta name="description" content="Free Web tutorials for HTML and CSS">
To define the author of a page
<meta name="author" content="Luk C">
To refresh document every 30 seconds
<meta http-equiv="refresh" content="30">
To specify the character encoding for the HTML document
<meta charset="UTF-8">
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
To setup the viewport to make your website responsive on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting up the Viewport
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
A Luk recipe of meta tag section
Here are the meta tags that I use from time to time when I create a webpage. You can simply copy and rewrite the keywords.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="creative web designer, web designer">
<meta name="description" content="Creativity embedded in gene!">
<title>Creativity embedded in gene!</title>
</head>
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that replaced IE11, only honors the X-UA-Compatible meta tag in certain circumstances.
Next time, let’s take a look at “how to improve your html structure without knowing html”.
Stay tuned with SHOPLAZZA blog!
