How to enable AMP (Accelerated Mobile Pages) in Ghost?

by alvera_smith , in category: SEO , 11 days ago

How to enable AMP (Accelerated Mobile Pages) in Ghost?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

Member

by stephon , 10 days ago

@alvera_smith 

Enabling AMP (Accelerated Mobile Pages) in Ghost requires a bit of customization, as Ghost does not natively support AMP out of the box. However, you can implement AMP by editing your theme or using a few workarounds. Here's a general guide to help you enable AMP in Ghost:

Step 1: Duplicate Your Theme

  1. Backup Your Current Theme: Before making any changes, it's a good idea to create a backup of your current theme.
  2. Create a Duplicate: Duplicate your current theme folder and give it a new name, such as mytheme-amp.

Step 2: Create AMP Templates

  1. Create AMP-Specific Templates: Inside your duplicated theme folder, create AMP-specific versions of the necessary templates, such as post.hbs (e.g., amp-post.hbs).
  2. Modify Template Code for AMP: Change the to . Add the attribute to the HTML tag. Include the AMP JavaScript library in the : Use AMP-specific components for resources like images (
  3. Remove Non-AMP Compliant Elements such as custom JavaScript or third-party scripts that are not supported by AMP.

Step 3: Serve AMP Pages

To serve AMP pages in your Ghost site, you'll need to create a way for users or search engines to access AMP versions of your posts. The following methods can be used:

  1. Modify Routes: Go to your Ghost admin and navigate to Settings > Labs > Routes. Customize your routes to serve AMP templates by defining custom patterns that link to your AMP templates.
  2. Add AMP HTML Link: Within the section of your standard template, add a link to the AMP version of the post:
  3. URL Structure: Ensure your server or route configuration serves AMP pages correctly, typically under a path like /amp/.

Step 4: Validate AMP Pages

  • Use the AMP Validator to ensure that your AMP pages meet the required standards.

Step 5: Test & Deploy

  1. Check Your Site: Use various devices and browsers to ensure that both AMP and non-AMP pages work correctly.
  2. Deploy the Theme: Once you're satisfied with your AMP implementation, upload and activate your new theme through the Ghost admin under Design.


By following these steps, you can incorporate AMP into your Ghost site, improving mobile performance and complying with AMP standards. Always refer to the official AMP documentation for the latest guidelines and updates.