Learn HTML

Learn to code and become a Front End Web Developer.

Campsite Coders Bootcamp Coding Adventure

HTML Meta Tags

HTML Meta Tags are the unsung heroes of web development, especially when it comes to optimizing your website for search engines. Hidden within your web page's code, these tags provide essential information to search engines, helping them understand your content, and ultimately boosting your site's visibility in search results.

Now, let's dive into the essential HTML Meta Tags that every aspiring SEO wizard should know:

Meta Descriptions


Think of the Description Meta Tag as your website's elevator pitch. It provides a concise snippet that entices users to click on your link. To optimize your description tag for HTML Meta Tags:

<meta name="description" content="Master the art of HTML Meta Tags and catapult your website to the top of search engine results. Dive into the world of Meta Tags for SEO success.">


A meta description is an HTML tag used to describe the content on a web page. The meta description will show up below the title and URL of your page as it appears in the search engine results. Meta descriptions are typed out in the head section of your web page, not in the body section. The end user does not see the meta description while viewing your web page. Meta Tags are read by search engines to help index your page. The content (words) typed in your meta description gives information to Google's web server and helps decide how to rank your web page. For this reason, you should always include keywords in your meta description.

Google used to limit the visibility of meta descriptions to only 160 characters but in 2017, they extended the meta description visibility to 320 characters. This means that you can now have a more descriptive description that may clearly define the contents of your page. If you are not sure what to type as your meta description, try taking a piece of content in one of the paragraphs on your web page and using that - so long as it is the main topic of your web page. The content that goes inside of your meta description is usually done by your company's SEO expert but it's a good idea to understand what this tag is for so that in cases where your company doesn't have an SEO Expert, you as the web developer knows to include this tag and fill it out with keyword rich and meaningful content that matches the content on the page.

The Meta Description is displayed under the Page's title in search results. See below for an example.

google search results showing meta description


Please keep in mind that Google does not always display what you typed in the meta description. If they find text on your page that better matches the searcher's request, they will use that text instead.

If you want to learn about adding meta tags that will improve your SEO - learn Facebook Open Graph tags.

Meta Keywords

While search engines rely less on Keyword Meta Tags, they still play a role in your SEO strategy. Include a list of relevant keywords related to your content to help search engines understand your page's subject matter:

<meta name="keywords" content="HTML Meta Tags, SEO, web development, website optimization">


Meta keywords are meta tags in the head section of your HTML page. Basically, meta keywords are the words that you want to rank for in Google's search results. The meta keywords describe the content of a website shortly and concisely, and are therefore important indicators of a website's content. The meta keywords are written in lowercase and separated with a comma. It is the job of your team's SEO Expert to give you the keywords for each page based on the content of the page. Over the years it has been stated that Google no longer uses meta keywords to base a page's ranking factors because too many web developers in the past "stuffed" this tag - thereby giving them less meaning. There is an ongoing online debate among SEO experts whether or not your page should even contain keywords. I have created sites with and without them and it is my conclusion that you should include them but limit the keywords of the page to only 1 word but no more than 3 words. The reason for this is that these keywords can then be used as hashtags on social media where they will have more impact. So adding meta keywords to your page can help your marketing team determine which words to use in their other advertising and marketing needs that bring traffic to your web page.

It is stated several times on the internet that Google and other search engines no longer consider the keywords meta tag, but that they are smart enough to figure out what keywords and phrases have been used in the pages content, title and meta description.

Viewport Meta Tag

Mobile optimization is paramount in today's digital landscape. Use the Viewport Meta Tag to ensure that your website is responsive and performs well on various devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Robots Meta Tag

The Robots Meta Tag gives you control over how search engines crawl and index your content. For SEO optimization, use it wisely to either allow or disallow specific pages from search engine indexing:

<meta name="robots" content="index, follow">

Open Graph Tags & Twitter Cars

If you want to make a splash on social media, optimize your content for Open Graph and Twitter Cards. These tags create rich previews when your content is shared, including images, titles, and descriptions:

<!-- Open Graph -->

<meta property="og:image" content="your-image-url.jpg">

<meta property="og:description" content="Master the art of HTML Meta Tags and catapult your website to the top of search engine results. Dive into the world of Meta Tags for SEO success.">

<!-- Twitter Card -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@YourTwitterHandle">

Consistency Matters

Consistency between your HTML Meta Tags and your content is crucial. Ensure that your tags accurately reflect your web page's subject matter. Misleading tags can damage your site's credibility.


Monitor and Adjust

Regularly monitor how your HTML Meta Tags perform in search results using tools like Google Search Console and Google Analytics. Make adjustments to improve your click-through rates and overall SEO performance.


Achieving SEO Success with HTML Meta Tags

In conclusion, HTML Meta Tags are the secret weapons that can propel your website to the top of search engine results. By crafting and optimizing your Meta Tags, you can enhance your site's visibility, boost user engagement, and create shareable content. So, go ahead, embrace the power of HTML Meta Tags in your SEO strategy, and watch your website climb to the top.

Remember that while optimizing your content is a crucial step in achieving better SEO rankings, it's just one part of a larger SEO strategy. Building backlinks, creating high-quality content, and ongoing SEO efforts are also essential for sustained success. So, dive into the world of HTML Meta Tags, but keep in mind that long-term SEO success requires dedication and continuous improvement.


Now that you have learned about meta data inside of the meta tags called meta keywords and meta description, you may now move forward to learn about another line of code that plays an important role in ranking your web page in search engines: the title tag.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved