The post HTML Meta Tags- Everything a front-end developer should know appeared first on Rajesh Dhiman's Blog.
Meta tags help us to provide the metadata (the information about the data) of a web page.
Any website is incomplete without meta tags. The fancy little previews of websites that you see on social media or chat messages are there because of meta tags.
The code used to create meta tags is not displayed on your web page, but it is machine-readable and visible to machines (other apps) and search engines.
With meta tags, search engines can index your web page and use that information to identify the content of your site that you want to be viewing.
Why do we need meta tags?
e.g. if you have a website and you want it to be indexed by a search engine like Google. You provide a few meta tags, so the search engine can parse your metadata and index your pages to the appropriate meta tags.
Meta tags are one of the most basic but underrated tools available to the webmaster. They are the elements of a webpage that describe the content and categorize every page from a search engine's point of view.
Knowing how and when to use meta tags and most importantly, how to choose the right meta tags for your webpage can make a significant difference in the way people find your page on Google.
Meta tags are a way to tell search engines how to crawl your website, what content you're serving and what search keywords search engines should show you on their first page.
Meta tags are HTML elements that are used to help search engines categorize a page. They are used to manage a page's description, keywords, character set and other features.
How can we use HTML meta tags?
You can add metadata to your web pages by placing tags inside the header of the document i.e. between the and tags.
Below are the most common attributes of a meta tag:
Charset - charset is used to define the character encoding for your HTML document.
If the attribute is present, it must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents.
Meta elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.
<meta charset="UTF-8">Content - This attribute contains the value for the http-equiv or name attribute, depending on which one is used in the same tag.
Http-equiv - This attribute is called http-equiv(alent) because all the allowed values for http-equiv are names of specific HTTP headers.
It is used to specify values for HTTP response headers for a web page. For example, http-equiv can be used to refresh the page or to set a cookie.
The values for http-equiv include content-type, expires, refresh and set-cookie.
<meta http-equiv="refresh" content="30">Name - The name and content attributes are used together to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
Meta tags every developer should know :
Author - The name of the document's author.
<meta name="author" content="Rajesh Dhiman">
Description - Description is a short and accurate summary of the contents of the page. Several browsers, including Firefox and Opera, use this as the default description for bookmarked pages.
<meta name="description" content="This ultimate guide covers all the important aspects of HTML meta tags. Find out what are HTML meta tags? Why do you need meta tags? How to use meta tags in your HTML page?">A meta description is the snippet of text visible in search listings. It's like an ad placed by a web page that is both shown to users and indexed by search engines like Google.
Don't: Use the same descriptions and keywords on every page on your site.
Keywords: Keywords are words relevant to the page's contents, separated by commas.
<meta name="keywords" content="html meta tags, web development, learn web development, front end development"/> The code should contain keywords and phrases you'd like the engine to associate with your site.
Don't: Use the same description and keywords on every page on your site. Include the meta keyword meta tag instead.
Viewport - gives hints about the size of the initial viewport. It is only used for mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">theme-color: indicates a suggested color that user agents should use to customize the display of the page or the surrounding user interface. The content attribute contains a valid CSS , which is used to specify the color of the page. Check out mdn for more details on theme-color.
<meta name="theme-color" content="#4285f4">robots - this is used to tell search engines to index or not specific web pages in your website.
<meta name="robots" content="noindex,nofollow">There are also meta tags for open graph protocol which are used by Facebook. and Twitter cards which are used by Twitter to show previews or your web pages. You should consider adding these to your webpages to customize previews of your content for these social networks.
Here is a detailed list of other meta tags that you can use.
Let me know if you find this information useful. What are the other meta tags that you think are important for any web page?
Resources:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
- https://www.w3schools.com/tags/tag_meta.asp
Top comments (0)