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.

Was this helpful? Yes | No| I need help

Steps

  1. 1
    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.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    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.
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Drag the file over the Notepad window
    .
    The cursor will have a little plus sign associated with it.
    Was this step helpful? Yes | No| I need help
  4. 4
    Release, and the code will be dropped in
    .
    Our HTML5 file is now open.
    Was this step helpful? Yes | No| I need help
  5. 5
    Find the "meta charset" tag
    .
    We have already set ours. Let's review the order in which a browser will read this page.
    Was this step helpful? Yes | No| I need help
  6. 6
    The first thing a browser sees is the doctype
    .
    In this case, it is "html". This is line one of our document.
    Was this step helpful? Yes | No| I need help
  7. 7
    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.
    Was this step helpful? Yes | No| I need help
  8. 8
    Next, a browser sees the head tag, "<head>"
    .
    This tells the browser that this is the beginning of our head.
    Was this step helpful? Yes | No| I need help
  9. 9
    Then we have the character set
    .
    It reads, "<meta charset&#61&#34utf&dash;8&#34>".
    Was this step helpful? Yes | No| I need help
  10. 10
    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.
    Was this step helpful? Yes | No| I need help
  11. 11
    Place the cursor at the end of the line of code for the title
    .
    Was this step helpful? Yes | No| I need help
  12. 12
    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.
    Was this step helpful? Yes | No| I need help
  13. 13
    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.
    Was this step helpful? Yes | No| I need help
  14. 14
    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.
    Was this step helpful? Yes | No| I need help
  15. 15
    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".
    Was this step helpful? Yes | No| I need help
  16. 16
    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"".
    Was this step helpful? Yes | No| I need help
  17. 17
    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.
    Was this step helpful? Yes | No| I need help
  18. 18
    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.">".
    Was this step helpful? Yes | No| I need help
  19. 19
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  20. 20
    Click "Save"
    .
    Alternatively, press "Ctrl" and "S" on the keyboard.
    Was this step helpful? Yes | No| I need help
  21. 21
    Close Notepad and double-click on the file on the desktop to launch it in a browser
    .
    Was this step helpful? Yes | No| I need help
  22. 22
    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.
    Was this step helpful? Yes | No| I need help
  23. 23
    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.
    Was this step helpful? Yes | No| I need help

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

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

Article Info

Categories : Software

Recent edits by: Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 454 times.

x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No