Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • What is Google AMP?
  • How can it help my website?
  • How do the Setka Editor and AMP WP plugins work together?
  • What are the limitations?
  • How to Activate AMP on Your Website with Setka Editor
  • Installation and Activation
  • Set up Analytics
  • Example for Google Analytics
  • Validation Errors
  • How to Prepare Your Theme to Work With the AMP for WordPress Plugin
  • Transitional (formerly Paired) Mode
  • Native Mode
  • Conditional Template Support
  • Using Interactive Elements

Was this helpful?

  1. Integrations
  2. Setka and WordPress

Setka Editor and Google AMP

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

Last updated 4 years ago

Was this helpful?

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 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.

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.

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.

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.

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.

2. Install and activate the plugin version 1.0 or later.

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

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

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

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

AMP for WordPress
AMP for WordPress
here
online
AMP Project documentation
online validator