HTML Title & Meta Description Tag? Beginner Tutorial
Bhumika Goel / October 2023
Introduction
HTML tags are the principal element to make your information, views, and business websites available online for web users and search bots. These fundamental markers tell web browsers how to display text, images, links, and other multimedia elements.
A web browser reads an HTML document from top to bottom and from left to right. The foremost usage of HTML tags is to define the display instructions for web browsers. They add to the visual representation of the web page by providing different formats for paragraphs, links, headings, and images etc.
When developing an HTML page, it’s essential to understand the fundamental role of each HTML tag.
Let us explore the significant HTML meta tags with the HTML title tag, dissect their components, and unravel best practices to optimize them for better user experience and search engine rankings.
The Title tag
The title tag defines the name of the HTML document. It is one of the most important tags for search engine optimization and web page display. It specifies the web document title, which makes the first part of any search engine result. A title tag should be simple, appropriate, and have a specific keyword in it. In the current scenario, there is an urgent need for title tags that compel users to go through them while acting as magnet for search crawlers.
HTML Code for title tag
<title>How to optimize title tag?</title>Location of title element in HTML code
The title tag is inside the head element of the HTML document
<head>
<title> This is the document title</title>
</head>
Importance of Title Tag
- Title tags help in improving the accessibility feature of your web page
- Reflects the page relevancy to search bots and is a ranking factor
- Google uses the content of <title> elements to generate title links for your organic search listing
- The browser tab showcases your title tag content onscreen
- Social Media share-generated links of your web page generally use the content of HTML title tags.
Examples:
| Title Text | Rating | Explanation |
|---|---|---|
| Delicious and Healthy Smoothie Recipes – Best Smoothie Ideas | 😊 | A concise title that includes the primary keyword “smoothie recipes” and provides a compelling reason to click by mentioning “Delicious and Healthy” and “Best Smoothie Ideas”. |
| Welcome to Our Website | ☹ | The title is too generic, with no keyword and information included about the content. |
| Hiking Trails in the Pacific Northwest – Explore Nature | 😊 | The text specifically targets an audience interested in hiking with a proper call to action of exploring nature. |
| Untitled Document | ☹ | The title says there is no title for the document. A meaningless title confuses users and search bots. |
| Dog Accessories | Pet Dog Accessories | Best Dog Accessories | ☹ | A title filled with keywords is a bad practice. |
| Top 10 Interview Tips for 2023 – Ultimate Guide | 😊 | Informative and engaging with the main keyword Interview Tips and Ultimate Guide. |
Best Practises:
- Follow the 70-character rule to gain maximum legibility on SERP.
- Include primary keywords in closer proximity to the beginning of the title.
- Define and create unique title tags for every page of your website.
- Use compelling and engaging terms like Top 10, Best Resources, Ultimate Guide etc to influence CTR
- Associate the document title with valid call-to-action words.
- Avoid Keyword Stuffing in the title tag while sticking to one or two keywords inclusion.
- Brand your web page title to reflect the branded content.
HTML Meta Element
HTML meta element contains metadata. In simple words, information about other data used inside a web page.
For example, a simple summary explaining the purpose of the page, its author name, its cache policy, its visibility for search bots, etc.
These specialized meta tags act as invisible factors to positively influence user experience and search engine optimization (SEO) efforts.
Features of HTML Meta Element
- Meta Element is a void element.
- It cannot have any child nodes or elements.
- It has only a start tag.
- It is not a self-closing tag, as such tag do not exist in the HTML.
Metadata disclosed by <meta> element falls under the following four categories.
- Document level: Setting the name attribute inside the meta tag makes the metadata contain information at the document level.
- Pragma Directive: If HTTP-equiv set, the meta element contains host machine-level information equivalent to its HTTP header.
- Charset Declaration: If charset set, the metadata is file-level information. It provides the character encoding information used in the document.
- User-Defined Meta Data: If itemprop set, it contains user-defined information about the resources inside the document.
The Metadata element “name” attribute and its usage-
The meta name attribute defines document metadata information in a name-value pair. The name attribute contains the name associated with the data, and the content attribute has its value.
For example: <meta name=” description” content=” This is the web page short summary.”>
Standard metadata names
- description: a summary of the page
- author: the author of the page
- application-name: the application used in the HTML page
- keywords: comma-separated list of words relevant to the content of a page
- referrer: controls the HTTP header request sent from the web page
- generator: software identifier that generated the document.
- theme-color: a predefined color for browsers to custom display the web page information.
- color-scheme: defines the compatible colors list for the document display.
Other meta-element names
- viewport: initial size declaration of viewport
- creator: give information about who is the creator of the document
- Googlebot: indicates behavioral permissions to the spider bot of Google
- Robots: associates page crawling permission for robots
- Publisher: Contains the name of the publisher of the web document.
The Meta Description tag <meta name=” description” >
The meta description tag represents the summary of a web page. As the name says, it describes the function and usability of the landing page to its users.
HTML code
<meta name=”description” content=”This is my website description”>Tips to Write Meta Description Tag:
- Be Concise while defining the usability and purpose of the web document.
- Make unique descriptions for every single web document
- Generate description text automatically with the codes.
- The text inside the content value should be relevant to the web page.
- Keep the description text to an optimal length of 100-150 characters.
Let us review a few meta description tag text.
| Description Text | Rating | Explanation |
|---|---|---|
| Discover a wide selection of eco-friendly home decor items, from sustainable furniture to handmade crafts. Shop now for a greener home. | 😊 | The text is specific and accompanied by a valid call to action. |
| Same as Title | ☹ | Duplicates the title tag content and fails to add value to the page functionality. |
| Our SEO experts provide top-notch services to boost your website visibility. Get in touch with our experienced team for better search engine rankings today. | 😊 | The text contains a primary keyword with a valid call to action. The description text is concise and adds a value proposition. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis, justo vel scelerisque fermentum. | ☹ | A placeholder dummy text adds no value and shares no information about the web document. |
| Keyword stuffing, SEO, best SEO services, SEO experts, top SEO company | ☹ | This meta description is overly stuffed with keywords and lacks readability. It does not describe the actual purpose of the web document. |
Conclusions
Title tag playa a significant role in enhancing the readability and accessibility of web documents. A well optimized title tag leaves the end users with relatable and relevant information and acts as a magnet for both search bots and target audience.
Meta description tag is the hidden HTML code that sometimes reflect in the search engine results of a web page. If utilized well this meta element has the power to influence CTR for websites.
Bhumika Goel is a technology and design thinker, a lifelong learner having a wide range of experience across WordPress development, content marketing and search engine optimization. Creative web applications, tools, and products that your customers will love and get you real business results, is something she can empower you with. She is passionate for delivering high-quality work that meets the needs and expectations of her clients. She is always eager to learn new skills and technologies to enhance her portfolio and stay ahead of the curve. She is looking for new opportunities to collaborate with other professionals and help businesses grow their online presence and reach their goals.