Set up meta-tags install and use for article layout

rossta · rossta · commit 75242271a520 · 2024-07-15T21:31:35.000-04:00
diff --git a/app/content/layouts/article.html.erb b/app/content/layouts/article.html.erb
@@ -1,3 +1,8 @@
+<%= set_meta_tags(
+  title: current_page.data.title!,
+  description: current_page.data.description,
+  keywords: "Rails, Hotwire"
+) %>
 <%= render "application/skip_to_content" %>
 <%= render_layout "application" do %>
   <article itemscope itemtype="http://schema.org/Article">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html class="motion-safe:scroll-smooth">
   <head>
-    <title>Joy of Rails</title>
+    <%= display_meta_tags site: "Joy of Rails" %>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <%= render "application/google_fonts" %>
@@ -22,7 +22,6 @@
     <%= vite_javascript_tag "application.js", media: "all", "data-turbo-track": "reload" %>
 
     <%= auto_discovery_link_tag(:rss, feed_index_url, {title: "joyofrails.com"}) %>
-
     <script type="text/javascript" defer data-domain="joyofrails.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script>
     <script type="text/javascript">window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <%= yield :head %>
diff --git a/config/initializers/meta_tags.rb b/config/initializers/meta_tags.rb
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+# Use this setup block to configure all options available in MetaTags.
+MetaTags.configure do |config|
+  # How many characters should the title meta tag have at most. Default is 70.
+  # Set to nil or 0 to remove limits.
+  # config.title_limit = 70
+
+  # When true, site title will be truncated instead of title. Default is false.
+  # config.truncate_site_title_first = false
+
+  # Add HTML attributes to the <title> HTML tag. Default is {}.
+  # config.title_tag_attributes = {}
+
+  # Natural separator when truncating. Default is " " (space character).
+  # Set to nil to disable natural separator.
+  # This also allows you to use a whitespace regular expression (/\s/) or
+  # a Unicode space (/\p{Space}/).
+  # config.truncate_on_natural_separator = " "
+
+  # Maximum length of the page description. Default is 300.
+  # Set to nil or 0 to remove limits.
+  # config.description_limit = 300
+
+  # Maximum length of the keywords meta tag. Default is 255.
+  # config.keywords_limit = 255
+
+  # Default separator for keywords meta tag (used when an Array passed with
+  # the list of keywords). Default is ", ".
+  # config.keywords_separator = ', '
+
+  # When true, keywords will be converted to lowercase, otherwise they will
+  # appear on the page as is. Default is true.
+  # config.keywords_lowercase = true
+
+  # When true, the output will not include new line characters between meta tags.
+  # Default is false.
+  # config.minify_output = false
+
+  # When false, generated meta tags will be self-closing (<meta ... />) instead
+  # of open (`<meta ...>`). Default is true.
+  # config.open_meta_tags = true
+
+  # List of additional meta tags that should use "property" attribute instead
+  # of "name" attribute in <meta> tags.
+  # config.property_tags.push(
+  #   'x-hearthstone:deck',
+  # )
+end
