What is meta tag?Why should we know about it?

Photo by Jackson So on Unsplash

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:

affiliate

Thanks for reading and have a nice day ^_^.

--

--

--

Blogger and Content Creator. #buildnewkills #getnewfriends #trynewexperiences

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

PHP’s place in our present Backend Development Space.

Testing Methodologies

The right mindset for the cloud

Building a Test Automation Framework using Cypress.io — Adding Cucumber BDD (Part 2)

Software Testing Bootcamp — Text Box

IML 203, Critical Code Project: Spotify and the Post-Humanism of Color

Why Build a Business Around Free Open Source Software

Next Stop: Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aria Nur Jamal

Aria Nur Jamal

Blogger and Content Creator. #buildnewkills #getnewfriends #trynewexperiences

More from Medium

So you’ve finally caught the geek bug.

REASONS TO CHOOSE MEAN STACK DEVELOPERS TO BUILD APPS

Quasar 2: Q-input @clear event does not fire when using v-model.trim: Workaround

Top 10 Websites to Hire Remote Developers in 2022

Top 10 Websites to Hire Remote Developers in 2022