Topic 05 / 08

SEO Meta Tags & Social Sharing (Open Graph)

1. Simple Definition

Meta tags HTML document ke <head> ke andar likhe jaane wale technical snippets hote hain jo browser, Google Search crawlers, aur social media apps (WhatsApp, Twitter, LinkedIn) ko batate hain ki page ka title, summary aur sharing banner photo kya hai.

2. Real-Life Analogy

🏷️ Book Ka Cover Aur Back Page Blurb

Bookstore me book lene se pehle aap uski spine (Title), aur piche likha hua 3-line summary (Meta Description) padhte hain. Aur WhatsApp par jab aap link paste karte hain aur instant photo aur title card ban jata hai — wo Open Graph tags ka kamaal hai!

3. Why Do We Need It?

Duniya ki sabse khoobsurat website bhi fail ho jayegi agar wo Google Search me 0th position par ho aur WhatsApp par link share karne par blank ugly URL dikhe. Meta tags traffic aur clicks laane ka number 1 tool hain.

4. Syntax

<head>
  <!-- Basic SEO -->
  <title>Page Title (Under 60 chars)</title>
  <meta name="description" content="Click-worthy summary (150-160 chars)">

  <!-- Open Graph (WhatsApp / Facebook / LinkedIn) -->
  <meta property="og:title" content="Viral Social Title">
  <meta property="og:description" content="Engaging summary for social media feed">
  <meta property="og:image" content="https://example.com/banner.jpg">
  <meta property="og:type" content="website">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

5. Basic Example (Production-Ready Head Tag)

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebDev Hinglish — Learn Web Development in Hindi</title>
  <meta name="description" content="Zero se shuru karke HTML, CSS aur JavaScript seekhein simple Hinglish me. 20 real projects aur interactive code runner.">
  <meta name="author" content="WebDev Hinglish Team">
  <link rel="canonical" href="https://webdev-hinglish.pages.dev/">

  <!-- Open Graph / Facebook / WhatsApp -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://webdev-hinglish.pages.dev/">
  <meta property="og:title" content="WebDev Hinglish — Zero se Hero Frontend Course">
  <meta property="og:description" content="HTML, CSS, JS simplified with everyday Indian analogies.">
  <meta property="og:image" content="https://webdev-hinglish.pages.dev/assets/images/og-preview.jpg">

  <!-- Twitter / X Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="WebDev Hinglish — Learn Web Development">
</head>

6. Output / Expected Result (WhatsApp / Twitter Preview)

og:image (1200 x 630 px Banner)
webdev-hinglish.pages.dev
WebDev Hinglish — Zero se Hero Frontend Course
HTML, CSS, JS simplified with everyday Indian analogies.
Social Media Share Card Preview

7. Code Explanation

  • name="description": Google search results me page title ke niche dikhne wala snippet.
  • property="og:image": WhatsApp, iMessage, Twitter par link bhejne par aane wala banner. Ye hamesha absolute URL (https://...) hona chahiye.
  • rel="canonical": Duplicate content issues se bachata hai taaki Google ko pata ho ki original URL kaunsa hai.
  • name="twitter:card" content="summary_large_image": Twitter par bada visual image card render karta hai.

8. Real-World Example

YouTube, Spotify, ya Zomato ka koi bhi link WhatsApp par bhejiye: bina page khole jo image, title aur pricing banner aata hai, wo og:meta tags ki wajah se aata hai!

9. Common Mistakes

⚠️ Galti: og:image me relative path dena

<meta property="og:image" content="/images/banner.jpg"> — ye WhatsApp par kaam nahi karega! Social crawlers ko poora absolute address chahiye hota hai: https://yourdomain.com/images/banner.jpg.

10. Best Practices

  • og:image ka ideal resolution 1200 x 630 pixels hona chahiye (1.91:1 aspect ratio).
  • Meta description ko 155 characters ke andar rakhein taaki Google search me text truncate na ho.
  • Favicon ke liye SVG favicon use karein with dark mode support.

11. Try It Yourself

Playground me apne favorite project ka title, meta description aur og:title likhein.

12. Challenge

Ek e-commerce product page ke meta tags likhein jisme Product Name, Price description, aur product image og:image me ho.

13. Interview Questions

💼 Q: Open Graph protocol kya hai aur kisne introduce kiya tha?

Answer: Open Graph (OG) protocol Facebook dwara 2010 me introduce kiya gaya tha. Iska maksad kisi bhi webpage ko rich social graph object banana hai, taaki social media par link share karne par beautiful cards render ho sakein.

14. Quick Revision

  • Meta tags <head> me hote hain.
  • description = Google search snippet.
  • og:image = Social share banner (must be absolute URL).

15. FAQ

Q1. Kya meta keywords tag abhi bhi Google SEO me kaam karta hai?

Nahi! Google ne 2009 me hi meta keywords tag ko spam ki wajah se ignore karna shuru kar diya tha. Ab sirf title aur description matter karte hain.

Q2. Favicon ka standard format kya hai?

Modern standard me favicon.svg (crisp vector) aur fallback ke liye favicon.ico ya 32x32 PNG use kiya jata hai.

Q3. Robots meta tag kya karta hai?

<meta name="robots" content="noindex, nofollow"> Google ko page index karne se rokta hai (jaise admin login pages ke liye).

Q4. WhatsApp par link preview update kyun nahi ho raha?

Social platforms link previews ko cache kar lete hain. Test karne ke liye Facebook Sharing Debugger ya Twitter Card Validator use karein.

Q5. Structured Data (JSON-LD) kya hota hai?

Google rich snippets (star ratings, cooking time, product price) ke liye <script type="application/ld+json"> me structured data likha jata hai.

Topic 05 / 08

SEO Meta Tags & Social Sharing (Open Graph)

1. Simple Definition

Meta tags are technical snippets embedded within the HTML document's <head> that instruct web browsers, search engine crawlers (like Google), and social media platforms (WhatsApp, Twitter/X, LinkedIn) on page title indexing, summary excerpts, and dynamic preview cards.

2. Real-Life Analogy

🏷️ Book Spine and Back-Cover Blurb

When browsing a bookstore shelf, you glance at the spine (the <title>) and turn the book over to read a concise 3-line synopsis (the meta description). When sharing a URL on WhatsApp, the rich image thumbnail and headline card that generates immediately is powered by Open Graph tags!

3. Why Do We Need It?

Even an extraordinary website will languish without traffic if search engines cannot parse its content or if sharing its link on social platforms produces an ugly, uninformative plain URL. Meta tags are essential for search discoverability and high click-through rates.

4. Syntax

<head>
  <!-- Basic SEO -->
  <title>Page Title (Under 60 characters)</title>
  <meta name="description" content="Engaging summary snippet (150-160 characters)">

  <!-- Open Graph (WhatsApp / Facebook / LinkedIn) -->
  <meta property="og:title" content="Viral Social Title">
  <meta property="og:description" content="Compelling preview description for social feeds">
  <meta property="og:image" content="https://example.com/banner.jpg">
  <meta property="og:type" content="website">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

5. Basic Example (Production-Ready Head Tag)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebDev Learning Platform — Zero to Full Stack</title>
  <meta name="description" content="Master HTML, CSS, and JavaScript from scratch with interactive playgrounds and 20 production-grade projects.">
  <meta name="author" content="Engineering Team">
  <link rel="canonical" href="https://webdev-hinglish.pages.dev/">

  <!-- Open Graph / Facebook / WhatsApp -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://webdev-hinglish.pages.dev/">
  <meta property="og:title" content="WebDev Learning Platform — Frontend Engineering">
  <meta property="og:description" content="Bilingual HTML, CSS, and JS platform with dual-language live toggling.">
  <meta property="og:image" content="https://webdev-hinglish.pages.dev/assets/images/og-preview.jpg">

  <!-- Twitter / X Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="WebDev Learning Platform">
  <meta name="twitter:description" content="Master modern web fundamentals.">
  <meta name="twitter:image" content="https://webdev-hinglish.pages.dev/assets/images/og-preview.jpg">
</head>

6. Output / Expected Result

WebDev Learning Platform 🚀
webdev-hinglish.pages.dev
WebDev Learning Platform — Frontend Engineering
Bilingual HTML, CSS, and JS platform with dual-language live toggling.
Social Media Preview Card Simulation (WhatsApp / Twitter)

7. Code Explanation

  • viewport: Necessary for responsive scaling on mobile screens.
  • meta description: Displayed in Google Search result snippets under the headline link.
  • og:image: Requires an absolute URL (starting with https://) to display properly in social messengers.
  • canonical: Prevents search engines from penalizing duplicate URL parameters.

8. Common Mistakes

⚠️ Common Pitfall: Relative URL in og:image

Using a relative path like content="/images/banner.jpg" breaks social media share cards. Social crawlers require a fully qualified absolute URL: https://example.com/images/banner.jpg!

9. Best Practices

  • Keep page titles between 50 and 60 characters to avoid search snippet truncation.
  • Keep meta descriptions between 140 and 160 characters.
  • Use 1200x630 pixels aspect ratio (1.91:1) for Open Graph preview images.

10. Practice Exercise

🎯 Exercise: SEO Header Audit

Create an HTML <head> block containing charset, responsive viewport, title, description, and full Open Graph and Twitter meta tags for a tech portfolio.

11. Mini Challenge

⚡ 10-Minute Challenge: Social Share Inspector

Test your Open Graph meta tags using tools like Facebook Sharing Debugger or Twitter Card Validator to verify image rendering and text preview limits.

12. Interview Questions

💼 Q: What is the purpose of the canonical link tag?

Answer: The <link rel="canonical"> tag indicates the authoritative master URL of a webpage, preventing search engine penalties when identical content is accessible via multiple query string parameters.

13. Summary / Cheat Card

  • <title> & description determine Google search engine snippet appearance.
  • Open Graph tags (og:*) generate rich social media preview cards.
  • Always use absolute HTTPS URLs for social preview images.

14. FAQ

Q1. What is Open Graph protocol?

Open Graph was created by Facebook and adopted universally to allow web pages to become rich objects in social network feeds.

Q2. Do meta keywords still impact Google ranking?

No, Google officially deprecated meta name="keywords" years ago due to keyword-stuffing abuse.

Q3. What is the recommended size for og:image?

1200 x 630 pixels provides sharp rendering on Retina displays and standard feeds.

⬅️ Prev: SVG & Canvas Next: Accessibility & ARIA ➡️