Add a Meta Description Tag in HTML5 to Improve SEO
Edited by Grimm, Amanda, Eng
You're watching VisiHow. In this tutorial, we are going to show you how to use the meta description tag. This is a very important tag for your HTML5 documents. It is interpreted by all web browsers as an indication of what your website is about. Let's get started, and we'll explain more as we go.
Steps
- 1We have ours pinned to the taskbar, so we will mouse down and click on the Notepad icon to launch the program.Open up Notepad.
- 2We have one called "visi.html" that we have been using for our HTML5 tutorials.Left-click and hold on a .htm or .html file.
- 3The cursor will have a little plus sign associated with it.Drag the file over the Notepad window.
- 4Our HTML5 file is now open.Release, and the code will be dropped in.
- 5We have already set ours. Let's review the order in which a browser will read this page.Find the "meta charset" tag.
- 6In this case, it is "html". This is line one of our document.The first thing a browser sees is the doctype.
- 7This tells the browser that this is the beginning of our code. Note that the browser is not reading our code comments. For more information, check out our tutorial on adding comments to HTML5 code.The next thing a browser sees is "<html>".
- 8This tells the browser that this is the beginning of our head.Next, a browser sees the head tag, "<head>".
- 9It reads, "<meta charset="utf‐8">".Then we have the character set.
- 10This tells the browser what to display in the bar or tab for the page. To learn more, check out our tutorial on adding the head and title attributes to an HTML5 document. After this, we need to add a meta tag that gives the browser a description of what our site is about.Then the browser sees the page title.
- 11Place the cursor at the end of the line of code for the title.
- 12This creates a new blank line between the title and the end of the head section of code. This can be done using the Enter or Return key on the keyboard.Add one carriage return.
- 13Because this code is nested in our head section, it needs to be indented to match our other similarly nested code, namely, our meta charset and title tags. To learn more about formatting code, go to our tutorial about formatting HTML5 code for easy reading and editing.Add two spaces using the space bar on the keyboard.
- 14We do this by typing, "<meta ". Note that there is one space after "meta". Remember, meta tags don't have a closing in the way that other tags do. They don't close in the way that, for example, the title tag above closes.Open the meta tag.
- 15This tells the browser what this particular meta item is about. It essentially names the meta tag. The whole line so far will read, "<meta name".Type in "name".
- 16This is an equals sign followed by the name, description, in quotation marks. The whole line so far should read, "<meta name="description"".Type in "="description"".
- 17What we want to do with the content is give something descriptive that's not too long. It's okay to add a little bit of branding and a few keywords, but we don't want to go overboard. Add one space by tapping the space bar one time. In our case, we have entered in, " content="A video tutorial on getting started with HTML5, by VisiHow. See it. Do it.">". Note the one space before "content". Our content says that this page is a video tutorial, and then that it is about getting started with HTML5. It also says that it is by VisiHow, and includes a little branding after that, which is "See it. Do It." Some people may argue that this isn't necessarily best practice. However, VisiHow is a brand. It's here to help, and we want to let people know that, and become a trusted brand. In our opinion, a little branding isn't bad, as long as it isn't overdone. Now we have our meta name description set up.Add the content.
- 18The entire line should read, "<meta name="description" content="A video tutorial on getting started with HTML5, by VisiHow. See it. Do it.">".Proofread the new line of code.
- 19Click "File".
- 20Alternatively, press "Ctrl" and "S" on the keyboard.Click "Save".
- 21Close Notepad and double-click on the file on the desktop to launch it in a browser.
- 22Note that nothing has changed that is visible. That's because the meta tag is up in the head tag, which is only for browsers to read. However, if we were to see this as a result in search engines, we would see some of the information that was typed.Review the page as it displays.
- 23Thanks for choosing VisiHow. If you have questions about this or other topics, do please let us know in the section below. Otherwise, have a great day, and we'll see you in our next tutorial.This concludes our tutorial on how to set up the meta name tag for your HTML5 page so that it helps improve your SEO.
Video: Add a Meta Description Tag in HTML5 to Improve SEO
If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.
Comments
Article Info
Categories : Software
Recent edits by: Amanda, Grimm
