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.

Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas127 567208.jpg

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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas25 506844.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas29 885818.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas34 265792.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas36 46978.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas44 942727.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas51 100694.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas54 003676.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas58 80865.jpg
    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>".
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas63 222624.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas66 070608.jpg
    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
    .
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas74 610482.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas79 581446.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas80 64944.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas86 242406.jpg
    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".
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas96 916298.jpg
    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"".
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas107 801194.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas123 85008.jpg
    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.">".
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas124 567208.jpg
    Was this step helpful? Yes | No| I need help
  19. 19
    Click "File"
    .
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas156 349848.jpg
    Was this step helpful? Yes | No| I need help
  20. 20
    Click "Save"
    .
    Alternatively, press "Ctrl" and "S" on the keyboard.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas157 549841.jpg
    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
    .
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas162 076794.jpg
    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.
    Add the meta description tag to an HTML5 document to improve SEO or Search Engine Optimization.mp4-canvas166 558766.jpg
    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

Article Info

Categories : Software

Recent edits by: Amanda, Grimm

Share this Article:

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

x

Thank Our Volunteer Authors.

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