svelte:head for document head - Mini Project: Build & Apply

Using <svelte:head> to Customize the Document Head

📖 Scenario: You are building a simple Svelte app for a blog. You want to add a custom page title and meta description to improve the page's appearance in the browser tab and search engines.

🎯 Goal: Learn how to use the &lt;svelte:head&gt; tag to add a &lt;title&gt; and a &lt;meta&gt; description inside the document head.

📋 What You'll Learn

Create a Svelte component with a <svelte:head> block

Add a <title> tag inside <svelte:head> with the exact text 'My Blog Home'

Add a <meta> tag inside <svelte:head> with name="description" and content="Welcome to my blog homepage"

Add a main heading <h1> with the text 'Welcome to My Blog'

💡 Why This Matters

🌍 Real World

Websites often customize the document head to improve user experience and SEO by setting page titles and meta tags.

💼 Career

Knowing how to manage the document head is important for frontend developers to create professional and accessible web pages.

1

Create the Svelte component with a main heading

Create a Svelte component that contains a <h1> heading with the exact text Welcome to My Blog.

Svelte

Welcome to My Blog

Hint

Use the <h1> tag to add the main heading inside your Svelte component.

2

Add a block

Add a <svelte:head> block above the <h1> heading in your Svelte component.

Svelte

  


Welcome to My Blog

Hint

The <svelte:head> tag lets you add elements inside the document's <head> section.

3

Add a <title> tag inside

Inside the <svelte:head> block, add a <title> tag with the exact text My Blog Home.

Svelte

  


Welcome to My Blog

Hint

The <title> tag sets the text shown in the browser tab.

4

Add a meta description inside

Inside the same <svelte:head> block, add a <meta> tag with name="description" and content="Welcome to my blog homepage".

Svelte

  My Blog Home
  


Welcome to My Blog

Hint

The <meta> tag with name="description" helps search engines understand your page.

Practice

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

easy

A. To add or modify elements inside the HTML <head> section of the page.

B. To create a new HTML section inside the body of the page.

C. To style the component using CSS.

D. To handle user input events in the component.

Solution

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

   The <svelte:head> tag is specifically designed to insert or update tags inside the HTML <head> section, such as titles and meta tags.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated tasks: event handling, body content, and styling, which are not the purpose of <svelte:head>.

3. Final Answer:

   To add or modify elements inside the HTML <head> section of the page. -> Option A

4. Quick Check:

   svelte:head modifies <head> = D [OK]

Hint: Remember: svelte:head changes the document head, not body content. [OK]

Common Mistakes:

• Confusing svelte:head with component body content
• Thinking it styles components directly
• Assuming it handles events

2. Which of the following is the correct syntax to set the page title using <svelte:head> in a Svelte component?

easy

A. My Page

B. My Page

C. My Page

D. My Page

Solution

1. Step 1: Identify correct tag usage

   The correct tag to modify the document head in Svelte is <svelte:head>, not <svelte-head> or <head> inside it.

2. Step 2: Check nesting rules

   You place the <title> tag directly inside <svelte:head>, without nesting another <head> tag inside it.

3. Final Answer:

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

4. Quick Check:

   Correct svelte:head syntax = C [OK]

Hint: Use exactly with direct children tags inside. [OK]

Common Mistakes:

• Using <head> instead of
• Adding extra <head> inside
• Misspelling the tag as

3. Given this Svelte component code, what will be the page title after rendering?

<script>
  let pageTitle = 'Welcome';
</script>

<svelte:head>
  <title>{pageTitle} to Svelte</title>
</svelte:head>

<h1>Hello!</h1>

medium

A. {pageTitle} to Svelte

B. Welcome to Svelte

C. pageTitle to Svelte

D. Hello!

Solution

1. Step 1: Understand variable interpolation in svelte:head

   The variable pageTitle is set to 'Welcome' and used inside the <title> tag with curly braces, so it will be replaced by its value.

2. Step 2: Determine the final title text

   The title becomes 'Welcome to Svelte' because the variable is replaced and concatenated with the string ' to Svelte'.

3. Final Answer:

   Welcome to Svelte -> Option B

4. Quick Check:

   Variable interpolation works in svelte:head = B [OK]

Hint: Variables inside { } in svelte:head render their values. [OK]

Common Mistakes:

• Thinking variables show as literal text
• Confusing page content with title text
• Ignoring interpolation syntax

4. What is wrong with this Svelte code snippet?

<svelte:head>
  <title>My Site</title>
  <meta name="description" content="A cool site">
</svelte:head>

medium

A. Nothing is wrong; this code is valid.

B. The <title> tag cannot be used inside <svelte:head>.

C. The <meta> tag must be self-closed with /> in Svelte.

D. The <meta> tag is missing a closing slash.

Solution

1. Step 1: Check HTML validity inside svelte:head

   In HTML5, the <meta> tag is a void element and does not require a closing slash. It is valid to write it without />.

2. Step 2: Confirm usage of title and meta tags

   Both <title> and <meta> tags are allowed inside <svelte:head> to modify the document head.

3. Final Answer:

   Nothing is wrong; this code is valid. -> Option A

4. Quick Check:

   HTML5 void tags don't need closing slash = A [OK]

Hint: Void tags like <meta> don't need closing slash in HTML5. [OK]

Common Mistakes:

• Adding unnecessary closing slash to <meta>
• Thinking <title> is disallowed in svelte:head
• Confusing XHTML rules with HTML5

5. You want to dynamically update the page description meta tag based on a component variable desc. Which Svelte code correctly updates the meta description in the document head when desc changes?

<script>
  let desc = 'Initial description';
</script>

<!-- Choose the correct svelte:head usage -->

hard

A.

B.

C.
{desc}

D.

Solution

1. Step 1: Understand attribute binding in svelte:head

   To dynamically set an attribute value, use curly braces without quotes around the variable, like content={desc}.

2. Step 2: Check invalid options

   uses quotes around {desc}, so it treats it as a literal string, not variable. {desc} incorrectly places content inside <meta>, which is a void tag and cannot have children. misses curly braces around desc.

3. Final Answer:

   <svelte:head> <meta name="description" content={desc}> </svelte:head> -> Option D

4. Quick Check:

   Use content={variable} without quotes for dynamic meta tags = A [OK]

Hint: Use content={desc} without quotes for dynamic meta tag content. [OK]

Common Mistakes:

• Putting quotes around {desc} making it a string
• Adding children inside <meta> tag
• Using incorrect tag closing for void elements