Essential HTML tags for SEO success
A page's SEO depends not only on its content, but also on the use of HTML tags. Some have a technical role, others contribute directly to SEO and can have a direct impact on the page's natural referencing. Here's a look at the essential SEO tags:
Summary
The TITLE tag
It's the title that appears in the search results of engines like Google, Bing or Yahoo. In a way, it's the showcase of a web page, the one that will entice Internet users to click and read the article in its entirety. The title must be catchy and relevant! If it's well written, the TITLE tag helps increase CTR (Click-Through Rate), which measures the number of clicks on a link in relation to the number of impressions on the search results page.
The keywords used in the TITLE tag are of vital importance for indexing and natural referencing. Be careful, however, not to confuse this element with the H1 tag, which designates the main title of the article displayed at the top of the page. These two tags are different and complementary.
<html> <head> <title>SEO - Essential HTML Tags</title> </head> <body> </body> </html>
The TITLE tag is placed in the header of the HTML code. We recommend that you enter a TITLE of around 50 to 60 characters (including spaces), so that it can be seen in its entirety, without being truncated.
The META Description tag
The META Description tag complements the TITLE tag to describe the content of a web page in search results. This element has no direct impact on SEO, since Google and most other search engines do not take its content into account when indexing pages.
The main purpose of the META Description tag is to encourage visitors to click on the link. By choosing relevant keywords and catchy turns of phrase, it can help boost a page's CTR and send a positive message to search engines, which reason as follows: “If users click on this link, it means the content of the article must be interesting, so I'm going to move this page up the rankings”.
<html> <head> <meta name="description" content="SEO Tips - HTML tags you need to know for successful web page SEO. Some of them are incredible!"> </head> <body> </body> </html>
The META Description tag should be between 150 and 160 characters long, so as not to be truncated, and is also placed in the HTML code header.
The META Robots tag
This is a META tag located in the HEADER section of the HTML code. It provides indexing robots with a number of directives concerning the referencing of the page, its sub-pages and the images they contain. Initially, the META Robots tag had two positions: “index” to authorize indexing of the page and “noindex” to refuse it. Today, it can be more finely tuned, thanks to the following options (the most important):
- all: this is the default value. Tells robots that there are no restrictions on indexing or display.
- noindex: prohibits indexing of the page and all its content (text, images, video).
- nofollow: prevents indexing robots from following links on the page.
none: equivalent to noindex and nofollow. - noarchive: prohibits page caching in search results.
- notranslate: indicates that the page should not be translated in search results.
- noimageindex: prohibits indexing of page images.
<html> <head> <meta name="robots" content="index,follow"> <meta name="googlebot" content="index,follow"> </head> <body> </body> </html>
The META Robot tag applies to all search engines, while the META Googlebot tag is specific to Google.
The Canonical tag
It's a well-known fact that Google doesn't like duplicate content, and this element tells search engines which is the original version of a web page. The canonical tag is an effective way of avoiding the risk of Google sanctions and their consequences on natural referencing. In the event of content being copied from another page (on the same site or a third-party site), the source must be specified using this tag, which is integrated into the HTML code header.
<html> <head> <link rel="canonical" href="https://www.sublim.design/blog/referencement/balises-html-indispensables-seo/"> </head> <body> </body> </html>
On an e-commerce site, for example, it can also happen that two product pages are virtually identical. This is sometimes the case when presenting a single product available with different options (color, size, etc.). In this case, it's advisable to integrate a canonical tag on all page declinations to indicate to Google the URL of the main product page.
To make it easier for the indexing robots to understand, and to limit errors in algorithm interpretation, it's advisable to fill in the canonical tag with an absolute URL: https://www.sublim.design/blog/referencement/balises-html-indispensables-seo/ rather than /blog/referencement/balises-html-indispensables-seo/ for example.
The H1 tag is essential for SEO
The H1 tag (Heading 1) designates the main title of an article. The keywords used in the title must be carefully selected to summarize the page's content and tell Google what it's about. Search engine algorithms use this information to index pages and position them (more or less well) in the search results.
To write an effective H1 tag for SEO purposes, you need to avoid complex turns of phrase and respond to search intent. To be relevant, the main title of a web page must answer a precise question and target a perfectly identified audience (persona concept). The H1 tag must be clear, concise and attractive to entice the visitor to continue reading.
The H1 tag is unique (a single main title per page) and is always placed at the beginning of the article. Its recommended length varies between 20 and 100 characters; ideally, this element should be around 70 characters long.
The ALT attribute of the image tag
A web page consists of text, illustrations and photos. These play an important role in natural referencing, thanks in particular to the ALT tag, which describes the content of an image. This information is taken into account to identify the image and index it correctly.
<html> <head> </head> <body> <img alt="Essential HTML Tags for SEO" src="https://www.sublim.design/mini-1024/2022/04/2395527420211013122359/balises-html-indispensables-seo-q72-200901.jpg"> </body> </html>
Correct ALT tag information
- The text entered in the ALT tag must be faithful to the actual content of the image.
- It should be concise and clearly describe the image in just a few words. (3 to 5 words are recommended).
- Avoid keyword stuffing and risk being penalized by Google.
Schema.org tags (rich snippets)
Schema markup allows you to structure data and format information according to Google's display criteria. It's a great way to be positioned at position zero, above sponsored links on the SERP (search results page).
There are many different ways of structuring data, depending on its content: presenting an article, a product from an online store, a recipe, a book, a film, an event, a review, a company, an application, and so on.
<html>
<head>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Non-Alcoholic Piña Colada",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2024-03-10",
"description": "This non-alcoholic pina colada is everyone's favorite!",
"recipeCuisine": "American",
"prepTime": "PT1M",
"cookTime": "PT2M",
"totalTime": "PT3M",
"keywords": "non-alcoholic",
"recipeYield": "4 servings",
"recipeCategory": "Drink",
"nutrition": {
"@type": "NutritionInformation",
"calories": "120 calories"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 5,
"ratingCount": 18
},
"recipeIngredient": [
"400ml of pineapple juice",
"100ml cream of coconut",
"ice"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"name": "Blend",
"text": "Blend 400ml of pineapple juice and 100ml cream of coconut until smooth.",
"url": "https://example.com/non-alcoholic-pina-colada#step1",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step1.jpg"
},
{
"@type": "HowToStep",
"name": "Fill",
"text": "Fill a glass with ice.",
"url": "https://example.com/non-alcoholic-pina-colada#step2",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step2.jpg"
},
{
"@type": "HowToStep",
"name": "Pour",
"text": "Pour the pineapple juice and coconut mixture over ice.",
"url": "https://example.com/non-alcoholic-pina-colada#step3",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step3.jpg"
}
],
"video": {
"@type": "VideoObject",
"name": "How to Make a Non-Alcoholic Piña Colada",
"description": "This is how you make a non-alcoholic piña colada.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "https://www.example.com/video123.mp4",
"embedUrl": "https://www.example.com/videoplayer?video=123",
"uploadDate": "2024-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": { "@type": "WatchAction" },
"userInteractionCount": 2347
},
"expires": "2024-02-05T08:00:00+08:00"
}
}
</script>
</head>
<body>
</body>
</html>
SCHEMA tags should be entered in JSON-LD format, ideally in the HEADER section of the page.
Bold words and the STRONGB tag
Many web surfers skim over pages and do a quick read (diagonal reading) of the text to check that it corresponds to their query. The bolding of certain keywords helps to quickly identify the general meaning of an article. It's also an effective way of improving the accessibility and readability of a web page for dyslexic or visually impaired people.
<html> <head> </head> <body> <p>Use a <b>Bold</b> tag</p> <p>Use a <strong>Strong</strong> tag</p> </body> </html>
There are two ways to make text bold: the BOLD tag and the STRONG tag. Visually, the results are the same in both cases. From an SEO point of view, there's no proof that one is more effective than the other, but some SEO specialists recommend using the STRONG tag to mark the importance of a word or phrase.
Integration of HTML tags by the Sublim.design CMS
All these HTML tags are taken into account by the pages generated with Subim.design. Our CMS makes it possible to create high-performance sites that comply with Google's recommendations to facilitate natural referencing.