What is meta tag?Why should we know about it?
--
Before going to go deep to meta tag, we should know about the definition of meta tag.
The meta tag defines metadata about an HTML document. Metadata is data (information) about data. Meta tags always go inside the head element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
from W3Schools
From this definition, we could know, that meta tag contains some information about the HTML document. And in this article, we should learn about meta tag that should be useful for your website. Have a nice Reading
#1 Meta tag for keyword (comma-separated)
<meta name=“keyword” content=“keyword1, keyword2”>
The keyword meta tag is sometimes used by search engines to know the search query which is relevant to your web page. As the rule, it is probably to not add too many words, as most search engines that use this meta tag for indexing only index the first ~20 words. So, we must be careful for inputing the word, we have to input the most important word firstly.
#2 Meta tag for description
<meta name=“description” content=“Your web app description”>
This meta tag would show the description of your web app in query of search engines. So, you have to write the description shortly and clearly, till the people that look the description understanding about your web app, and they would visit your web app cause they are interested by your description. For doing this, you are able to learn about copywriting. So, you will write it clearly and shortly, and make people being interested by your description.
#3 Meta tag for viewport
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
The viewport element gives the browser intsruction on how to control the page’s dimension and scalling base the device you are using.
In the example, content=“width=device-width, initial-scale=1” that means the width of the web page is controlled base on the device that was used by user, and the width would be like as width of device. And the initial-scale means the initial zoom in the page (initial-scale=1 means 1.0 without zoom).
There are many attribute for viewport elements, I’ll explain it below:
a. width
The width of the virtual viewport of the device, value: device-width, or you can write it with the actual width in pixel, like 1080
b. height
The height of the virtual viewport of the device, value: device-height, or you can write it with the actual height in pixel, like 720
c. initial-scale
The initial zoom when the page is loaded. 1.0 does not zoom.
d. minimum-scale
The minimum amount the visitor can zoom the page. 1.0 does not zoom
e. maximum-scale
The maximum amount the visitor can zoom the page. 1.0 does not zoom
f. user-scalable
Allows the device to zoom in and out. Values are yes or no. If set to no, the user is not able to zoom in the web page. The default is yes. Browser settings can ignore this rule
note:
The width and height property can be either specified in pixels (width=1080 or heigth=720)
#4 Meta tag for author
<meta name=“author” content=“Your Name”>
The author element shows the author of the web app, when it’s finding in query on search engines. You can write your name for showing that you are the author of your web app. when you are a famous author, this will be most useful for you, cause if people would search the web that’s written by you and find it, they would visit it immediately.
Those are meta tags that I think will be very useful for improving your web app. Actually, there are many meta tags that you can use it, like for media social, character set etc. You can learn it more at W3School or you can download and read pdf books from googlekicker for free.
You can support me by buying the product from affiliate’s link bellow:
Thanks for reading and have a nice day ^_^.
