Search Console & WordPress AMP Pages

search console and amp wp logos

Search Console is a useful tool to help site owners understand and improve how their pages perform in Google Search. Soon all pages that provide great page experiences will be eligible for enhanced display features in Search. The AMP framework is one way to make it easier to achieve these great page experiences. When you have AMP pages, valid structured data and AMP HTML are foundational for these display features to surface for mobile users in search. For some WordPress site owners, addressing these requirements might be an obstacle to overcome since it involves code. Luckily, the AMP plugin does much of the heavy lifting, providing valid AMP pages as soon as it is activated on a site. With that said, Search Console may report one-off errors that can seem hard to solve. We’ve learned a lot from helping users with these errors in the support forums and would like to share some tips on how to troubleshoot the most common. 

Test your AMP page first

Performing a live test of the AMP page is a good first step to check if the reported error is still present. Since Search Console reports are based on indexed data, there may be a lapse of time between the reported error and it being resolved on the current version of the page. A live test provides an up-to-date baseline and can be a timesaver before jumping into deeper investigation. Search Console has several tools to use for live tests. The AMP Test and Rich Results Test are easy to use external tools to get a current snapshot of the status of the page. They are also great to leverage during troubleshooting and to confirm when errors have been resolved, which we’ll touch on further.

AMP page detection errors

Search engines rely on the code of your site to determine how your pages are displayed and treated on their platforms. In a way, your site’s code provides instructions for what displays in the results for your site. Additionally, it can help search engines understand which version of your site is best to provide to certain visitors. AMP in particular requires the <link> tag in AMP and non-AMP content to make its pages discoverable by search engines and other platforms that support AMP. The AMP plugin automatically provides this link on your respective pages. 

Referenced AMP URL is not an AMP

This error may surface when a site is providing a paired AMP experience and external factors could be altering the way the <link> tag is rendered on your canonical (non-AMP) page or interfering with the way the AMP version of the page is served. 

For the AMP plugin, serving your site in either Reader or Transitional template mode provides this paired AMP experience where both non-AMP and AMP versions are available. 

The link to your AMP page from your canonical page will look like either of the following:

<link rel="amphtml" href="https://example.com/amp/">

<link rel="amphtml" href="https://example.com/?amp">

And the link to your canonical page from your AMP page will look like this: 

<link rel="canonical" href="https://example.com/">

Additionally, your AMP page will have the amp attribute present in the <html> tag of the page: 

<html lang="en-US" amp="" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1">

Checks: 

  • Inspect the source code of the page to make sure the canonical page fully displays the amphtml link. If the code is altered (such as removing the host name from the URL), disable any code optimizations made on the site by either performance plugins or theme settings to see if any could be involved. 
  • Visit the AMP version of a page to see if it redirects to the non-AMP page. If so, there could be a caching mechanism provided by a plugin, server-side or through a proxy service causing this issue. Try to visit the AMP version again with those disabled. 
  • Check if there is any kept invalid markup for the page under AMP > Validated URLs

The plugin will automatically redirect to the non-AMP version in Transitional mode and remove the amp attribute from the <html> tag in Standard mode to handle this error in WordPress. However, it may surface when testing directly in the AMP Test tool

  • The amp attribute could also be removed from the <html> tag by code optimizations, so checking your plugins or theme could help here as well.

Referenced AMP URL is self-canonical AMP

This error may occur when the link to the canonical page references the AMP version instead of the non-AMP version (the original page). Since the canonical link should be present only on the AMP page, it should not refer to itself. The only exception would be if you are using Standard mode which serves your pages as fully AMP (without a non-AMP version). Even in this case, the canonical link will still be the un-modified version of your page URL since it is the only version available as AMP :

<link rel="canonical" href="https://example.com/">

Checks: 

  • Inspect the source code of your AMP pages to see if the canonical link URL has been modified. Other plugins or themes could be involved if there is a change. Switching to a default theme and disabling plugins one-by-one to see which causes the issue are good troubleshooting steps.

Error in structure data element

Structured data is markup language that tells search engines about the content of your pages and to help display them in the search results. The Article structured data type is what Google Search recommends for AMP pages to display rich mobile search results. While structured data can also apply to your non-AMP pages, Search Console may report errors specifically about structured data issues for AMP as part of its checks for valid pages. Note that the AMP plugin provides basic structured data for AMP pages. There are specialized plugins and themes that can replace this with their own structured data. 

AMP version has invalid structured data

When Search Console reports this issue, it may be difficult to determine which part of the structured data is invalid. As Search Console’s guide for debugging & fixing structured data recommends, using the Rich Results Test tool is one of the best ways to clarify what needs to be addressed. After placing your AMP URL in the tool, it will highlight the invalid items:

Checks: 

  • Ensure that you’ve provided the following items the AMP plugin uses to generate default structured data:
    • Site logo
    • Featured image
  • Determine if the AMP plugin or another plugin/ theme is placing the structured data on your AMP pages. If another plugin or theme is involved, you’ll need to reach out to their authors about the errors encountered.  
  • Test your non-AMP URL in the Rich Results Test tool to check if the structured data issue also exists there. It may be another plugin or theme causing the issue. 
  • Pro tip: use the AMP Test tool to preview what your AMP search results will look like. Navigate to Preview Results to see the variety of ways your AMP pages could display in Google Search: 

If you notice items missing or incorrect, that’s a good indication there is something affecting the structured data for your page.  

Image size smaller than recommended size

Google Search provides guidelines on image sizes for both your publisher logo and article image or featured image as it pertains to WordPress to ensure optimal display in search results. As of this writing, logos should be 60px in height and/or 600px wide, and article/ featured images should be at least 1200px wide. When image dimensions are smaller than this, Search Console will provide this warning. 

Checks: 

  • Check your site logo and feature images sizes. Then resize and upload accordingly.

AMP validation errors

AMP is a framework to build websites using best practices to improve performance and user experiences in a way that can be validated. The AMP specification provides guidelines for how AMP pages should be developed. Search Console will alert you when it detects invalid markup in the code on an AMP page. The AMP plugin will remove most invalid markup with its internal validation. However, other plugins or themes (or even web server modules or CDNs) may surface invalid markup on AMP pages depending on how and when the markup is added to the page.

Custom JavaScript is not allowed

This error occurs when non-AMP compatible JavaScript surfaces on AMP pages. AMP restricts JavaScript usage since it often contributes to performance degradation and less than optimal user experiences. JavaScript is used in a variety of ways on WordPress pages to provide interactivity, visual enhancements, data tracking, and other dynamic activity.  For example, if your site has a collapsible menu, JavaScript is likely involved. To implement the same in AMP, it requires AMP compatible code alternatives (amp-script , amp-bind, and third-party JavaScript in iframes that do not block rendering are some examples).

The mandatory attribute ‘amp-custom’ is missing in tag ‘style amp-custom’

CSS on the other hand is allowed, but there are requirements. CSS is a way to style your pages with a particular design and even animations. AMP pages can have up to 75KB of CSS. Styles should be added with a single <style> tag and amp-custom attribute in the <head>of the page or inlined in the document (reference):

<style amp-custom>   h1 { color: red; }    <style>

The AMP plugin dynamically generates and inlines the correct amount and format for the CSS generated by your themes, plugins, and additional CSS added. This error appears when the amp-custom attribute is not present, which indicates styles were added to the AMP pages in an incompatible way. 

Checks: 

  • To identify if a theme or plugin is adding the JavaScript and style, disable them one by one and use the AMP Test tool (or other validation tools) to check when the error goes away. 
  • Sometimes outside services such as proxies, CDNs, and server-side modules can add JavaScript and style markup, so check those too. 
  • You may be able to narrow it down to a particular option in the theme, plugin, or service. Check if there is an AMP-friendly alternative or evaluate if the option is needed. 
  • Contact the authors of the theme, plugin or service involved for adding the invalid JavaScript or style about AMP compatibility. 
  • Consider using AMP compatible themes and plugins in the WordPress ecosystem
  • Pro tip: the AMP plugin’s Plugin Suppression feature is also a helpful tool to block plugins detected as adding invalid markup from affecting your AMP pages. 

Note that once you’ve addressed these errors, it may take some time for the AMP Status report at Search Console to reflect the changes for your site. While you can request a re-crawl / re-index of your URLs, use the live test tools (AMP Test and Rich Results Test) to confirm the errors are resolved in the meantime. 

Conclusion

Understanding and solving Search Console errors might be difficult at first. Since the AMP plugin works to ensure valid AMP pages are generated, oftentimes external factors such as a theme, plugin, or service can alter or place invalid code on AMP pages. While knowing a bit of code can help, it is not required to effectively solve these issues. Using the process of elimination while leveraging handy tools should help you confirm what is causing the problem and verify when the issue is fixed. Soon enough, those errors will be resolved and allow your AMP pages to shine in search, deliver content with speed, and provide consistent user experiences to your visitors.

Have a question or need help with the AMP plugin? Don’t hesitate to reach out in the support forums

Leave a Reply

Your email address will not be published. Required fields are marked *