SEO Elements Inside the Head Section
The <head>section contains information about the webpage. Most of it is not visible to users, but browsers and search engines read it to understand the page.
<head>
<!-- SEO elements go here -->
</head>
1. Title Tag
The title is one of the strongest on-page SEO signals. tells Google and the browser the name of your webpage
- Appears as the blue clickable title in Google Search.
- Appears in the browser tab.
- Helps Google understand the page topic.
<head>
<title>Python Course for Beginners</title>
</head>
Best Practices
- One title per page.
- Keep it around 50 to 60 characters.
- Include the primary keyword naturally.
- Make every page's title unique.
2. Meta Description
A short summary of the page.
Google often shows this below the page title in search results.
<meta name="description" content="Learn Python programming from basics to advanced with practical projects.">
<meta> = Meta tag.
name="description" = Specifies this is a description.
content="..." = The description text.
Best Practices
- Around 150 to 160 characters.
- Clearly explain the page.
- Include important keywords naturally.
- Avoid duplicate descriptions.
3. Charset
Defines how text characters are displayed.
Without it, special characters may appear incorrectly.
Instead of ₹500 the browser might display ₹500
<meta charset="UTF-8">
<meta> = Meta tag.
charset = Character encoding.
"UTF-8" = Supports most languages and symbols.
4. Viewport
Makes the page responsive on mobile devices.
Google uses mobile-first indexing
Without this tag, a page may appear zoomed out or difficult to read on phones.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
name="viewport" = Viewport settings.
width=device-width = Page width matches the device.
initial-scale=1.0 = Default zoom level.
5. Robots Meta Tag
This tells search engines what they are allowed to do.
<head>
<meta name="robots" content="index, follow">
</head>
name="robots" = Robots instructions.
content="index, follow" = Rules for search engines.
Common values
- index : Allow Google to index the page.
- noindex : Do not show this page in search results.
- follow : Follow links on the page.
- nofollow : Do not follow the links
6. Canonical Tag
Sometimes the same content exists on multiple URLs.
Example
example.com/course
example.com/course?sort=new
example.com/course?ref=facebook
Google may treat these as duplicate pages.
Canonical tells Google which version is the original.
<head>
<link rel="canonical" href="https://example.com/course">
</head>
This prevents duplicate content problems.
7. Language Attribute
This tells browsers and search engines the language of the page.
Helps Google serve the page to the right audience.
<html lang="en"> //English
<html lang="ml"> // Malayalam
<html lang="hi"> //Hindi
8. Open Graph Tags
When someone shares the page on platforms like Facebook, LinkedIn, or WhatsApp, these tags control the preview.
<meta property="og:title" content="Python Course">
<meta property="og:description" content="Learn Python easily.">
<meta property="og:image" content="python.jpg">
property = Open Graph property.
og:title = Shared page title.
og:description = Shared description.
og:image = Preview image.
content = Value shown on social media.
9. Structured Data (Schema)
Schema is additional information
Google can use this to create rich results, such as star ratings, FAQs, courses, products, recipes, events, and more.
It is not visible to website visitors, but search engines like Google can read it.
usually placed inside the <head> section, but it can also be added inside the <body>
You can use Schema Generator tools.
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Course",
"name":"Python Course"
}
</script>
Normally, the <script> tag is used for JavaScript.
type="application/ld+json" tells the browser and Google "This is Structured Data (JSON-LD), not JavaScript.
@context → Uses the Schema.org standard.
@type → Type of content - type of shema (Course, Product, Person, etc.).
name → Name of the content.
description → Short description.
10. Favicon
Appears in browser tabs.
Appears in bookmarks.
Improves website branding.
Does not directly improve SEO rankings
The favicon is usually saved as an ico file.
<link rel="icon" href="favicon.ico">
icon = Specifies the file is the website icon.
Recommended Projects
