SEO and meta tags in Svelte

Introduction

SEO and meta tags help search engines understand your webpage. They improve how your site appears in search results and social media.

When you want your webpage to show a title in browser tabs and search results.

When you want to describe your page so search engines and social media can show a summary.

When you want to control how your page looks when shared on social media platforms.

When you want to specify keywords to help search engines categorize your content.

When you want to set the page language and character encoding for better accessibility.

Syntax

Svelte

<svelte:head>
  <title>Your Page Title</title>
  <meta name="description" content="Page description here">
  <meta name="keywords" content="keyword1, keyword2">
  <meta property="og:title" content="Title for social media">
  <meta property="og:description" content="Description for social media">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</svelte:head>

The <svelte:head> tag lets you add elements inside the HTML <head> section.

Meta tags inside <svelte:head> update the page's metadata dynamically.

Examples

This sets the page title shown in the browser tab and search results.

Svelte

<svelte:head>
  <title>My Awesome Site</title>
</svelte:head>

This adds a description that search engines use to summarize your page.

Svelte

<svelte:head>
  <meta name="description" content="Learn about Svelte SEO basics">
</svelte:head>

These tags help control how your page looks when shared on social media.

Svelte

<svelte:head>
  <meta property="og:title" content="Svelte SEO Guide">
  <meta property="og:description" content="How to add meta tags in Svelte">
</svelte:head>

Sample Program

This Svelte component sets the page title and description dynamically using variables. The meta tags inside <svelte:head> update the page metadata for SEO.

Svelte

<script>
  let pageTitle = "Welcome to My Site";
  let pageDescription = "This is a simple Svelte page with SEO meta tags.";
</script>

<svelte:head>
  <title>{pageTitle}</title>
  <meta name="description" content="{pageDescription}">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</svelte:head>

<main>
  <h1>{pageTitle}</h1>
  <p>{pageDescription}</p>
</main>

Important Notes

Always include a <title> tag for better SEO and user experience.

Use descriptive and concise content in meta description to improve search result snippets.

Remember to add viewport meta tag for mobile-friendly responsive design.

Summary

Use <svelte:head> to add SEO meta tags in Svelte components.

Meta tags like title and description help search engines and social media.

Dynamic meta tags improve your page's visibility and sharing appearance.

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