Setka Editor and Google AMP

What is Google AMP?

Google AMP, or simply AMP - is standing for Accelerated Mobile Pages, a web page format, developed by Google. Web pages created in this format load instantly, even with subpar cellular connectivity. Such results are achieved by removing some of the HTML elements or by converting them into special AMP-elements.

How can it help my website?

Setka Editor WordPress plugin supports integration with the AMP for WordPress plugin. If both of those plugins are installed on your website, they increase the loading speed of mobile versions of posts, created in Setka Editor, while retaining stylistic and branding elements.

Your WordPress theme should also be AMP-compatible.

How do the Setka Editor and AMP WP plugins work together?

AMP WP plugin works in three modes: — Reader (formerly Classic) (legacy) offers a ready-made template for the theme and allows the Google bot to index the pages of the site as soon as the plugin is installed. This mode isn't recommended. — Transitional (formerly Paired) assumes that the owner of the website or the creator of the theme has created separate templates for AMP and other versions of the website. — Native is seamless integration, where the website is created out of the box specifically for AMP, and there is no need to create separate links, templates, and so on.

The Setka Editor plugin retains functionality in all three modes and allows users to convert separate elements into an AMP notation.

We generate lighter files with styles for our users, to meet the AMP design requirements.

  1. Animations in Setka Editor are transformed into AMP-animation while keeping any interactive features like activation on a specific user action or elements that change state.

  2. Responsive embeds and galleries are transformed into the corresponding AMP elements and correctly integrated into the page.

  3. For images, we display the srcset attribute with all available resolutions, allowing the browser to decide which size is best for the user. This makes loading images faster and allows content to adapt to a device’s screen size.

What are the limitations?

Like any technology, AMP has limitations that were implemented to make sure the content was as mobile-friendly as possible: proprietary HTML tags, the inability to add externals scripts that aren’t part of AMP libraries, and a limitation of inline styles to 50 kb in size.

How to Activate AMP on Your Website with Setka Editor

Before activating AMP on your website, make sure that your theme is ready to work with AMP for the WordPress plugin in Transitional (formerly Paired) mode. Learn more about preparing your theme here.

Installation and Activation

Follow these steps to activate AMP on your website with Setka Editor:

1. Update Setka Editor plugin to version 1.16.0 or later.

2. Install and activate the AMP for WordPress plugin version 1.0 or later.

3. Open the AMP for WordPress plugin settings and select Transitional (formerly Paired) or Native Mode in Template Mode option.

4. Choose one of 3 settings for Validation Handling:

4.1. Automatically accept sanitization for any AMP validation error that is encountered.

Use this setting to activate the AMP plugin for all posts. It will correct validation errors automatically. Please consider that some scripts or HTML tags can disappear which can visually affect your content. Use this setting mindfully.

If you want to pick and choose errors to be included in the AMP version, don’t use this setting.

4.2. Automatically remove CSS rules that are not relevant to a given page (tree shaking).

We recommend choosing this option if you turned off the automatic setting described above. This way the plugin deletes unrelated styles and makes the page valid.

4.3. Disable the admin bar on AMP pages.

It disables an admin bar in the AMP version of a page which allows avoiding downloads of unwanted/unnecessary styles and scripts. Check this box.

5. In Supported Templates check the first box only “posts”.

6. Save the settings.

Set up Analytics

Standard scripts to set up Google Analytics, Yandex Metrika, and others are not supported in AMP. In AMP you can install analytics with a tag and JSON object with configuration. The AMP for WordPress plugin supports this process.

Example for Google Analytics

1. Open the Analytics settings.

2. Enter the vendor in the Type field. In this case, it is Google Analytics. (Find a full list of available vendors here.

3. Enter this code in a JSON Configuration field:

{
	"vars": {
		"account": "UA-XXXXX-Y"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	}
}

Here UA-XXXXX-Y is your Google Analytics account ID.

4. Save these settings.

It’s necessary to include a valid JSON object otherwise the code won’t work. You can test your JSON for validity with this online tool.

More information about supported services and specific examples for installation — on AMP Project documentation.

Validation Errors

The AMP for WordPress plugin keeps the history of all validation for all pages. It’s available in a menu via AMP > Invalid Pages.

To quickly test any page for valid errors use this online validator or install a Google Chrome extension.

How to Prepare Your Theme to Work With the AMP for WordPress Plugin

Starting from version 0.7 of AMP for WordPress, you can register support for AMP in your theme and re-use same page templates for AMP-versions of pages as well as for non-AMP pages. The plugin has two modes for this: Transitional (formerly Paired) and Native.

Transitional (formerly Paired) Mode

In this mode, the plugin will use theme templates to display AMP versions of pages on separate URLs. For instance, if the page URL is www.example.com/article-namе, the AMP version will be available www.example.com/article-namе/amp.

To set this mode automatically add the following code to functions.php:

add_theme_support( 'amp', array(
 'paired' => true,
) );

This way the plugin will remove any unsupported tags from the markup of the page.

It’s also possible to conditionally use parts of the code only on the AMP-version of the page with is_amp_endpoint() function.

Attention! It’s necessary to create a “wrapper” for this function. Otherwise, when the AMP for WordPress plugin is not installed or activated, the website show an error “Call to undefined function”.

Here's an example of this wrapper:

function example_is_amp() {
 return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}

When this is not enough and you want to use specific templates for AMP pages — place them in a new directory like “amp-templates”, and pass it to the add_theme_support() like so:

add_theme_support( 'amp', array(
 'template_dir' => 'amp-templates',
) );

Native Mode

When AMP is in native mode there are no separate AMP-specific URLs on your site. Your entire site will use AMP on mobile and desktop.

To set this mode automatically add this code to functions.php

add_theme_support( 'amp', array(
 'paired' => false,
) );

You can also set a specific directory for AMP templates in Native mode:

add_theme_support( 'amp', array(
 'paired' => false,
 'template_dir' => 'amp-templates',
) );

It is necessary to set 'paired' => false since template_dir implies Transitional (formerly Paired) mode.

Conditional Template Support

The AMP for WordPress version v1.0-beta or later allows you to choose specific template to activate AMP on. You can set it in the plugin Settings or in the code:

add_theme_support( 'amp', array(
 'templates_supported' => array(
 'is_singular' => true,
 'is_search' => false,
 ),
) );

Or if you want to activate AMP on all pages use this snippet:

add_theme_support( 'amp', array(
 'templates_supported' => 'all',
) );

Using Interactive Elements

AMP does not support interactive elements.

PreviousInserting graphs, charts, or diagrams into a postNextInserting adverts into a post

Last updated