Getting Started With Magento 2 AMP: 2 Methods To Upgrade

• What Is AMP for Magento 2

• Why use AMP Magento Extension?

• How to Get Started With Magento 2 AMP Extension?

• How to Upgrade Magento 2 AMP from v2.x to v3.x?

• Comparison of Magento 2 AMP Extensions

• FAQs

• Summary

What Is AMP for Magento 2

AMP (Accelerated Mobile Pages) is an open-source initiative by Google to optimize web pages for mobile devices.

AMP aims to improve the loading speed and user experience on smartphones and tablets. Magento 2, a popular e-commerce platform, can benefit from implementing AMP, enhancing its mobile performance.

Magento AMP extensions are available to create AMP versions of product pages, category pages, and CMS pages. These extensions generate lightweight, fast-loading pages that comply with AMP standards. By using a Magento 2 AMP extension, you can improve your store's visibility in Google search results.

Why use AMP Magento Extension?

1. Faster Page Loading

AMP pages load significantly quicker than traditional web pages, enhancing the browsing experience on mobile devices. An AMP Magento 2 extension converts product pages, category pages, and other vital content into AMP format, utilizing the amp module for quicker loading times and lower bounce rates.

2. Google's Prioritization

Google prioritizes AMP pages in mobile search results. These pages are displayed with a distinctive lightning bolt icon. By implementing AMP in your Magento 2 store, you can boost your search engine rankings and draw more organic traffic from mobile users.

3. Better Engagement & Higher Conversions

Fast-loading pages enhance user engagement and conversion rates. When mobile users can access content swiftly and effortlessly, they are more likely to browse your products, engage with your site, and make purchases. It converts product pages, category pages, and CMS pages into AMP format.

4. Simplified Management

Magento 2 Accelerated mobile page extensions, like the Plumrocket AMP Extension, simplify the creation and management of AMP pages. The extension auto-generates AMP versions of product pages, category pages, and CMS pages, reducing the need for extensive development efforts.

5. Consistent Branding

A robust AMP Magento extension provides customization options. These options allow you to align the appearance of your AMP pages with your store's branding and theme. You can adjust AMP templates and styles to maintain a consistent look across your site.

6. Google Analytics Integration

Many AMP extensions support integration with Google Analytics. This allows you to monitor user behavior and performance metrics on your AMP pages. Such data is invaluable for optimizing your mobile strategy.

How to Get Started With Magento 2 AMP Extension?

Step 1: Install the AMP Extension

• Install the Magento 2 AMP extension using Composer, as it is the recommended method for a faster and easier installation process.

• Ensure that the extension is compatible with your Magento 2 version.

Step 2: Enable the AMP Extension

• Start by enabling the AMP extension in Sandbox mode, especially if you are installing it on your live Magento store.

• Sandbox mode prevents AMP pages from being crawled and indexed by Google bots and hides them from visitors, allowing you to create and test AMP pages until they are valid safely.

• Disable the Force AMP on Mobile Devices option when using Sandbox mode to avoid displaying invalid AMP pages to customers.

Step 3: Configure the AMP Extension

• Set the desired AMP URL style in Sandbox mode. Changing the URL style after your AMP pages are live and cached by Google CDN may result in Google Console errors.

• Choose the pages where you want to enable AMP. Start with a few page types and gradually roll out AMP on the rest of your Magento 2 website.

• You can even enable AMP for a single page, such as a specific product page URL (e.g., www.example.com/my-test-product.html).

• Set up the AMP integrations that you are currently using on the non-AMP version of your website.

Step 4: Set up the AMP Theme Design

• Configure the default AMP Theme One. It contains various templates and design settings to make your AMP pages visually appealing and consistent with your regular Magento theme.

• Customize the AMP theme to match your store's branding and design preferences.

Step 5: Personalize CMS Content

• The AMP extension provides a demo homepage and sample CMS blocks for the header, footer, and menu.

• Use the detailed how-to guides to customize the provided CMS widgets, pages, and blocks to suit your store's requirements.

Step 6: Customize the AMP Theme (Optional)

• If you require further customization beyond what is available in the backend, refer to the Developer Guide provided with the AMP extension.

• Your development team can check the official AMP documentation and customize the AMP theme accordingly.

• If needed, you can also seek help from professional AMP developers for customizations of any difficulty level.

Step 7: Validate AMP Pages

• Once all configurations are complete, use the provided guide to validate your AMP pages and test them in the Google AMP Cache.

• If you encounter any errors, refer to the Indexing Issues section in the troubleshooting documentation.

• Ensure that all AMP pages are valid before switching the AMP extension to Production mode.

Step 8: Go Live with AMP

• After validating all AMP pages, switch the AMP extension to Production mode.

• Wait for Google to index your AMP pages, which usually takes a couple of days or weeks.

• You can manually request Google to re-index your AMP pages to speed up the process.

• Ensure that your AMP pages remain valid, particularly when updating page content frequently. Doing so will help maintain optimal performance and search engine visibility.

How to Upgrade Magento 2 AMP from v2.x to v3.x?

Step 1: Back Up Customizations

• Back up the app/design/frontend/[vendor]/[theme_name]/[Extension_Name]_Amp file.

• Remove the backed-up file from the [theme_name] folder.

Step 2: Update the Extension

Choose one of the following methods to update the AMP extension on your Magento 2 store:

Method 1: Updating via Composer

1. Remove the following folders if they exist:

   app/code/[Extension_Name]/Amp

   app/code/[Extension_Name]/Base

   app/code/[Extension_Name]/ExtendedAdminUi

2. Run the appropriate command from the Magento root directory based on your AMP v2 extension installation location:

• If installed in vendor/[Extension_Name]/module-pramp:

  composer update [Extension_Name]/amp-theme-one /module-amp --with-dependencies

• If installed in app/code/[Extension_Name]/Amp:

  composer require [Extension_Name]/amp-theme-one /module-amp

3. Enter your account username and password if prompted.

4. Run the following Magento 2 commands to complete the update:

   php bin/magento cache:flush

   php bin/magento setup:upgrade

   php bin/magento setup:di:compile

   php bin/magento setup:static-content:deploy

Method 2: Updating via FTP

• Remove the app/code/[Extension_Name]/Amp folder.

• Follow the installation steps for FTP.

Step 3: Validate AMP Pages

• Check the var/log/exception.log file for AMP-related errors.

• Validate AMP pages using the provided guide.

Step 4: Integrate Third-Party Modules

• Disable unnecessary functionality for the AMP version using the \AmpApi\Api\IsAmpModeInterface::execute method.

• Add desired functionality to AMP pages by creating a custom AMP theme with templates, layouts, and CSS.

Step 5: Add Previous Customizations

If you have a custom AMP design, customize the AMP Theme One using the custom AMP theme created in Step 4.

Step 6: Re-Validate AMP Pages

• Validate your AMP pages again after adding customizations.

• Keep your AMP pages valid using Google Search Console.

Comparison of Magento 2 AMP Extensions

Feature	Plumrocket AMP Extension for Magento 2	Mageworx AMP Extension for Magento 2	Mageplaza AMP Extension for Magento 2
AMP Page Generation	Automatically generates AMP versions of product pages, category pages, and CMS pages.	Generates AMP pages for products, categories, and CMS pages automatically.	Automatically converts product, category, and CMS pages to AMP format.
Customizable Theme	Provides a customizable AMP theme that can be tailored to match your store's design.	Allows customization of AMP templates and styles to maintain brand consistency.	Offers a responsive AMP theme that adapts to different screen sizes.
Product Type Support	Supports various Magento product types, including simple, configurable, grouped, and bundled products.	Supports multiple Magento product types and attributes.	Supports various Magento product types and attributes.
Testing Mode	Offers a sandbox mode for testing AMP pages before making them live.	Offers a preview mode for testing AMP pages before publishing.	Includes a sandbox mode for testing AMP pages without affecting the live site.
Analytics Integration	Includes Google Analytics integration for tracking AMP page performance.	Includes built-in AMP validation to ensure compliance with AMP standards.	Provides Google Analytics integration for tracking AMP page metrics.
Management Interface	Provides a user-friendly interface for managing AMP settings and configurations.	Provides options to enable or disable AMP for specific pages or products.	Offers customization options for AMP templates and styles.
Pricing for a Single Site License	$199	$199	$99
Pricing for a 5-Site License	$299	$299	$149
Pricing for an Unlimited Site License	$499	$499	$249

FAQs

1. What is the Magento 2 Accelerated Mobile Pages Extension?

The Magento 2 Accelerated Mobile Pages Extension is a plugin that enhances the mobile experience of Magento 2 stores by implementing accelerated mobile page technology.

2. How does the extension improve mobile pages for Magento 2?

The extension helps create AMP pages for various elements like product pages, category pages, and CMS pages, making them load faster and offer a better user experience on mobile devices. Due to the limitation of the AMP technology, only a couple of dozen third-party services are available for use.

3. What are the key features of the Magento 2 Amp plugin?

The key features include the ability to create amp content easily, support for Google Analytics, and seamless integration with Magento 2 stores.

4. How does the extension handle non-amp pages on Magento 2 stores?

The extension automatically redirects non-amp pages to their respective amp versions, ensuring a consistent mobile experience when users access them from mobile devices.

5. Can I develop and test amp pages using this extension?

Yes, the extension provides tools to develop and test amp pages within the Magento 2 environment before making them live.

6. Does the extension support loading directly from the Google Amp cache?

Yes, AMP pages created with the extension can be loaded directly from the Google AMP cache, leading to faster performance and a better user experience.

7. Is there a Magento 2 Amp theme included with the extension?

The extension is designed to work with any Magento 2 theme seamlessly and does not include a specific Amp theme.

8. What are the main components of Accelerated Mobile Pages for Magento?

The main components include amp product pages, amp plugins, and tools to enable and manage amp content on Magento 2 stores.

Summary

Magento 2 AMP aims to help Magento store owners enhance their mobile user experience and improve search engine visibility through the implementation of Accelerated Mobile Pages (AMP). Here's a quick recap of what we've covered:

• Faster Loading and Better Rankings: Implementing AMP improves page load speed and boosts search engine rankings.

• Simple Installation and Management: Easily install, configure, and manage AMP extensions to match your store's branding.

• Enhanced User Engagement: Fast-loading pages increase user engagement and conversion rates.

• Comprehensive Options: Choose from top AMP extensions like Plumrocket, Mageworx, and Mageplaza for tailored solutions to your needs.

Explore managed Magento hosting options to improve performance and user engagement with AMP extensions.