What are Meta Tags ??
Definition and Usage
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.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).!
More Examples
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">Define the author of a page:
<meta name="author" content="John Doe">Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Setting 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.
What are meta tags?
Meta tags are short texts, short HTML code chunks that help search engines understand your page and the information on it.
press the Ctrl+U combination — to see the meta tags of a page
What is a meta tag example?
Today we want to show the 6 main types of meta tags that that help you to optimize website as much as possible:
- Title meta tag
- Description meta tag
- Keyword meta tag
- Alternative text for meta tags
- Canonical meta tag
- Header meta tag
Let's take a closer look at them and take a look at examples of meta tags on the pages.
Title meta tag
Title tags are the most used meta tag on web pages. This is exactly what search engines and users see first. Title should be short, clear and contain the main keyword.
The title tag looks like this:
Description meta tag
The description meta tag is a short and clear description of what the page is about. The description meta tag is what is displayed right under the title meta tag.
The description meta tag looks like this:
Keyword meta tag
Keyword meta tags are top keywords that accurately describe what you are writing about. In order to find the keyword of the page, you will need to press Ctrl+U. After that, you need to find the line that begins with the following words <meta name = "keywords".
Alternative text for images
The Alt tag is tags are written for images so that search engines can index your image. That is, even if there are problems with downloading images, users will still be able to understand what is shown in the picture.
Alt tag starts with alt="YOUR ALT TEXT">
Canonical meta tag
The Canonical tag should be added if you have pages that are very similar to each other. This tag tells search engines that this page is the main one. The Canonical tag is written using <link rel = "canonical".
Header meta tag
Header tag (h1, h2 ...) are headers with which you name parts of a main page, product page, blog, etc. They are also read by search engines and increase your chances to be in the first Google position. To find the header tag in the html code, you need to enter <h1>, <h2> or whatever header tag you are looking for.
