Skip to content

Latest commit

 

History

History

Seo

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
Seo.astro
Seo.astro
 
 
index.ts
index.ts
 
 
renderMetaTagsToString.tsx
renderMetaTagsToString.tsx
 
 
types.ts
types.ts
 
 

README.md

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]} />