---
title: "AMP compatibility"
date: "2020-04-27T10:25:16+00:00"
summary: "Optimize your site for mobile with AMP compatibility. Learn requirements, supported elements, and how to adapt Cohesion layouts for faster loading and improved search visibility on mobile devices."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/amp-compatibility"
id: "0f266c4e-10aa-435f-9cdd-c209027bdc36"
---

Table of contents will be added

AMP (Accelerated Mobile Pages), is a stripped down form of HTML designed to be lightweight and serve mobile content much faster than regular pages. Search engines favour AMP pages when searching on a mobile device, as these pages load quicker than the full site.

Requirements
------------

*   **Install the [Accelerated Mobile Pages (AMP) module](https://www.drupal.org/project/amp) and [AMP theme module](https://www.drupal.org/project/amptheme).**  
    See the [AMP installation and setup guide](/drupal-starter-kits/add-ons/site-studio/amp-installation-and-setup-guide "AMP installation and setup guide") for more information.
*   **Cohesion master templates, content templates, view templates and menu templates will not be used on AMP pages.**  
    The AMP theme will provide a header, footer and content area.
*   **There are special formatters for text, image and iframe content type fields.**  
    This is so AMP-compatible versions are rendered on AMP pages. These can be activated in field display settings for the AMP display mode.
*   **Cohesion base styles and custom styles will not be used on AMP pages.**  
    All CSS must be inline or defined in your AMP theme stylesheet. See [Customising your AMP sub-theme](/drupal-starter-kits/add-ons/site-studio/customising-your-amp-sub-theme "Customising your AMP sub-theme") for more information.

How do I make my Cohesion layout canvas compatible with AMP?
------------------------------------------------------------

*   **Remove unsupported elements from components.**  
    Custom javascript isn't supported by AMP, so some Cohesion elements need to be removed from your component layout canvas. Unsupported elements include:
    
    *   Youtube video background
    *   Slider container
    *   Slide
    *   Accordion tabs container
    *   Accordion tabs item
    *   Google map
    *   Google map marker
    *   Picture
*   **Link your AMP theme stylesheet to component elements by adding CSS classes to them.**  
    If any CSS you've defined in your AMP stylesheet depends on CSS classes, make sure you add these classes to your component elements using the `Markup` tab of element settings. See [Customising your AMP sub-theme](/drupal-starter-kits/add-ons/site-studio/customising-your-amp-sub-theme "Customising your AMP sub-theme") for more information.
    

Useful resources
----------------

*   [AMP installation and setup guide](/drupal-starter-kits/add-ons/site-studio/amp-installation-and-setup-guide "AMP installation and setup guide")
*   [Customising your AMP sub-theme](/drupal-starter-kits/add-ons/site-studio/customising-your-amp-sub-theme "Customising your AMP sub-theme")
*   [AMP Drupal documentation](https://www.drupal.org/docs/8/modules/accelerated-mobile-pages-amp/amp-version-82)