How to Integrate Google AMP Pages in a Ruby on Rails Application

Because All Javascript Was a Mistake

6 min readOct 1, 2024

As a Ruby on Rails developer, you’re likely familiar with the need for optimized performance and responsiveness in web applications. While Rails offers a robust framework for building web apps, delivering a high-performance experience on mobile devices can still be challenging due to slower load times and large content sizes. Google’s Accelerated Mobile Pages (AMP) is a solution designed to address these issues by providing a framework that dramatically improves page loading speeds, especially on mobile devices.

In this article, we’ll explore the specific benefits of integrating AMP into a Ruby on Rails application and walk through the steps of setting it up.

Why Should Ruby on Rails Developers Care About AMP?

Faster Page Loads Mean Happier Users

AMP is engineered for speed. By stripping down HTML, limiting JavaScript, and enforcing best practices for CSS, AMP ensures that pages load as quickly as possible. For a Rails developer, this can translate into noticeably faster page delivery on mobile devices, which means:

Better user experience: Fast load times keep users engaged. Studies show that users are more likely to abandon a page that takes longer than 3 seconds to load.

Lower bounce rates: Speed matters, and the faster your pages load, the less likely users are to leave before fully exploring your content.

SEO Boost with Higher Search Rankings

Google prioritizes page speed as a key factor in search rankings, especially on mobile. AMP pages, being optimized for speed, have a better chance of ranking higher in mobile search results. For Ruby on Rails developers building content-heavy websites — such as blogs, news platforms, or e-commerce applications — implementing AMP can result in:

Higher visibility in Google search results: AMP pages often appear in Google’s “Top Stories” carousel or in rich search results, increasing your chances of getting noticed.

Increased organic traffic: A higher ranking and better visibility lead to more traffic, giving your Rails application the exposure it deserves.

Mobile-First Approach

With mobile users accounting for the majority of web traffic, AMP gives Rails developers an opportunity to adopt a mobile-first strategy without overhauling their existing app. AMP focuses on delivering content to mobile devices efficiently, which allows you to:

Optimize for mobile users: AMP ensures a smooth mobile experience by enforcing lightweight, performance-focused HTML and CSS.

Reach a wider audience: By delivering content quickly and responsively, your application becomes more accessible to users on slower connections or older mobile devices.

Improved User Retention and Conversion

A faster, smoother mobile experience often translates into better user retention and higher conversion rates. Whether you’re building a Rails-based e-commerce store or a content platform, AMP helps reduce friction in the user journey, leading to:

Higher engagement: Faster pages keep users engaged for longer periods, improving metrics like time on page and session length.

Better conversion rates: Whether it’s signing up for a service, making a purchase, or completing a form, the quicker the page loads, the more likely users are to complete actions.

Easy Integration with Rails

AMP is flexible enough to integrate smoothly into existing Ruby on Rails applications. You can easily create AMP-specific views, without disrupting your non-AMP pages. Rails’ template system and routing capabilities make this integration straightforward, allowing you to serve both AMP and non-AMP versions of the same content, depending on the user’s needs.

How to Set Up AMP in a Ruby on Rails Application

Now that we understand the benefits, let’s dive into how to implement AMP pages in a Rails app.

Step 1: Understanding AMP and Its Limitations

Before jumping into the technical implementation, it’s important to understand some key points about AMP:

No Custom JavaScript: AMP allows only a limited set of JavaScript. You’ll need to rely on AMP components for interactive elements like carousels, forms, and videos.

Strict HTML Requirements: AMP pages use a subset of HTML, so you can’t use every tag you would normally use. You’ll need to replace regular tags with their AMP equivalents, such as <img> with <amp-img>.

Performance-First Approach: AMP pages are designed to load fast, so they discourage the use of large CSS files or blocking external scripts.

Step 2: Set Up AMP Views in Rails

To add AMP pages in your Rails app, you’ll typically create separate views for AMP versions of your pages. Let’s say you have a blog application and want to serve AMP versions of your blog posts.

Create an AMP Layout:

Start by creating a new layout file for AMP pages.

touch app/views/layouts/amp.html.erb

Inside amp.html.erb, you’ll use AMP-compliant HTML.

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title><%= content_for?(:title) ? yield(:title) : "My Blog" %></title>
  <link rel="canonical" href="<%= request.original_url.gsub('/amp', '') %>">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    /* Inline your CSS */
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <header>
    <h1><%= yield(:title) %></h1>
  </header>

  <main>
    <%= yield %>
  </main>

  <footer>
    <p>&copy; <%= Date.current.year %> My Blog</p>
  </footer>
</body>
</html>

Create AMP Views:

For each action where you want to serve an AMP page, you can create an AMP-specific view. For example, if you have a posts#show action, create an AMP version:

mkdir -p app/views/posts
touch app/views/posts/show.amp.html.erb

In show.amp.html.erb, you'll use AMP-compliant components.

<article>
  <h2><%= @post.title %></h2>
  <amp-img src="<%= @post.image_url %>" width="600" height="400" layout="responsive"></amp-img>
  <p><%= @post.content %></p>
</article>

Step 3: Update Your Controller

Next, you need to modify your controller to serve AMP views when necessary. A common approach is to check for a query parameter or a specific path (like /amp) to decide whether to render the AMP version of a page.

Here’s an example:

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])

    respond_to do |format|
      format.html { render :show }
      format.amp { render layout: 'amp', template: 'posts/show.amp' }
    end
  end
end

In this example, the respond_to block is used to render the AMP template if the request format is AMP. You can trigger this using a specific URL structure or format.

Step 4: Routing for AMP Pages

You can modify your Rails routes to support AMP-specific paths.

Rails.application.routes.draw do
  resources :posts, only: [:show] do
    get 'amp', on: :member, defaults: { format: 'amp' }
  end
end

With this setup, when a user visits /posts/1/amp, Rails will respond with the AMP version of the page. The non-AMP version remains available at /posts/1.

Step 5: AMP Compliance

To ensure your AMP pages are compliant, validate your AMP pages using Google’s AMP Validator:

Open your browser’s developer tools.
Visit the AMP version of your page.
Append #development=1 to the URL.
Check the console for any AMP validation errors.

Alternatively, use the AMP Validator Chrome Extension for easy validation.

Step 6: Add the Canonical and AMP Links

To ensure that Google knows your AMP pages are connected to your canonical (non-AMP) pages, add a canonical link in your AMP pages and an AMP link in your canonical pages.

AMP Page: Include the canonical link to the non-AMP page in your AMP layout.

<link rel="canonical" href="<%= post_url(@post) %>">

Step 7: Styling AMP Pages

AMP restricts the amount of CSS you can use. Instead of linking to external stylesheets, you need to inline your CSS. The total CSS size must be under 75KB. In the AMP layout, place your custom styles inside a <style amp-custom> tag.

<style amp-custom>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }
  h1 {
    color: #333;
  }
</style>

Step 8: Testing and Deployment

Before deploying your AMP pages, make sure to test them thoroughly. Check for:

Speed: AMP pages should load significantly faster.
Validation: Ensure that there are no validation errors.
SEO: Make sure you have added canonical and AMP links correctly.

Once validated, deploy your changes, and Google will start indexing your AMP pages.

Conclusion

Integrating AMP pages into your Ruby on Rails application can greatly enhance performance, especially for mobile users. By following the steps outlined in this guide, you’ll be able to create AMP-compliant pages, improve user experience, and potentially boost your search engine rankings. Keep in mind that while AMP is powerful for performance, it’s not suited for all types of web content, so evaluate its use on a per-page basis.