Learn HTML Meta-Tags in 4 Minutes!

in this tutorial we will learn everything about metatext in HTML the first question we will answer is what are metatexts the short answer is metatexts are metadata which describe your web pages have a look at this search result page from Google metatexts are used to define the different parts of a search result like the title for example in this case it's Wikipedia or the description which is also defined by a meta without any more talking let's jump into the code and learn how to use meta tags in HTML we already learned about the title tag in a previous tutorial of this course actually it's not a real meta tag but the title tag influences the search results so I included it into this tutorial as well okay after adding the title tag we will add our first real meta for the description of the page so we write meta and set the name attribute to description the name attribute of metat Texs defines the type of the metatech in this case we want to set the descript so we set the attribute to description the content attribute defines the actual value of the metatech so here we write the description which should appear in the search results okay so now we have added title and description and this is how it will appear in the search results of Google next we're going to have a look at some other metatexts let's start with the keyword metatech this one is used to describe the keywords or topics of your web page along long time ago search engines used this metatech to determine the topics of your web page but this isn't the case anymore today another metatech is the author metatech search engines use the author metatech sometimes to display information about the author of a web page for example in news articles to create an author metatag we set the name attribute to author and the content attribute to John Doe for example next we're going to have a look at another interesting thing we can achieve by using metatext we will learn how to refresh the page in a specific interval to achieve that we create a meta Tech and set the HTTP equip attribute to refresh and next we set the content attribute through the amount of seconds which will trigger the interval so let's set it to five because we want the page to refresh every five seconds the viewport metat is another important metatech it gives the browser information about the area where the content is rendered the viewport metatech is important so your web pages look good on every device even on small smartphone screens we will have a closer look at the viewport metatech in a future tutorial about responsive design on this channel a good default viewport metatech is setting the width to the width of the device and the initial scale to 1.0 the Char set metatech is used to define the character set used for displaying text on your website utf8 is a good default Char set to use so we are going to use that one the robots metatech can be used to tell search engines and other robots how to handle the web page for example if you don't want your web page is listed in the search results of a search engine you would have to set the no index property of the robots metatech and if we don't want that search engines follow the links on our websites we have to set the no follow property of the robots Tech the last tag we are going to have a look at is not a real meta tag as well but I think it's important to mention it now we can use the link tag to define a so-called canonical URL if you have duplicate Pages the canonical URL points to the original page imagine you host the same website one time with www and one time without www to avoid search engines indexing both of those versions We Set the canonical URL to the www version so search engines only index the page once okay we have reached the end of this video I hope you liked it and learned a lot to support my work please give the video a like And subscribe to the channel to not miss any content about learning to code have a great day and see you next time

Channel: Learndev

Views: 715

Keywords: HTML, HTML Tutorial, HTML Meta-Tags

Id: WecWWZifXB4

Length: 4min 21sec (261 seconds)

Published: Mon Jun 03 2024