Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 1.53 KB

README.md

File metadata and controls

57 lines (42 loc) · 1.53 KB

Social share, SEO and Favicon meta tags

Just like the image component, <Seo /> is a component specially designed to work seamlessly with DatoCMS’s _seoMetaTags and faviconMetaTags GraphQL queries so that you can handle proper SEO in your pages.

You can use <Seo /> in your pages, and it will inject title, meta and link tags in the document's <head> tag.

Table of contents

Usage

<Seo />'s data prop takes an array of Tags in the exact form they're returned by the following DatoCMS GraphQL API queries:

  • _seoMetaTags query on any record, or
  • faviconMetaTags on the global _site object.

Example

Here is an example:

---
import { Seo } from '@datocms/astro/Seo';
import { executeQuery } from '@datocms/cda-client';

const query = gql`
  query {
    page: homepage {
      title
      seo: _seoMetaTags {
        attributes
        content
        tag
      }
    }
    site: _site {
      favicon: faviconMetaTags {
        attributes
        content
        tag
      }
    }
  }
`;

const result = await executeQuery(query, { token: '<YOUR-API-TOKEN>' });
---

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