SEO Fundamentals

Meta Tags

Meta tags provide metadata about the HTML document to browsers and search engines.

Essential Meta Tags

<head>
    <!-- Character encoding (must be first) -->
    <meta charset="UTF-8">
    
    <!-- Viewport for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Page title (most important SEO element) -->
    <title>Page Title - Site Name</title>
    
    <!-- Meta description -->
    <meta name="description" content="Brief description of the page content, 150-160 characters">
    
    <!-- Keywords (less important now) -->
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    
    <!-- Author -->
    <meta name="author" content="Author Name">
    
    <!-- Robots -->
    <meta name="robots" content="index, follow">
</head>

Robots Meta Tag

<!-- Allow indexing and following links -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing -->
<meta name="robots" content="noindex">

<!-- Prevent following links -->
<meta name="robots" content="nofollow">

<!-- Prevent both -->
<meta name="robots" content="noindex, nofollow">

<!-- Prevent archiving -->
<meta name="robots" content="noarchive">

<!-- Prevent snippet -->
<meta name="robots" content="nosnippet">

Open Graph Tags (Social Media)

<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

Twitter Cards

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@username">

Canonical URL

<!-- Prevent duplicate content -->
<link rel="canonical" href="https://www.example.com/page">

<!-- Alternate versions -->
<link rel="alternate" hreflang="es" href="https://www.example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page">

Structured Data

Structured data helps search engines understand your content and display rich snippets.

JSON-LD Format (Recommended)

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "How to Learn HTML",
    "author": {
        "@type": "Person",
        "name": "John Doe"
    },
    "datePublished": "2024-01-15",
    "dateModified": "2024-01-16",
    "image": "https://example.com/image.jpg",
    "publisher": {
        "@type": "Organization",
        "name": "Site Name",
        "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/logo.png"
        }
    }
}
</script>

Common Schema Types

<!-- Article -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Article Title",
    "author": {"@type": "Person", "name": "Author"},
    "datePublished": "2024-01-15"
}
</script>

<!-- Product -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Product Name",
    "image": "product.jpg",
    "description": "Product description",
    "brand": {"@type": "Brand", "name": "Brand"},
    "offers": {
        "@type": "Offer",
        "price": "29.99",
        "priceCurrency": "USD"
    }
}
</script>

<!-- Local Business -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Business Name",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "123 Main St",
        "addressLocality": "City",
        "addressRegion": "ST",
        "postalCode": "12345"
    },
    "telephone": "+1-555-123-4567"
}
</script>

Rich Snippets

<!-- FAQ Page -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [{
        "@type": "Question",
        "name": "What is HTML?",
        "acceptedAnswer": {
            "@type": "Answer",
            "text": "HTML is the standard markup language for creating web pages."
        }
    }]
}
</script>

<!-- BreadcrumbList -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com"
    }, {
        "@type": "ListItem",
        "position": 2,
        "name": "Products",
        "item": "https://example.com/products"
    }]
}
</script>

Semantic Markup for SEO

Semantic HTML helps search engines understand your content structure.

Heading Hierarchy

<!-- ❌ Bad: Skip levels -->
<h1>Page Title</h1>
<h3>Subtitle</h3>

<!-- ✅ Good: Proper hierarchy -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h3>Subsection 1.2</h3>
<h2>Section 2</h2>

<!-- Only one h1 per page -->
<!-- Use h2-h6 for subheadings -->

Content Structure

<!-- Use semantic elements -->
<article>
    <header>
        <h1>Article Title</h1>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    
    <section>
        <h2>Introduction</h2>
        <p>Content...</p>
    </section>
    
    <section>
        <h2>Main Points</h2>
        <p>Content...</p>
    </section>
    
    <footer>
        <p>Author: <a href="/author">John Doe</a></p>
    </footer>
</article>

Internal Linking

<!-- Link to related content -->
<p>Learn more about <a href="/html-basics">HTML basics</a>.</p>

<!-- Use descriptive anchor text -->
<!-- ❌ Bad -->
<a href="/page">Click here</a>

<!-- ✅ Good -->
<a href="/html-tutorial">Read our HTML tutorial</a>

Image Optimization for SEO

<!-- Descriptive alt text -->
<img src="html-structure.png" alt="HTML document structure diagram">

<!-- Descriptive filenames -->
<!-- ❌ Bad -->
<img src="IMG_20240115.jpg" alt="photo">

<!-- ✅ Good -->
<img src="html-structure-diagram.png" alt="HTML structure diagram">

<!-- Lazy loading for performance -->
<img src="image.jpg" alt="Description" loading="lazy">

URL Structure

✅ Good URLs:
https://example.com/html-tutorial
https://example.com/products/shoes

❌ Bad URLs:
https://example.com/page?id=123&cat=456
https://example.com/p/abc123

Page Speed

<!-- Lazy load images -->
<img src="image.jpg" loading="lazy" alt="">

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">

<!-- Use async/defer for scripts -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>

Practice Problems

0/3solved

intermediateBuild SEO Fundamentals Component

Create a reusable React component implementing SEO Fundamentals. Include proper state management and accessibility.

Solution

// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed

intermediateSEO Fundamentals Testing

Write unit and integration tests for SEO Fundamentals using React Testing Library.

Solution

// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests

intermediateSEO Fundamentals Performance

Optimize SEO Fundamentals for performance. Consider memoization, code splitting, and bundle size.

Solution

// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Flashcards

Question

What is the most important SEO meta tag?

Click to reveal answer

Answer

The title tag. It appears in search results and browser tabs. Should be unique and descriptive.

Question

What is structured data?

Click to reveal answer

Answer

JSON-LD code that helps search engines understand content and display rich snippets in search results.

Question

What does the robots meta tag do?

Click to reveal answer

Answer

Controls how search engines index the page. Common values: index/noindex, follow/nofollow.

Question

What is SEO Fundamentals?

Click to reveal answer

Answer

SEO Fundamentals is a key concept in frontend development.

Question

When to use SEO Fundamentals?

Click to reveal answer

Answer

Use SEO Fundamentals when building production systems that require reliability, scalability, and maintainability.

Revision Notes

Key Takeaways

1.Title tag is the most important SEO element
2.Structured data enables rich snippets
3.Use one h1 per page with proper heading hierarchy
4.Semantic HTML helps search engines understand content
5.Descriptive alt text and link text improve SEO

Interview Tips

•Know the essential meta tags for SEO
•Understand how structured data works
•Be familiar with Open Graph tags
•Know how semantic markup improves SEO

Cheat Sheet

SEO Cheat Sheet

Essential Meta Tags:

title: Most important
description: 150-160 chars
robots: index/noindex
canonical: Preferred URL

Structured Data:

JSON-LD format (recommended)
Schema.org vocabulary
Enables rich snippets

Semantic Markup:

One h1 per page
Proper heading hierarchy
Semantic elements (article, section)
Descriptive link text

Best Practices:

Descriptive alt text
Clean URL structure
Lazy loading for images
Preload critical resources

Meta Tags

Essential Meta Tags

Robots Meta Tag

Open Graph Tags (Social Media)

Twitter Cards

Canonical URL

Structured Data

JSON-LD Format (Recommended)

Common Schema Types

Rich Snippets

Semantic Markup for SEO

Heading Hierarchy

Content Structure

Internal Linking

Image Optimization for SEO

URL Structure

Page Speed

Practice Problems

Quiz

Flashcards

Revision Notes

Key Takeaways

Interview Tips

Cheat Sheet

SEO Cheat Sheet