- 3 years ago
- Shahzad Gujjar
- 1458 Views
-
4
You’ll learn how to use meta tags to include information about a web page in this tutorial.
Defining Metadata
Usually, the meta> tags are used to provide structured metadata including a document’s keywords, description, author name, character encoding, and other metadata. The head section of an HTML or XHTML document may contain any number of meta tags.
Metadata will not be visible on the web page, but it will be machine parsable and open to browsers, search engines, and other web services.
The following section explains how to use meta tags for different purposes.
Declaring Character Encoding in HTML
In an HTML document, the meta tag is usually used to declare character encoding.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The @charset at-rule is used to set the character encoding inside a CSS document.
UTF-8 is a very flexible and highly recommended character encoding. If this method is not specified, the platform’s default encoding is used.
Defining the Author of a Document
You may also use the meta tag to correctly define the web page’s author or creator.
An author, a company as a whole, or a third party may be the author.
<head>
<title>Defining Document's Author</title>
<meta name="author" content="Shahzad Gujjar">
</head>
The meta tag’s name attribute specifies the name of a piece of document-level metadata, while the content attribute specifies the value. The meaning of the content attribute will contain text and entities, but not HTML tags.
Keywords and Description for Search Engines
Some search engines, such as Google, use metadata, such as keywords and descriptions, to index web pages; however, this is not always the case. A short synopsis of the page is provided by keywords that give extra weight to a document’s keywords and description see below example.
<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, Bootstrap">
<meta name="description" content="Share Idea, Snippets, and Solution with easy to understand tutorials and references on HTML, CSS, javaScript and more...">
</head>
When a website appears in search results, search engines often use the meta description to create a short synopsis of the page. See the meta description guidelines for more details.
Configuring the Viewport for Mobile Devices
The viewport meta tag can be used to show web pages correctly on mobile devices.
Mobile browsers make web pages at typical desktop screen widths without a viewport meta tag, then scale them down to fit the mobile screen. As a consequence, viewing the web page properly on mobile devices generally requires pinch-and-zoom, which is inconvenient.
The following example shows two web pages, one with the viewport meta tag set and the other without. To see how it works, open these links on your mobile device.
Setting the best viewport size and scaling limits for displaying web pages on mobile devices is possible with the viewport meta tag. The following is an example of a viewport meta tag definition:
<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
When the page is first loaded by the browser, the width=device-width key-value pair within the content attribute sets the width of the viewport to the same as the device’s screen width, while initial-scale=1 sets the initial scale or zoom level to 100 percent.
In your web pages, always use the meta > viewport tag. It will boost the usability of your website and make it more available on mobile devices such as smartphones and tablets.
- 3 years ago
- Shahzad Gujjar
- 1458 Views
-
4