In this page

    Hugo > Managing SEO

    Managing SEO

    Given a record object, you can obtain its title, description, OpenGraph and Twitter card meta tags with the .seoMetaTags method:

    // dato.config.js
    const htmlTag = require('html-tag');
    // This function helps transforming an array of structured objects like this:
    // { tagName: 'meta', attributes: { name: 'description', content: 'foobar' } }
    // into proper HTML tags:
    // <meta name="description" content="foobar" />
    const toHtml = (tags) => ({ tagName, attributes, content }) => (
    htmlTag(tagName, attributes || {}, content)
    module.exports = (dato, root, i18n) => {
    root.createPost(`content/`, 'yaml', {
    frontmatter: {
    title: dato.aboutPage.title,
    type: 'about',
    seoMetaTags: toHtml(dato.aboutPage.seoMetaTags),
    content: dato.aboutPage.content

    This will generate a pretty long frontmatter, contaning the complete set of meta tags for the page:

    title: "About me"
    type: "about"
    seoMetaTags: '<title>About me</title><meta property="og:title" content="About me"><meta...'
    This is the page content, yay!!

    Meta tags are generated merging the values present in the record's SEO meta tags field together with the Global SEO settings you can configure under Content > Settings:

    If the record doesn't have a SEO meta tags field, the method tries to guess reasonable values by inspecting the other fields of the record (single-line strings and images).

    Your page title will be composed concatenating the title of the record together with the Title suffix setting. If the total length of the title exceeds 60 characters, the suffix will be omitted.

    {{ if isset .Params "seometatags" }}
    {{ .Params.seometatags | safeHTML }}
    {{ end }}
    {{ .Site.Data.settings.seoMetaTags | safeHTML }}
    <h1>{{ .Title }}</h1>

    Favicon meta tags

    Under the Content > Settings section you can also configure your website favicon:

    You can also get desktop, iOS, Android and Windows Phone favicon meta tags with the method:

    // dato.config.js
    module.exports = (dato, root, i18n) => {
    // Create a YAML data file to store global data about the site
    root.createDataFile('data/settings.yml', 'yaml', {
    faviconMetaTags: toHtml(,

    This will be the content of src/data/settings.yml:

    faviconMetaTags: '<link rel="apple-touch-icon" sizes="57x57" href=""><link rel="apple-touch-icon" sizes="60x60" ...'
    <!-- ... -->
    {{ .Site.Data.settings.faviconMetaTags | safeHTML }}

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

    We use cookies to enhance the user experience. Do you consent their use in accordance with our cookie policy?