SEO Management

SvelteKit Starter Kit

Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.

SvelteKit > SEO Management

SEO Management

Similarly to what we offer with responsive images, our GraphQL API also offers a way to fetch pre-computed SEO meta tags based on the content you insert inside DatoCMS.

You can easily use this information inside your Svelte app with the help of our @datocms/svelte package.

Here's a sample of the meta tags you can automatically generate:

1
<title>DatoCMS Blog - DatoCMS</title>
2
<meta property="og:title" content="DatoCMS Blog" />
3
<meta name="twitter:title" content="DatoCMS Blog" />
4
<meta name="description" content="Lorem ipsum..." />
5
<meta property="og:description" content="Lorem ipsum..." />
6
<meta name="twitter:description" content="Lorem ipsum..." />
7
<meta property="og:image" content="https://www.datocms-assets.com/..." />
8
<meta property="og:image:width" content="2482" />
9
<meta property="og:image:height" content="1572" />
10
<meta name="twitter:image" content="https://www.datocms-assets.com/..." />
11
<meta property="og:locale" content="en" />
12
<meta property="og:type" content="website" />
13
<meta property="og:site_name" content="DatoCMS" />
14
<meta property="article:modified_time" content="2020-03-06T15:07:14Z" />
15
<meta name="twitter:card" content="summary" />
16
<meta name="twitter:site" content="@datocms" />
17
<link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
18
<link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
19
<link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
20
<link sizes="192x192" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />

To do that, first install the @datocms/svelte package.

yarn add @datocms/svelte

Then, inside your +page.server.ts, feed content coming from a faviconMetaTags or _seoMetaTags query:

1
const query = `
2
  query HomeQuery {
3
    site: _site {
4
      favicon: faviconMetaTags {
5
        attributes
6
        content
7
        tag
8
      }
9
    }
10
    blog {
11
      seo: _seoMetaTags {
12
        attributes
13
        content
14
        tag
15
      }
16
    }
17
  }
18
`;
19

20
export const load = () => {
21
  return executeQuery(query);
22
};

Then use the <Head /> component to apply them to the page:

<script>
  import { Head } from '@datocms/svelte';

  export let data;
</script>

<Head data={[...data.page.seo, ...data.site.favicon]} />

Want to know more about SEO customization in DatoCMS? Check out this video tutorial:

Working with and customizing SEO Fields

Play video »