page_meta

Easily define <meta> and <link> tags. I18n support for descriptions, keywords and titles.

Installation

gem install page_meta

Or add the following line to your project's Gemfile:

gem "page_meta"

Usage

Your controller and views have an object called page_meta. You can use it to define meta tags and links. By default, it will include the encoding, language and viewport meta tags.

<meta charset="utf-8" />
<meta name="language" content="en" />
<meta itemprop="language" content="en" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

You can use I18n to define titles, descriptions and keywords. These values will be inferred from the controller and action names. For an action SiteController#index you'll need the following translation scope:

en:
  page_meta:
    title_base: "%{value} • MyApp"

    site:
      index:
        title: "Welcome to MyApp"

Previously, you could also use the page_meta.{titles,description,keywords} scopes, but this is now deprecated in favor of the above.

---
en:
  page_meta:
    titles:
      base: "%{value} • MyApp"
      site:
        index: "Welcome to MyApp"

The title without the base context can be accessed through page_meta.title.simple.

<%= page_meta.title %>          // Welcome to MyApp • MyApp
<%= page_meta.title.simple %>   // Welcome to MyApp

Sometimes you need to render some dynamic value. In this case, you can use the I18n placeholders.

---
en:
  page_meta:
    title_base: "%{title} • MyCompany"

    workshops:
      show:
        title: "%{name}"

You can then set dynamic values using the PageMeta::Base#[]=.

class WorkshopsController < ApplicationController
  def show
    @workshop = Workshop.find_by_permalink!(params[:permalink])
    page_meta[:name] = @workshop.name
  end
end

Some actions are aliased, so you don't have to duplicate the translations:

Action create points to new
Action update points to edit
Action destroy points to remove

The same concept is applied to descriptions and keywords.

---
en:
  page_meta:
    base_title: "%{value} • MyApp"
    site:
      show:
        title: "Show"
        description: MyApp is the best way of doing something.
        keywords: "myapp, thing, other thing"

Defining base url

You can define the base url.

page_meta.base "https://example.com/"

Defining meta tags

To define other meta tags, you have to use PageMeta::Base#tag like the following:

class Workshops Controller < ApplicationController
  def show
    @workshop = Workshop.find_by_permalink(params[:permalink])
    page_meta.tag :description, @workshop.description
    page_meta.tag :keywords, @workshop.tags
  end
end

Tip

The meta tag's content can also be any object that responds to the method call. This way you can lazy evaluate the content.

You can define default meta/link tags in a before_action:

class ApplicationController < ActionController::Base
  before_action :set_default_meta

  private

  def set_default_meta
    page_meta.tag :dns_prefetch_control, "http://example.com"
    page_meta.tag :robots, "index, follow"
    page_meta.tag :copyright, "Example Inc."
  end
end

Finally, you can define meta tags for Facebook and Twitter:

# Meta tags for Facebook
page_meta.tag :og, {
  image: helpers.asset_url("fb.png"),
  image_type: "image/png",
  image_width: 800,
  image_height: 600,
  description: @workshop.description,
  title: @workshop.name,
  url: workshop_url(@workshop)
}

# Meta tags for Twitter
page_meta.tag :twitter, {
  card: "summary_large_image",
  title: @workshop.name,
  description: @workshop.description,
  site: "@howto",
  creator: "@fnando",
  image: helpers.asset_url(@workshop.cover_image)
}

Defining link tags

To define link tags, you have to use PageMeta::Base#link like the following:

page_meta.link :canonical, href: article_url(article)
page_meta.link :last, href: article_url(articles.last)
page_meta.link :first, href: article_url(articles.first)

The hash can be any of the link tag's attributes. The following example defines the Safari 9 Pinned Tab icon:

page_meta.link :mask_icon, color: "#4078c0", href: helpers.asset_url("mask_icon.svg")

Rendering the elements

To render all tags, just do something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= page_meta %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Rendering titles and descriptions

You may want to render title and description on your page. In this case, you may use something like this:

<h1><%= page_meta.title.simple %></h1>
<p><%= page_meta.description.simple %></p>

If your description contains HTML, you can use page_meta.description(html: true).simple instead. It will use Rails' html_safe helpers to safely retrieve the translation, just like regular Rails would do. Please read Rails docs for more info.

Maintainer

Nando Vieira

Contributors

https://github.com/fnando/page_meta/contributors

Contributing

For more details about how to contribute, please read https://github.com/fnando/page_meta/blob/main/CONTRIBUTING.md.

License

The gem is available as open source under the terms of the MIT License. A copy of the license can be found at https://github.com/fnando/page_meta/blob/main/LICENSE.md.

Code of Conduct

Everyone interacting in the page_meta project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.