0
0
Svelteframework~5 mins

SEO and meta tags in Svelte

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
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>
OutputSuccess
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.