{"id":27813,"date":"2016-08-25T23:01:29","date_gmt":"2016-08-25T15:01:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27813"},"modified":"2023-10-23T17:00:47","modified_gmt":"2023-10-23T09:00:47","slug":"how-to-use-amp-wordpress","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/","title":{"rendered":"How to Use AMP with WordPress"},"content":{"rendered":"<p>AMP is a community effort that promises <strong>better page load performance for websites in the mobile environment<\/strong>. However, as you can see <a href=\"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/\">in our previous tutorial<\/a>, you\u2019ll need to forgo some fancy elements on your website, adhere to the rules, comply with guidelines, and <a href=\"https:\/\/www.hongkiat.com\/blog\/amp-page-validation\/\">validate your pages<\/a>. It might seem like a lot, right?<\/p>\n<p>Fortunately, if you\u2019ve built your website with WordPress, you can easily implement AMP using a plugin named <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amp-wp\">AMP-WP<\/a>. It comes with more features than you might initially realize. Let\u2019s explore how it works.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/important-amp-components\/\">Top 10 Essential AMP Components for Mobile Optimization<\/a>\n\t\t\t\t<\/p>\n<h2>Activation<\/h2>\n<p>Firstly, log in to your website and navigate to the <strong>Plugins &gt; Add New<\/strong> screen. Search for \u201cAMP\u201d, then install and activate the one by <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/automattic.com\/\">Automattic<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg\" height=\"340\" width=\"750\" alt=\"AMP, developed by Automattic, in WordPress plugin search result.\"><\/figure>\n<p>Once activated, you can view the AMP-converted post by appending <code>\/amp\/<\/code> to the end of the post URL (e.g., <code>http:\/\/wp.com\/post\/amp\/<\/code>) or by using <code>?amp=1<\/code> (e.g., <code>http:\/\/wp.com\/post\/?amp=1<\/code>) if you aren\u2019t using <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/codex.wordpress.org\/Using_Permalinks\">the Pretty Permalinks<\/a> feature on your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-post-style-basic.jpg\" height=\"400\" width=\"750\" alt=\"Basic styling of AMP post\"><\/figure>\n<p>As you can observe above, the post has basic styling, which you can further customize.<\/p>\n<h3>Points to Note:<\/h3>\n<p>There are a few things you should be aware of regarding the current state of the plugin:<\/p>\n<ul>\n<li>Archives \u2013 <strong>Category<\/strong>, <strong>Tag<\/strong>, and <strong>Custom Taxonomy<\/strong> \u2013 are not currently supported. They won\u2019t be converted into an AMP-compliant format. However, <a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-taxonomy-for-users\/\">Custom Post Types<\/a> can be integrated with AMP using a Filter.<\/li>\n<li>The plugin doesn\u2019t add a new settings screen in the Dashboard. <strong>Customizations are made at the code level<\/strong> using Actions, Filters, and Classes.<\/li>\n<li>The plugin doesn\u2019t natively support all AMP custom elements, such as <code>amp-analytics<\/code> and <code>amp-ad<\/code>. If you require these elements, you\u2019ll need to add them by hooking into the plugin\u2019s Actions or Filters.<\/li>\n<\/ul>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/wp-action-hooks-theme-customization\/\">Mastering WordPress Action Hooks for Theme Customization<\/a>\n\t\t\t\t<\/p>\n<h2>Customization<\/h2>\n<p>The plugin offers numerous Actions and Filters, granting flexibility in customizing styles, page content, and even the entire HTML markup of the AMP page.<\/p>\n<h3>Styles<\/h3>\n<p>After activating the plugin, you might want to immediately modify certain elements, such as the header background color, font family, and font size, to better align with your website\u2019s branding and character.<\/p>\n<p>To achieve this, you can use the <code>amp_post_template_css<\/code> Action in the <code>functions.php<\/code> file of your theme.<\/p>\n<pre>\r\nfunction theme_amp_custom_styles() {\r\n    ?&gt;\r\n    nav.amp-wp-title-bar {\r\n        background-color: orange;\r\n    }\r\n    &lt;?php\r\n}\r\nadd_action('amp_post_template_css', 'theme_amp_custom_styles');\r\n<\/pre>\n<p>When inspected using Chrome DevTools, these styles are added within the <code>&lt;style amp-custom&gt;<\/code> element and override the previous style rules. As a result, the header now has an orange background color.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-style-custom-output.jpg\" height=\"500\" width=\"750\" alt=\"AMP pages showcasing headers with blue and orange background colors.\"><\/figure>\n<p>You can continue writing style rules as you typically would. However, be aware of <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/develop\/style_and_layout\/style_pages\/?referrer=ampproject.org\">certain restrictions<\/a> and ensure that the style sizes remain under <code>50Kb<\/code>. If you\u2019re ever uncertain, refer to our previous article on <a href=\"https:\/\/www.hongkiat.com\/blog\/amp-page-validation\/\">how to validate your AMP pages<\/a>.<\/p>\n<h3>Templating<\/h3>\n<p>If you find yourself needing to make extensive changes beyond just styling, you might want to consider customizing the entire template. The plugin, amp-wp, offers several built-in <em>templates<\/em>, including:<\/p>\n<ul>\n<li><code>header-bar.php<\/code><\/li>\n<li><code>meta-author.php<\/code><\/li>\n<li><code>meta-taxonomy.php<\/code><\/li>\n<li><code>meta-time.php<\/code><\/li>\n<li><code>single.php<\/code><\/li>\n<li><code>style.php<\/code><\/li>\n<\/ul>\n<p>These templates resemble the standard <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\">WordPress template hierarchy<\/a>.<\/p>\n<p>You can override each of these templates by providing a file with the same name within the <code>\/amp\/<\/code> folder in your theme. Once these files are present, the plugin will use them instead of the default files, allowing you to completely modify the output of these templates.<\/p>\n<pre>\r\ntwentytwelve\r\n|-- 404.php\r\n|-- amp\r\n|   |-- meta-author.php\r\n|   |-- meta-taxonomy.php\r\n|   |-- single.php\r\n|   |-- style.php\r\n<\/pre>\n<p>You can redefine all styles using the <code>style.php<\/code> file or <strong>alter the entire AMP page structure according to your requirements<\/strong> with the <code>single.php<\/code>. However, ensure that your modifications adhere to AMP guidelines.<\/p>\n<h3>List of Hooks and Filters<\/h3>\n<p>As previously mentioned, this plugin comes with numerous <a href=\"#actions\">Actions<\/a> and <a href=\"#filters\">Filters<\/a>. While it\u2019s not feasible to cover each one in this article, we can provide a cheatsheet, a summary, and the necessary snippets:<\/p>\n<p id=\"actions\"><strong>Actions<\/strong><\/p>\n<p>The <code>amp_init<\/code> action is beneficial for plugins that depend on AMP for functionality; it\u2019s executed once the plugin has been initialized.<\/p>\n<pre>\r\nfunction amp_customizer_support_init() {\r\n    require_once dirname(__FILE__) . '\/amp-customizer-class.php';\r\n}\r\n\r\nadd_action('amp_init', 'amp_customizer_support_init');\r\n<\/pre>\n<p>Similar to the <code>wp_head<\/code> action, the <code>amp_post_template_head<\/code> action allows you to include additional elements within the <code>head<\/code> tag of AMP pages, such as <code>meta<\/code>, <code>style<\/code>, or <code>script<\/code>.<\/p>\n<pre>\r\nfunction theme_amp_google_fonts() {\r\n    ?&gt;\r\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=PT+Serif:400,400italic,700,700italic%7CRoboto+Slab:400,700&subset=latin,latin\">\r\n    &lt;?php\r\n}\r\n\r\nadd_action('amp_post_template_head', 'theme_amp_google_fonts');\r\n<\/pre>\n<p>The <code>amp_post_template_footer<\/code> action is analogous to the <code>wp_footer<\/code> action.<\/p>\n<pre>\r\nfunction theme_amp_end_credit() {\r\n    ?&gt;\r\n    &lt;footer class=\"amp-footer\"&gt;\r\n    &lt;p&gt;&copy; Hongkiat.com 2016&lt;\/p&gt;\r\n    &lt;\/footer&gt;\r\n    &lt;?php\r\n}\r\nadd_action( 'amp_post_template_footer', 'theme_amp_end_credit' );\r\n<\/pre>\n<p id=\"filters\"><strong>Filters<\/strong><\/p>\n<p>The <code>amp_content_max_width<\/code> filter is used to set the maximum width of the AMP page. This width is also applied to embedded elements, such as YouTube videos.<\/p>\n<pre>\r\nfunction theme_amp_content_width() {\r\n    return 700;\r\n}\r\nadd_filter( 'amp_content_max_width', 'theme_amp_content_width' );\r\n<\/pre>\n<p>The <code>amp_site_icon_url<\/code> filter is used to specify the icon URL, which includes both the favicon and Apple icon. By default, it uses <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/wptavern.com\/wordpress-4-3-adds-new-site-icons-feature-and-a-text-editor-to-press-this\">the image uploaded via the Site Icon interface introduced in version 4.3<\/a>.<\/p>\n<pre>\r\nfunction theme_amp_site_icon_url() {\r\n    return get_template_directory_uri() . '\/images\/site-icon.png';\r\n}\r\nadd_filter( 'amp_site_icon_url', 'theme_amp_site_icon_url' );\r\n<\/pre>\n<p>The <code>amp_post_template_meta_parts<\/code> filter is useful when you want to customize the metadata output of a post, such as the author name, category, and <em>timestamp<\/em>. Using this filter, you can rearrange the default order or remove specific metadata from the AMP page.<\/p>\n<pre>\r\nfunction theme_amp_meta($meta) {\r\n    foreach (array_keys($meta, 'meta-time', true) as $key) {\r\n        unset($meta[$key]);\r\n    }\r\n    return $meta;\r\n}\r\nadd_filter( 'amp_post_template_meta_parts', 'theme_amp_meta' );\r\n<\/pre>\n<p><code>amp_post_template_metadata<\/code> is used for customizing the <a href=\"https:\/\/www.hongkiat.com\/blog\/rich-snippets-schema-org-vocab\/\">Schema.org data structure<\/a> in AMP pages. The following example demonstrates how to provide the site logo that will be displayed in the AMP carousel in the Google search results and how to remove the page modified timestamp.<\/p>\n<pre>\r\nfunction amp_schema_json($metadata) {\r\n    unset($metadata['dateModified']);\r\n\r\n    $metadata['publisher']['logo'] = array(\r\n        '@type'   =&gt; 'ImageObject',\r\n        'url'     =&gt; get_template_directory_uri() . '\/images\/logo.png',\r\n        'height'  =&gt; 60,\r\n        'width'   =&gt; 325,\r\n    );\r\n\r\n    return $metadata;\r\n}\r\n\r\nadd_filter('amp_post_template_metadata', 'amp_schema_json', 30, 2);\r\n\r\n<\/pre>\n<p><code>amp_post_template_file<\/code> offers an alternative way to override template files. It is useful if you prefer to host your custom AMP template files in a directory other than <code>\/amp\/<\/code>.<\/p>\n<pre>\r\nfunction theme_custom_template($file, $type, $post) {\r\n    if ('meta-author' === $type) {\r\n        $file = get_template_directory_uri() . '\/partial\/amp-meta-author.php';\r\n    }\r\n    return $file;\r\n}\r\n\r\nadd_filter('amp_post_template_file', 'theme_custom_template', 10, 3);\r\n\r\n<\/pre>\n<p><code>amp_query_var<\/code> is used to change the AMP page endpoint when the URL Permalink is enabled. By default, it is set to <code>\/amp\/<\/code>. With the following configuration, the AMP page becomes accessible by adding <code>\/m\/<\/code> to the URL (e.g., <code>www.example.com\/post-slug\/m\/<\/code>).<\/p>\n<pre>\r\nfunction custom_amp_endpoint($amp) {\r\n    return 'm';\r\n}\r\n\r\nadd_filter('amp_query_var', 'custom_amp_endpoint');\r\n\r\n<\/pre>","protected":false},"excerpt":{"rendered":"<p>AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous tutorial, you\u2019ll need to forgo some fancy elements on your website, adhere to the rules, comply with guidelines, and validate your pages. It might seem like a lot, right? Fortunately,&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[3882,4663,3323,252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use AMP with WordPress - Hongkiat<\/title>\n<meta name=\"description\" content=\"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use AMP with WordPress\" \/>\n<meta property=\"og:description\" content=\"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-25T15:01:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-23T09:00:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Use AMP with WordPress\",\"datePublished\":\"2016-08-25T15:01:29+00:00\",\"dateModified\":\"2023-10-23T09:00:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/\"},\"wordCount\":826,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-use-amp-wordpress\\\/amp-wordpress.jpg\",\"keywords\":[\"Accelerated Mobile Pages\",\"ad-divi\",\"WordPress Plugins\",\"WordPress Tips\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/\",\"name\":\"How to Use AMP with WordPress - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-use-amp-wordpress\\\/amp-wordpress.jpg\",\"datePublished\":\"2016-08-25T15:01:29+00:00\",\"dateModified\":\"2023-10-23T09:00:47+00:00\",\"description\":\"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-use-amp-wordpress\\\/amp-wordpress.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-use-amp-wordpress\\\/amp-wordpress.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-use-amp-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use AMP with WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use AMP with WordPress - Hongkiat","description":"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Use AMP with WordPress","og_description":"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous","og_url":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-08-25T15:01:29+00:00","article_modified_time":"2023-10-23T09:00:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Use AMP with WordPress","datePublished":"2016-08-25T15:01:29+00:00","dateModified":"2023-10-23T09:00:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/"},"wordCount":826,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg","keywords":["Accelerated Mobile Pages","ad-divi","WordPress Plugins","WordPress Tips"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/","url":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/","name":"How to Use AMP with WordPress - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg","datePublished":"2016-08-25T15:01:29+00:00","dateModified":"2023-10-23T09:00:47+00:00","description":"AMP is a community effort that promises better page load performance for websites in the mobile environment. However, as you can see in our previous","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-use-amp-wordpress\/amp-wordpress.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-use-amp-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use AMP with WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7eB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27813"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27813\/revisions"}],"predecessor-version":[{"id":69981,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27813\/revisions\/69981"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27813"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}