SEO and meta tags in Svelte - Mini Project: Build & Apply

SEO and Meta Tags in Svelte

📖 Scenario: You are building a simple webpage using Svelte. To help search engines understand your page, you need to add SEO-friendly meta tags in the HTML head section.

🎯 Goal: Create a Svelte component that sets the page title and meta description using the <svelte:head> tag.

📋 What You'll Learn

Use the <svelte:head> tag to add elements inside the HTML head.

Set the page title to exactly My Svelte SEO Page.

Add a meta description tag with the content This is a simple Svelte page with SEO meta tags..

Ensure the meta tags are correctly placed inside the <svelte:head> block.

💡 Why This Matters

🌍 Real World

Adding SEO meta tags is essential for making web pages discoverable and understandable by search engines and social media platforms.

💼 Career

Web developers often need to add and manage meta tags to improve website SEO and user experience.

1

Create the Svelte component skeleton

Create a new Svelte component file and write the basic structure with an empty <svelte:head> block.

Svelte

Hint

Start by adding the <svelte:head> tag to your component. This tag lets you add elements inside the HTML head.

2

Add the page title inside <svelte:head>

Inside the existing <svelte:head> block, add a <title> tag with the exact text My Svelte SEO Page.

Svelte

Hint

The <title> tag sets the page title shown in browser tabs and search results.

3

Add a meta description tag

Inside the <svelte:head> block, below the title tag, add a <meta> tag with name="description" and content="This is a simple Svelte page with SEO meta tags.".

Svelte

  My Svelte SEO Page
  



  

Hint

The meta description helps search engines understand what your page is about.

4

Add a main heading to the page content

Inside the <main> tag, add an <h1> heading with the text Welcome to My Svelte SEO Page.

Svelte

  My Svelte SEO Page
  



  

Hint

The main heading helps users and search engines understand the page content.

Practice

1. What is the main purpose of using <svelte:head> in a Svelte component?

easy

A. To create reactive variables

B. To style the component with CSS

C. To handle user input events

D. To add SEO meta tags like title and description to the page head

Solution

1. Step 1: Understand the role of <svelte:head>

   The <svelte:head> tag is used to insert elements into the HTML document's <head> section.

2. Step 2: Identify what goes inside <svelte:head>

   SEO meta tags like <title> and <meta name="description"> are placed inside <svelte:head> to improve search engine visibility.

3. Final Answer:

   To add SEO meta tags like title and description to the page head -> Option D

4. Quick Check:

   SEO meta tags = <svelte:head> usage [OK]

Hint: Use <svelte:head> to add meta tags in the page head [OK]

Common Mistakes:

• Confusing <svelte:head> with styling or event handling
• Trying to add meta tags outside <svelte:head>
• Using <svelte:head> for component layout

2. Which of the following is the correct syntax to set the page title inside a Svelte component?

easy

A. My Page

B. My Page

C. My Page

D. My Page

Solution

1. Step 1: Recall correct Svelte syntax for head elements

   In Svelte, <svelte:head> is the special tag to add elements to the document head.

2. Step 2: Check each option for correctness

   <svelte:head><title>My Page</title></svelte:head> correctly wraps <title> inside <svelte:head>. Plain <head><title>My Page</title></head> and bare <title>My Page</title> miss the special Svelte tag. <svelte:title>My Page</svelte:title> uses a non-existent tag.

3. Final Answer:

   <svelte:head><title>My Page</title></svelte:head> -> Option A

4. Quick Check:

   Page title in <svelte:head> = correct syntax [OK]

Hint: Always wrap head tags inside <svelte:head> in Svelte [OK]

Common Mistakes:

• Using plain <head> instead of <svelte:head>
• Placing <title> outside any head tag
• Using invalid tags like <svelte:title>

3. What will be the rendered HTML head content after this Svelte component runs?

<svelte:head>
  <title>Welcome</title>
  <meta name="description" content="Home page" />
</svelte:head>

medium

A. Only <title>Welcome</title> is added

B. <title>Home page</title><meta name="description" content="Welcome" />

C. <title>Welcome</title><meta name="description" content="Home page" />

D. No head content is added

Solution

1. Step 1: Understand <svelte:head> behavior

   All elements inside <svelte:head> are added to the HTML document's <head> section as-is.

2. Step 2: Check the given tags inside <svelte:head>

   The code adds a <title> with text 'Welcome' and a <meta> tag with name 'description' and content 'Home page'. Both appear in the head.

3. Final Answer:

   <title>Welcome</title><meta name="description" content="Home page" /> -> Option C

4. Quick Check:

   Tags inside <svelte:head> appear in head [OK]

Hint: Tags inside <svelte:head> appear exactly in the HTML head [OK]

Common Mistakes:

• Mixing up title and meta content values
• Thinking <svelte:head> does not render anything
• Assuming only one tag can be added

4. Identify the error in this Svelte component code for setting meta tags:

<svelte:head>
  <meta name="description" content=Home page>
</svelte:head>

medium

A. Missing quotes around the content attribute value

B. Using <svelte:head> instead of <head>

C. Meta tags cannot be added in Svelte components

D. The meta tag must be self-closing with a slash

Solution

1. Step 1: Check attribute syntax in meta tag

   HTML attributes must have their values in quotes. Here, content=Home page lacks quotes around 'Home page'.

2. Step 2: Verify other parts of the code

   <svelte:head> is correct for Svelte. Meta tags can be added. Self-closing slash is optional in HTML5.

3. Final Answer:

   Missing quotes around the content attribute value -> Option A

4. Quick Check:

   Attribute values need quotes [OK]

Hint: Always quote attribute values in HTML tags [OK]

Common Mistakes:

• Omitting quotes around attribute values
• Confusing <svelte:head> with <head>
• Thinking meta tags can't be used in Svelte

5. How can you dynamically update the page title in a Svelte component based on a variable pageTitle?

hard

A. pageTitle

B. {pageTitle}

C. {pageTitle}

D. $pageTitle

Solution

1. Step 1: Recall Svelte syntax for dynamic content

   In Svelte, curly braces {} are used to insert JavaScript variables inside markup.

2. Step 2: Check each option for correct dynamic binding

   <svelte:head><title>{pageTitle}</title></svelte:head> correctly uses <svelte:head> and inserts {pageTitle} inside <title>. <svelte:head><title>pageTitle</title></svelte:head> uses plain text 'pageTitle'. <title>{pageTitle}</title> misses <svelte:head>. <svelte:head><title>$pageTitle</title></svelte:head> uses invalid $ syntax.

3. Final Answer:

   <svelte:head><title>{pageTitle}</title></svelte:head> -> Option B

4. Quick Check:

   Use {variable} inside <svelte:head> for dynamic title [OK]

Hint: Use {variable} inside <svelte:head> for dynamic meta tags [OK]

Common Mistakes:

• Writing variable name as plain text inside title
• Omitting <svelte:head> wrapper
• Using $variable syntax incorrectly