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.
Open up Notepad. We have ours pinned to the taskbar, so we will mouse down and click on the Notepad icon to launch the program.
Left-click and hold on a .htm or .html file. We have one called "visi.html" that we have been using for our HTML5 tutorials.
Drag the file over the Notepad window. The cursor will have a little plus sign associated with it.
Release, and the code will be dropped in. Our HTML5 file is now open.
Find the "meta charset" tag. We have already set ours. Let's review the order in which a browser will read this page.
The first thing a browser sees is the doctype. In this case, it is "html". This is line one of our document.
The next thing a browser sees is "<html>". This 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.
Next, a browser sees the head tag, "<head>". This tells the browser that this is the beginning of our head.
Then we have the character set. It reads, "<meta charset="utf‐8">".
Then the browser sees the page title. This 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.
Place the cursor at the end of the line of code for the title.
Add one carriage return. This 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 two spaces using the space bar on the keyboard. Because 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.
Open the meta tag. We 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.
Type in "name". This 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 "="description"". This is an equals sign followed by the name, description, in quotation marks. The whole line so far should read, "<meta name="description"".
Add the content. What 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.
Proofread the new line of code. The entire line should read, "<meta name="description" content="A video tutorial on getting started with HTML5, by VisiHow. See it. Do it.">".
Click "Save". Alternatively, press "Ctrl" and "S" on the keyboard.
Close Notepad and double-click on the file on the desktop to launch it in a browser.
Review the page as it displays. Note 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.
This concludes our tutorial on how to set up the meta name tag for your HTML5 page so that it helps improve your SEO. Thanks 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.
Video: Add a Meta Description Tag in HTML5 to Improve SEO
Recent edits by: Amanda, Grimm