Middleman > Managing SEO

Managing SEO

Given a record object, you can obtain its title, description, OpenGraph and Twitter card meta tags using the dato_meta_tags helper:

<!-- source/templates/article.html.erb -->
<% content_for(:head) do %>
  <%= dato_meta_tags(article) %>
<% end %>
<h1><%= article.title %></h1>

<html>
  <head>
    <%= yield_content :head %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

The final result will be:

<html>
  <head>
    <title>Hello world! - My Awesome Site</title>
    <meta name="description" content="..."/>
    <meta name="twitter:card" content="..." />
    <meta name="twitter:description" content="..."/>
    <meta name="twitter:image" content="..."/>
    <meta name="twitter:site" content="..."/>
    <meta name="twitter:title" content="..."/>
    <meta name="twitter:url" content="..."/>
    <meta property="og:description" content="..."/>
    <meta property="og:image" content="..."/>
    <meta property="og:locale" content="..." />
    <meta property="og:site_name" content="..." />
    <meta property="og:title" content="..."/>
    <meta property="og:type" content="..." />
    <meta property="og:url" content="..."/>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

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.

Favicon meta tags

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

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

<html>
  <head>
    <%= yield_content :head %>
    <%= dato_favicon_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Questions?

We're always happy to help with code or other questions you might have. Search our documentation, forum, contact support, or connect with our sales team. You can chat live with other developers in our Slack channel.