Head

Full Example #

Complete controller setup with view-level title override:

# app/controllers/application_controller.rb
ui.layout.build_head do |head|
  head.site_name = "My App"
  head.charset = "UTF-8"
  head.build_favicon("favicon.png", type: "image/png", size: 32)
  head.stylesheet_link_sources = ["application"]
end

# app/views/admin/users/index.html.erb
ui.layout.head.title = ["Users", "Admin"]

<head>
  <meta charset="UTF-8">
  <title>Users - Admin - My App</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="csrf-param" content="authenticity_token">
  <meta name="csrf-token" content="...">
  <link rel="stylesheet" href="/assets/application-[hash].css">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.png">
  <script type="importmap">{...}</script>
  <script type="module">import "application"</script>
</head>

Title #

Configure the page title with support for site name and separator.

head.title = "Dashboard"
head.site_name = "My App"

<title>Dashboard - My App</title>

head.title = "Dashboard"
head.site_name = "My App"
head.title_separator = " | "

<title>Dashboard | My App</title>

head.full_title = "Custom Page Title"

<title>Custom Page Title</title>

head.site_name = "My App"
head.title = ["Users", "Admin"]

<title>Users - Admin - My App</title>

Charset #

Set the character encoding for the document.

head.charset = "UTF-8"

<meta charset="UTF-8">

Content Security #

Rails security meta tags are included by default.

# default behavior

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="...">
<meta http-equiv="Content-Security-Policy" content="...">

head.skip_csrf_meta_tags = true
head.skip_csp_meta_tag = true

<!-- tags omitted -->

Favicons #

Add favicon and Apple touch icon links.

head.build_favicon("favicon-32x32.png", type: "image/png", size: 32)
head.build_favicon("favicon-16x16.png", type: "image/png", size: 16)

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32-[hash].png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16-[hash].png">

head.build_apple_touch_icon("apple-touch-icon.png")

<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">

Stylesheets #

Configure stylesheets loaded via stylesheet_link_tag.

# default behavior

<link rel="stylesheet" href="/assets/rapid_ui/application-[hash].css">

head.stylesheet_link_sources = ["application", "admin"]

<link rel="stylesheet" href="/assets/application-[hash].css">
<link rel="stylesheet" href="/assets/admin-[hash].css">

Importmaps #

Configure JavaScript module loading.

# default behavior

<script type="importmap">{...}</script>
<script type="module">import "application"</script>

head.importmap_entry_point = "admin"

<script type="importmap">{...}</script>
<script type="module">import "admin"</script>

head.importmap = nil

<!-- importmap tags omitted -->

Open Graph #

Add Open Graph meta tags for rich social media previews on Facebook, LinkedIn, and other platforms. Also generates Twitter Card meta tags.

head.build_open_graph do |og|
  og.type = "website"
  og.site_name = "My App"
  og.title = "Welcome to My App"
  og.description = "Build amazing things"
  og.url = "https://myapp.com"
  og.image_url = "https://myapp.com/og-image.png"
  og.image_alt = "My App logo"
  og.domain = "myapp.com"
  og.locale = "en_US"
end

<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:site_name" content="My App">
<meta property="og:url" content="https://myapp.com">
<meta property="og:title" content="Welcome to My App">
<meta property="og:description" content="Build amazing things">
<meta property="og:image" content="https://myapp.com/og-image.png">
<meta property="og:image:alt" content="My App logo">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="myapp.com">

On this page