SEO and favicon fields
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 { tag attributes } }} How are _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 titles can be explicitly set in the "SEO and Social" field, if present. If the record does not have that SEO field, or the title is not specified, the tags will be generated from either the record title or the title provided in the global SEO settings.
The Title suffix value from global SEO preferences will also be concatenated to the titlefield, as long as the total length of the title + suffix is 60 characters or less. If the combined length is longer, the suffix will be omitted.
The suffix will NOT be added to the OpenGraph and Twitter titles, since there are already other fields for that (og:site_name and twitter:site).
If needed, you can manually query for the suffix:
_site { globalSeo { titleSuffix }}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)
SEO title & image fallback rules
When you request _seoMetaTags from the CDA, the title and image are resolved with fallback logic. We always try to return something rather than nothing, so the value we pick may surprise you at first.
For both title and image, we check in this order and stop at the first non-empty value:
The record's SEO field — if its title/image is filled in, we use it. (If a model has 2+ SEO fields, only the first, alphabetically by API key, is ever consulted.)
One fallback field from the record. We pick a single candidate field and check only that one:
The field designated in the model settings (SEO tab), if any
Otherwise we auto-detect one:
For title: the first single-line string field marked as a heading, or failing that, the first string field of any kind.
For image: the first asset/gallery field with validation set to "Image (including SVG)", or failing that, the first asset/gallery field of any kind.
("First" always means alphabetically by API key.)
If the candidate has a value, we use it (for galleries, the first asset). If it's empty, we move on. We never try a different field on the record.
Sitewide defaults: The sitewide fallback title/image set in the main sidebar's SEO preferences settings.
Nothing: If none of the above have a value, the title/image tags are simply omitted from the
_seoMetaTagsarray.
SEO fallback rules for description
Descriptions are simpler. There's no guessing involved. We check, in order, for the first non-empty value:
The record's SEO field description
The model's designated excerpt field, if one is set in the model's SEO tab. We convert this to plain text and truncated it 200 characters.
The sitewide default description set in the main sidebar's SEO preferences settings.
Nothing: If none of the above. have a value, the description tag is omitted from the
_seoMetaTagsarray.
Favicon meta tags
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 { tag attributes } }}iOS and MS app icons
If you're building an app, you can request additional meta tags with the variants argument:
{ _site { faviconMetaTags(variants: [icon, appleTouchIcon, msApplication]) { tag attributes } }}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: