Lesson 4 of 5 · reading 15–25 minutes; practice and project time is on the module page

Search engines and sharing

🎯You'll be able to

Give each page a clear title, description and sharing preview, and check what search engines see.

🏠The everyday picture

A shop's signboard, its listing in a local directory and the photo friends share all help people find it. A website's titles, descriptions and previews do the same.

📘What it really is

Search engines and link previews read the page's HTML and metadata. Server-rendered or static pages make the main content visible straight away.
Set for each page:
a clear title and description;
Open Graph tags (title, description, image) so links shared on WhatsApp and social media show a preview;
a canonical URL so duplicate URLs (with tracking parameters) count as one page.
Next.js offers a metadata export or generateMetadata() function to build these from page data.
A sitemap lists pages for search engines; a robots.txt says what not to crawl, such as cart and account pages.
Structured data (schema.org JSON-LD) can describe products, prices and stock so search results show richer details.
Fast, mobile-friendly pages also help search visibility; FE4 covers measuring speed.

📝A worked example

Kirana product page metadata:

export async function generateMetadata({ params }) {
  const p = await getProduct(params.productId);
  return {
    title: `${p.name} – ₹${p.priceRupees} | Kirana Express Kothrud`,
    description: `${p.name}, ${p.size}. Delivered in Kothrud within 2 hours.`,
    openGraph: { images: [p.imageUrl] },
    alternates: { canonical: `/store/kothrud/product/${p.slug}` },
  };
}

Before this, every product link shared on WhatsApp showed the same generic preview. Afterwards each showed the product's name, price and photo, and clicks from shared links rose noticeably in the next month's analytics.

🌍Where it's used

Shops and listings that depend on search traffic.
Content sites: blogs, news, documentation.
Anything shared on WhatsApp or social media.

📝Case scenario

A store's search traffic splits across /product/atta?utm_source=wa and /product/atta?ref=home and the clean URL, and none ranks well. Adding a canonical URL to every product page tells search engines they're the same page, and the clean URL becomes the one that appears in results.

🖱️Try it

Add titles, descriptions, Open Graph images and canonical URLs to your Kirana product pages. Paste a product link into a link-preview checker (or a WhatsApp chat with yourself) and confirm the preview.

⚠️Common mistakes

The same title on every page. Sign: search results all read "Kirana Express". Fix: generate a title from the page's content.
Content that only appears after JavaScript runs. Sign: link previews show nothing. Fix: render key content in the HTML.

🛠️For your project

The starter's product pages set their title with generateMetadata. Check yours in the page source.

✅Quick check

What do Open Graph tags control?

Show the answer

How a link looks when shared: its title, description and image preview.

Why add a canonical URL?

Show the answer

So different URLs for the same page, such as ones with tracking parameters, count as one page.