Guide to Using the Meta-tags Gem

What is the Meta-tags Gem?

The meta-tags gem is a Ruby on Rails tool that helps you manage the meta tags for your web application. These meta tags are crucial for improving SEO, enhancing social media sharing, and controlling how your application behaves on mobile devices.

Example Meta Tags Code

<%= display_meta_tags site: "Locomotive",
title: "Locomotive",
description: "Ruby on Rails SaaS boilerplate",
icon: "icon.png",
keywords: "Ruby on Rails, rails, SaaS, boilerplate, Locomotive, entrepreneurship",
image: asset_url("icon.png"),
og: {
  title: :title,
  description: :description,
  image: asset_url("icon.png")
}
%>
      

The above code dynamically generates meta tags for the page, including Open Graph (OG) tags for social media sharing.

Key Meta Tag Options

• Site: The name of the website or application. Here, it's set to "Locomotive".
• Title: The title of the current page. This is usually displayed in search engine results and browser tabs.
• Description: A brief summary of the page's content, important for both SEO and social media previews.
• Icon: The favicon or icon of the application, referenced as "icon.png" in this example.
• Keywords: A list of keywords related to the page, which can improve SEO rankings.
• Image: The URL of an image (such as the logo or a representative image) that appears in social media shares.

Open Graph (OG) Tags for Social Media

The Open Graph tags are used to control how your website appears when shared on social media platforms like Facebook, LinkedIn, or Twitter. In the example, the og key defines these properties:

• og:title: Specifies the title of the content shared on social media. In this case, it uses the same title as the page.
• og:description: Defines a description of the content for social media previews.
• og:image: Sets the image that appears in social media shares.

Mobile-specific Meta Tags

• viewport: Controls the layout on mobile devices. The value width=device-width,initial-scale=1 ensures that the website is responsive, scaling to fit the width of the device.
• apple-mobile-web-app-capable: Setting this to "yes" allows the website to function like a native app on iOS when saved to the home screen.

Security-related Meta Tags

• csrf_meta_tag: This tag helps protect your application from CSRF (Cross-Site Request Forgery) attacks.
• csp_meta_tag: This tag enables Content Security Policy (CSP), helping prevent a wide range of attacks, including XSS (Cross-Site Scripting).

Conclusion

By properly configuring the meta-tags gem, you can significantly improve your application's SEO, social media visibility, and mobile experience. Remember to test your meta tags using tools like the Facebook Sharing Debugger or Google's Rich Results Test.