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.