SEO and meta tags in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a page title in SvelteKit.

Svelte

<svelte:head>
  <title>[1]</title>
</svelte:head>

Drag options to blanks, or click blank then click option'

Ameta

Bhead

CMy Awesome Page

Dscript

Attempts:

3 left

💡 Hint

Common Mistakes

Using <meta> instead of <title> for the page title

Placing the title tag outside <svelte:head>

The <title> tag inside <svelte:head> sets the page title for SEO and browser tabs.

2fill in blank

medium

Complete the code to add a meta description tag in SvelteKit.

Svelte

<svelte:head>
  <meta name="description" content="[1]" />
</svelte:head>

Drag options to blanks, or click blank then click option'

Aviewport settings

BThis is a great page about SvelteKit.

Ccharset UTF-8

Dauthor name

Attempts:

3 left

💡 Hint

Common Mistakes

Putting viewport or charset info in the description meta tag

Leaving the content attribute empty

The meta tag with name="description" provides a summary for search engines.

3fill in blank

hard

Fix the error in the meta charset tag inside SvelteKit head.

Svelte

<svelte:head>
  <meta charset=[1] />
</svelte:head>

Drag options to blanks, or click blank then click option'

Autf8

BUTF-8

C'UTF-8'

D"UTF-8"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the charset value

Using single quotes instead of double quotes

The charset value must be a quoted string like "UTF-8" for valid HTML.

4fill in blank

hard

Fill both blanks to add viewport meta tag for responsive design in SvelteKit.

Svelte

<svelte:head>
  <meta name="viewport" content="width=[1], initial-scale=[2]" />
</svelte:head>

Drag options to blanks, or click blank then click option'

Adevice-width

B1.0

C100%

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using percentage instead of device-width for width

Setting initial-scale to an integer greater than 1

The viewport meta tag controls layout on mobile devices. device-width sets width to screen size, and 1.0 sets initial zoom.

5fill in blank

hard

Fill all three blanks to add Open Graph meta tags for social sharing in SvelteKit.

Svelte

<svelte:head>
  <meta property="og:title" content="[1]" />
  <meta property="og:description" content="[2]" />
  <meta property="og:image" content="[3]" />
</svelte:head>

Drag options to blanks, or click blank then click option'

AMy SvelteKit Site

BWelcome to my awesome SvelteKit website.

Chttps://example.com/image.png

Dhttps://example.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using og:image with a non-URL value

Leaving any Open Graph tag content empty

Open Graph tags improve how links appear on social media. Title, description, and image must be set properly.

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