Optimize metadata for crawlers

Make your site discoverable by the World Wide Web (and its crawlers). Here are references that inspired the implementation documented below:

Update the layout and create a partial for Open Graph meta tags

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    ...

    <%= render 'layouts/og_meta_tags', tags: {
      title: title,
      description: description,
      image: image_url('og-image.jpg'),
      author: author,
      type: "website",
      site_name: site_name,
      url: canonical_url,
    } %>

    <%= tag :link, rel: "canonical", href: canonical_url %>

    <%= favicon_link_tag 'favicon.ico', sizes: '32x32' %>
    <%= favicon_link_tag 'icon.svg', type: 'image/svg+xml' %>
    <%= favicon_link_tag 'apple-touch-icon.png', rel: 'apple-touch-icon' %>

    <%= tag :meta, name: "robots", content: robots_content %>

    ...

    # remove the previous favicon tags
    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    ...
  </head>

  ...
</html>
app/views/layouts/_og_meta_tags.html.erb
<%- tags.reject { |_key, content| content.blank? }.each do |key, content| %>
  <%= og_meta_tag(key, content) %>
<%- end %>

Create helpers for the meta tag contents

app/helpers/application_helper.rb
module ApplicationHelper
  ...

  def site_name
    "Rails Static"
  end

  def title
    [ @page.title.presence, site_name ].uniq.compact.join(" · ")
  end

  def description
    @page.frontmatter&.dig(:description)
  end

  def author
    "François Catuhe"
  end

  def canonical_url
    url_for(only_path: false)
  end

  def robots_content
    Rails.env.production? ? "index, follow" : "noindex, nofollow"
  end

  def og_meta_tag(key, content)
    case key
    when :title, :description, :image
      tag(:meta, name: key, property: "og:#{key}", content: content)
    when :author
      tag(:meta, name: key, content: content)
    else
      tag(:meta, property: "og:#{key}", content: content)
    end
  end
end

Create favicons and images

In app/assets/images/:

In public/:

Commit: Web page metadata

→ Generate sitemaps and robots.txt

← Highlight code with Rouge