Svelte > 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:

    <title>DatoCMS Blog - DatoCMS</title>
    <meta property="og:title" content="DatoCMS Blog" />
    <meta name="twitter:title" content="DatoCMS Blog" />
    <meta name="description" content="Lorem ipsum..." />
    <meta property="og:description" content="Lorem ipsum..." />
    <meta name="twitter:description" content="Lorem ipsum..." />
    <meta property="og:image" content="https://www.datocms-assets.com/..." />
    <meta property="og:image:width" content="2482" />
    <meta property="og:image:height" content="1572" />
    <meta name="twitter:image" content="https://www.datocms-assets.com/..." />
    <meta property="og:locale" content="en" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="DatoCMS" />
    <meta property="article:modified_time" content="2020-03-06T15:07:14Z" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@datocms" />
    <link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <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, feed content coming from a faviconMetaTags or _seoMetaTags query directly into the renderMetaTags function:

    <script>
    import { onMount } from 'svelte';
    import { Head } from '@datocms/svelte';
    const query = `query {
    site: _site {
    favicon: faviconMetaTags {
    attributes
    content
    tag
    }
    }
    blog {
    seo: _seoMetaTags {
    attributes
    content
    tag
    }
    }
    }`;
    export let data = null;
    onMount(async () => {
    const response = await fetch('https://graphql.datocms.com/', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_API_TOKEN'
    },
    body: JSON.stringify({ query })
    });
    const json = await response.json();
    data = [...json.data.page.seo, ...json.data.site.favicon];
    });
    </script>
    <Head {data} />

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