While you can fetch the content of a "SEO and Social" field just like any other field, the GraphQL API exposes on every record a much simpler _seoMetaTags
field that you can use to easily get HTML meta tags based on the information present in the record itself:
{blogPost {_seoMetaTags {tagattributes}}}
_seoMetaTags
generated? Meta tags are generated merging the values present in the record's "SEO and Social" field, together with the global SEO Preferences that you can configure in the Content tab.
If the record doesn't have a "SEO and Social" field, the method tries to guess reasonable values by inspecting the other fields of the record (single-line strings and images).
title,
og:title
, twitter:title
These tags will be composed by concatenating the title of the record together with the Title suffix setting. If no "SEO and Social" field is present, or the title is not specified, the tags will be generated from the title provided in the global SEO settings.
If the total length of the title exceeds 60 characters, the suffix will be omitted.
description
, og:description
, twitter:description
These tags are generated using the description field in the "SEO and Social" field. If no such field is present, or the description is not specified, the tags will be generated from the description specified in the global SEO settings.
og:image
, og:image:width
, og:image:height
, og:image:alt
, twitter:image
, twitter:image:alt
These tags are generated using the image field in the "SEO and Social" field. If no such field is present, or the image is not specified, the tags will be generated from the image specified in the global SEO settings.
robots noindex
A robots noindex
tag will be added if either global SEO Preferences or the "SEO and Social" field have a "Prevent from being indexed by search engines" enabled.
og:locale
This tag is generated using either the locale specified in the query filter, or the main locale.
og:type
If the model is a singleton an og:type
of type website
will be returned, otherwise an og:type
of type website
will be returned.
og:site_name
The tag is generated from the site name attribute (if provided)
twitter:site
The tag is deduced from the twitter_account attribute (if provided)
twitter:card
The tag is generated from using the twitter_card field in the "SEO and Social" field. If no such field is present, the global SEO settings will be used.
article:modified_time
This tag is generated using the updated_at meta attribute of the Record
article:publisher
The tag is deduced from the facebook_page_url attribute (if provided)
Similarly, you can get the meta tags needed to properly show the site's favicon with the _faviconMetaTags
attribute contained inside the _site
field:
{_site {faviconMetaTags {tagattributes}}}
If you're building an app, you can request additional meta tags with the variants
argument:
{_site {faviconMetaTags(variants: [icon, appleTouchIcon, msApplication]) {tagattributes}}}
See an example of how the SEO meta tags are generated in Next.js.
Want to know more about SEO customization in DatoCMS? Check out this video tutorial: