Expert · Fast, accessible, findable and safe: quality for real sites · topic 48 of 64 · 30 min
SEO basics: help people find your pages
Explanation
Crawl, index, rank
Crawlers such as Googlebot follow links from page to page and read your sitemap. The search engine then renders the page and reads its text, title, headings, links and images, and stores what it learns in its index. When someone searches, it ranks pages by many signals: how well the content answers the question, how trustworthy the site is, and page experience (mobile-friendly, fast, HTTPS). Google indexes the mobile version of your site, so the phone layout must have the full content.
The page head
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sharma Tiffin Service, Pune: Veg Meal Plans</title>
<meta name="description" content="Home-style veg lunch and dinner delivered in Kothrud, Pune. Monthly plans from Rs 2,400. Order on WhatsApp.">
<link rel="canonical" href="https://www.example.com/tiffin/">
<!-- Open Graph: the preview card on WhatsApp, LinkedIn, Facebook -->
<meta property="og:title" content="Sharma Tiffin Service, Pune">
<meta property="og:description" content="Home-style veg meals, monthly plans from Rs 2,400.">
<meta property="og:image" content="https://www.example.com/tiffin/share.jpg">
<meta property="og:url" content="https://www.example.com/tiffin/">
<meta property="og:type" content="website">
</head>- title: the blue clickable line in search results and the name on the browser tab. Make it unique for every page, describe that page, and put the important words first. Results show roughly the first 50 to 60 characters.
- meta description: the grey text under the title. It does not change ranking directly, but a clear one gets more clicks. Search engines may rewrite it. About 150 to 160 characters is shown.
- canonical: when the same page opens at several URLs (with ?ref=whatsapp, with and without www), it says which URL is the main one, so the copies do not compete.
- Open Graph (og:) tags control the card people see when they share your link on WhatsApp or LinkedIn. Use a full https URL for og:image.
Headings, links and content
Use one h1 that says what the page is about, then h2 and h3 in order. Write link text that says where it goes: "Download the fee structure (PDF)", not "click here". Give images useful alt text. Above all, write for people: answer the question your visitor really has, in plain words. Search engines have become very good at recognising helpful content, and very good at ignoring tricks.
robots.txt, sitemap.xml and noindex
# https://www.example.com/robots.txt
User-agent: *
Disallow: /admin/
Disallow: /cart/
Sitemap: https://www.example.com/sitemap.xml<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.com/</loc>
<lastmod>2026-10-01</lastmod>
</url>
<url>
<loc>https://www.example.com/menu</loc>
</url>
</urlset>Structured data with JSON-LD
Structured data is a small block of JSON that describes the page in a shared vocabulary from schema.org: this is a local business, this is a recipe, this is a product with a price. Search engines can use it to show richer results, such as opening hours or star ratings, but it does not guarantee them.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Sharma Tiffin Service",
"address": {
"@type": "PostalAddress",
"addressLocality": "Pune",
"postalCode": "411038",
"addressCountry": "IN"
},
"openingHours": "Mo-Sa 08:00-21:00"
}
</script>JavaScript-only pages and what not to do
If your page is an empty <div id="root"> until JavaScript runs, a search engine must run your JavaScript to see any content. Google can, but it may take longer; many other crawlers and link-preview bots (WhatsApp, LinkedIn) do not run JavaScript at all, so they see an empty page and miss any tags your script adds. For pages that should be found, send real HTML from the server, with server-side rendering or static generation (frameworks such as Next.js and Astro do this).
| Do not | Why |
|---|---|
| Keyword stuffing ("cheap tiffin Pune cheap tiffin Pune ...") | Search engines treat it as spam, and readers hate it |
| Rely on <meta name="keywords"> | Google has ignored it for many years; it does nothing |
| Hidden text (white on white, pushed off-screen) | Against search engine spam policies; can get pages removed |
| Buy links or join link schemes | Spam that can lead to a penalty |
| Copy content from other sites | Adds no value and rarely ranks |
Watch the lesson
SEO basics: help people find your pages · 1/8
Search engines crawl pages by following links, index what they find, and rank pages for each search.
Prefer a video by a teacher? Find free videos on “seo basics for web developers meta tags canonical sitemap open graph” on YouTube ↗
In real life: A coaching centre that people can find
A JEE coaching centre in Kota had a beautiful site, but every page had the title "Home", the course details were in images, and the site was built only with client-side JavaScript. After the fix, each course page has its own title and description ("JEE Main 2027 Weekend Batch, Kota: Fees and Timings"), real text with h1 and h2 headings, Open Graph tags so WhatsApp shares show a proper card, a sitemap submitted in Search Console, and server-rendered HTML. Within weeks, parents searching for weekend batches start finding the right page.
Practice (0/3 done)
This tiffin service page has poor SEO. Fix it so that: (1) <html> has lang="en"; (2) the <title> describes the page in 10 to 60 characters (not just "Home"); (3) there is a <meta name="description"> whose content has 50 to 160 characters; (4) there is a <link rel="canonical"> whose href starts with https://; (5) there are Open Graph tags <meta property="og:title"> and <meta property="og:image">, and the image URL starts with https://; (6) the page has exactly one <h1> (make the second heading an <h2>).
Clean URLs help people and search engines. Write slugify(title) that turns a page title into a URL slug: make it lowercase; turn every run of characters that are not a-z or 0-9 into a single hyphen; remove hyphens at the start and end. Examples: slugify("Top 10 Tiffin Services in Pune") is "top-10-tiffin-services-in-pune" and slugify("GST: What, Why & How?") is "gst-what-why-how".
Check how your own site (for example your GitHub Pages portfolio) looks to search engines and in share previews, and fix what is missing.
Quick quiz
Read more (free)
Pass the quiz (60% or more) or mark this topic as done when you are ready.
Your progress is saved on this device only.