HTML Meta Tags for SEO and Social Sharing: description, canonical, robots and Open Graph

SEO (search engine optimisation) is about helping search engines understand your pages and show them to the right people. Good content and good HTML structure come first, but a handful of tags in the <head> also make a real difference, both for search results and for how links look when shared on social media.

What search engines use from your HTML#

• The <title> (often used as the result's headline).
• The meta description (often used as the snippet under it).
• Headings, links and their text, image alt text, and the main content.
• Canonical, robots and language tags that tell crawlers how to treat the page.

Meta description#

<meta name="description" content="Learn HTML step by step with live examples and exercises. Free and written for complete beginners.">

• Summarise the page in one or two sentences that make people want to click.
• Make it unique for every page.
• Search engines usually show roughly the first 150 to 160 characters.
• It does not directly change rankings, but a good snippet can earn more clicks.

The old <meta name="keywords"> tag is ignored by Google and is not worth adding.

Canonical URL#

The same page is often reachable at several URLs (with tracking parameters, with and without www, sorted lists). A canonical link tells search engines which URL is the main one:

<link rel="canonical" href="https://www.example.com/recipes/lemon-rice">

Use a full, absolute URL.

The robots meta tag#

<meta name="robots" content="noindex">

Use noindex for pages such as internal search results, thank-you pages or test pages. Without a robots tag, pages can be indexed normally.

Open Graph: how links look when shared#

When someone shares your link on WhatsApp, LinkedIn, Facebook and many other apps, they read Open Graph tags to build the preview card:

<meta property="og:title" content="Easy Lemon Rice">
<meta property="og:description" content="A quick South Indian lemon rice recipe ready in 15 minutes.">
<meta property="og:image" content="https://www.example.com/images/lemon-rice-1200x630.jpg">
<meta property="og:url" content="https://www.example.com/recipes/lemon-rice">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Laviyx Kitchen">

• Open Graph tags use property, not name.
• Use absolute URLs, especially for the image.
• An image of 1200 × 630 pixels is the commonly recommended size for link previews.

X (formerly Twitter) reads Open Graph tags too, plus its own card tag for the layout:

<meta name="twitter:card" content="summary_large_image">

Language versions: hreflang#

If a page exists in several languages, link the versions together so search engines show each user the right one:

<link rel="alternate" hreflang="en" href="https://www.example.com/en/about">
<link rel="alternate" hreflang="hi" href="https://www.example.com/hi/about">

Structured data#

Structured data describes your content in a standard vocabulary (schema.org), usually as JSON-LD inside a script tag. Search engines can use it for rich results, such as recipe cards with ratings and cooking times:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Easy Lemon Rice",
  "totalTime": "PT15M",
  "recipeIngredient": ["2 cups cooked rice", "1 lemon", "2 tbsp peanuts"]
}
</script>

Only describe what is really on the page. Google's Rich Results Test checks whether your structured data is valid.

The HTML that matters most#

Tags help, but search engines mostly rank the content. The HTML lessons you have already done matter most: one clear <h1>, logical headings, descriptive link text, alt text, semantic structure, fast-loading images and a page that works on phones.

Practice#

<title>How I Learned HTML in 30 Days | Example Blog</title>
<meta name="description" content="The plan, resources and daily habits that took me from zero to building my own website in a month.">
<link rel="canonical" href="https://www.example.com/blog/learn-html">
<meta property="og:title" content="How I Learned HTML in 30 Days">
<meta property="og:description" content="The plan, resources and daily habits that took me from zero to building my own website in a month.">
<meta property="og:image" content="https://www.example.com/images/learn-html.png">
<meta property="og:url" content="https://www.example.com/blog/learn-html">
<meta property="og:type" content="article">

Key takeaway#