TUTORIAL: Getting Started with Accelerated Mobile Pages (AMP)

Posted in: Newsmag
Post count: 9544

ACCELERATED MOBILE PAGES (AMP) PROJECT SUPPORT LINKS

AUTOMATTIC AMP PLUGIN
https://wordpress.org/plugins/amp/

Plugin support threads
https://wordpress.org/support/plugin/amp

AMP FAQs
https://www.ampproject.org/docs/support/faqs.html

SUBMIT SITE FOR AMP SUPPORT
Google will automatically recognize the /amp/ posts being supported next time they crawl your site from your XML sitemap. You should then get email from them saying “get your site ready for AMP…” — and then they will add AMP testing to your search console (aka webmaster tools).

You have to take first step, then they will catch up eventually 🙂

ADVERTISING SUPPORT (BETA)
https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md#running-ads-from-a-custom-domain

POSSIBLE BUG WITH YOAST SEO
“Redirect ugly URL’s to clean permalinks”, if activated, it does not work, according to some folks.

Post count: 9544

SHOULD YOU DO IT OR NOT?
Note that adding AMP support is *not* necessary, required, and might not even be the best solution to add to your site for mobile, if you already have a well optimized mobile post setup, want to retain certain plugins, social links and ads, which might not translate well to the AMP format.

For example, initially you might have poor ad support, so if revenue is your main metric, this is something you’ll want to play with, or wait until it is more mature.

Google will start support on Feb. 24, 2016.

AMP IS NOT SUPPORTED BY MANY YET, GOOGLE AND ONE OTHER VENDOR I KNOW OF.
So, for example if your main audience were on Apple iOS, primarily using Safari, might not make sense to worry about this just yet! 🙂

Post count: 6600

Thanks Chris for your sharings on this matter! We haven’t made any researches on this yet however we do have this on our list and will analyze it once and if this new AMP project will gain in popularity and will have a stable implementation.

Lucian C.

Post count: 9544

Hi, Lucian
you don’t need to do anything with the theme at this time, as the plugin being updated by Automattic is theme agnostic and they have the manpower and connections with Google and are keeping it moving forward for their VIP clients (e.g., TIME magazine, etc.).

Newsmag and Newspaper both WORK with the plugin just fine, so at this time nothing theme authors need to “do” as long as nothing being injected into header to “break” the /amp/ functionality.

Example with Newsmag (a few versions back, and not fully optimized due to me messing with mod_pagespeed and trying to move server to https/2 and realizing we need full OS reload, which I’m not quite ready to do yet due to having to offload all sites, update server, then reload sites! UGH!!!)::

http://californianewswire.com/in-new-book-soviet-union-born-author-details-compelling-story-of-bondage-to-freedom/amp/

So, at this time — I’m “suggesting” you might make this thread a sticky one, and/or add to tutorials as you will be getting a lot of forum posts on this as Google rolls this out ostensibly for March 1.

Nobody “has to do this” — but many folks will “want to do this” — hence my adding this thread so we don’t see 50 posts next month on this same topic 😉

Feel free to “sticky” this for the next week, to lessen the torment.

Post count: 9544

I think I forgot the link to the AMP plugin customizations / help info:
https://github.com/Automattic/amp-wp/blob/master/readme.md

And, the BETA AMP plugin for YOAST SEO
https://github.com/Yoast/yoastseo-amp

One bug I have reported, is that the plugin will *not* work at all, when you rename the wp-content folder to anything else (I had this custom setup thing I’m working on as /assets/ — for a reason I won’t share here, but related to integrating several other installs of WP on same site at some point).

  • This reply was modified 10 years by simchris.
Post count: 196

Nice read. I notice your AMP page doesn’t have ads. Is that due to the Plugin? I saw other websites using AMP and they have ads in theres.

Post count: 83

Hello Chris , i tried it and working cool i guess with http://sonsoz.com.tr , example: http://sonsoz.com.tr/uyuyor-ama-dinlenemiyorsaniz-dikkat/amp/

I have a problem with Wp_User_Avatars

Failed to load resource: ( http://i0.wp.com/wp_user_avatar ) the server responded with a status of 400 (Bad Request)

Failed HTTP request for ” img amp-img-id=”AMP_1″ class=”-amp-fill-content -amp-replaced-content -amp-error” width=”24″ height=”24″ src=”http://1.gravatar.com/avatar/1cf423627db68b9ab0a61210e3df6342?s=24&d=wp_user_avatar&r=g””

any suggestions? What can i do with this problem , i have no idea…

2nd Problem Cant Get futured image like your site does…

Everything else seems to work great…

or anyone can help me with this problem…

  • This reply was modified 10 years by Smanchi.
  • This reply was modified 10 years by Smanchi.
Post count: 9544

Note, there is update plugin 0.3.1 today (2/24); also the “Yoast SEO Glue” plugin is now in the WordPress.org repository for auto-install from WP panel or FTP without having to mess with the github dev version!

For those using YOAST SEO + AMP, get this:
https://wordpress.org/plugins/glue-for-yoast-seo-amp/

In my test pages, the “image” works when loaded/placed between paragraphs but didn’t work when it was a featured image loaded on page outside the actual post meta.

If using the YOAST SEO GLUE addon for Yoast SEO, it looks like that will pick up the description and also make sure featured image (fallback to OG image) will be inserted into the code.

Be sure to read the threads for the plugin on WordPress.org (for both plugins).

In my tests in December I found the social plugin I was using didn’t work with AMP, as the FontAwesome font would not load and hence had broken elements for sharing.

I’ll be testing AMP with the Simple Local Avatars plugin, which is the one I happen to use for local hosting of author pix.

==========
NOTE THIS IS EVOLVING AS WE SPEAK
I just got ping back to help debug the alternate wp-content folder path bug, so will be following up with them on that today to help fix that issue.

Post count: 9544

@Brain916

Hi, right now we’re not worried about that (ads), as this is rolling out in BETA this week for Google (supposedly today), so really right now we’re more concerned with being on the front end of the roll-out vs buried in the tail end.

I will worry about ads later on … 🙂
That can be implemented by folks who want to do that, but right now we’re just making sure it works at all “properly” and gets indexed, to see what happens as it rolls out.

For example the related posts text only plugin we use, works fine. The social sharing item we used does not. I’ll have to add a CDN call for the FontAwesome font, probably to the code.

Post count: 9544

RTFM:
how to add ‘featured image’ support:
https://github.com/Automattic/amp-wp/blob/master/readme.md#featured-image

===
COMPATIBILITY NOTE
The following plugins have been known to cause issues with this plugin:

Cloudflare (Rocket Loader; modifies the output of the AMP page, which breaks validation.)

  • This reply was modified 10 years by simchris.
Post count: 20

Hello guys,

I have installed the AMP plugin and the Glue plugin (YAOST SEO + AMP) but it seems it doesnt work with cloudflare even if Rocket Loader is off.
My website : http://publikart.net
Thanks for your posts Chris.
It’s helpful !

Post count: 9544

Cloudflare will likely add an exception for /amp/ layer to not “rewrite” that. (You *might* want to poke them about that, as a customer!)

I was worried mod_pagespeed might mess it up, but that worked with no issue.

Post count: 9544

Fun fact from an article on CNET
“Look for a green thunderbolt in Google search results to find out which sites are part of the new project.”

Post count: 83

Hello chris fixed many issues with your help thnx… But i have a problem with Related News Stories, can you suggest me hwo to add the releated news section step by step , i dont understand from the https://github.com/Automattic/amp-wp/blob/master/readme.md

İf possible…

http://sonsoz.com.tr/trumpun-baskanligi-buyuk-felaket-olur/amp/

as you can see no issues anymore 🙂 THNX TONS Again…

  • This reply was modified 10 years by Smanchi.
Post count: 9544

Hi, sorry no idea how to get the related posts from theme to work with AMP.

You will need to trial/error that one on your own, I’m afraid.

I use a much simpler text-only related post plugin that caches the results with the post and I can set the “back in time” amount for the related items; so this “prints” very well with AMP as it’s just an un-ordered list, with no images or formatting classes.

If you want to disable the theme related posts, and use the plugin I use for our newswire portals — which does work with AMP, at least the way I use it (text only), you can play with this: https://wordpress.org/plugins/contextual-related-posts/

Post count: 9544

As a note for all reading this….

AMP is initially intended to help speed up loading of NEWS sites/content/posts; and not strictly intended for corporate sites based on “pages” … or ecommerce/shops.

Reason for this is that many more people read a news item each day than visit your staff bio page, from diverse locations and browsers. AMP puts a lot of the heavy lifting on the cloud/browser side so that what loads from site is as little as possible and has some of the features of mod_pagespeed and http/2 baked in among many other optimizations as well as optimizations for https.

Many of the “complaints” about AMP right now are “waaah, why don’t pages work with AMP — you suck!!” — which is ridiculous.

Point being, if you have a busy news site, it’s worth buying into. If you have a corporate site about your law firm, or an ecommerce site selling bunny t-shirts, not so much. 🙂

(editorial ends)

  • This reply was modified 10 years by simchris.
  • This reply was modified 10 years by simchris.
Post count: 94

I just read this good tutorials that guide you in the customization of the amp template

http://techprezz.com/2016/02/wordpress-amp-customize-accelerated-mobile-pages-add-google-analytics-adsense-code/

Post count: 9544

Be sure to check the AMP docs, as a number of hooks/filters *changed” in 0.3.1 — so any tutorials written first week of Feb. with v.0.2 might no longer work. But good link 🙂

UPDATES 2/25:

WINDOWS SERVERS/BLANK PAGES:
They have found potential issue with some folks having blank AMP page, due to Windows vs Unix/Linux.

CLOUDFLARE:
If you are using the Cloudflare plugin for WordPress, turn off the “HTTPS Protocol Rewriting” setting in the Cloudflare plugin. That fixed it for at least one person from feedback in the support forum.

Post count: 104

Yoast did a good tutorial on AMP along with some of the key plugins helping you get started: https://yoast.com/setting-up-wordpress-for-amp-accelerated-mobile-pages/

Post count: 9544

Also here is some updated help for enabling a function hook for Google Analytics with the AMP plugin:
https://wordpress.org/support/topic/how-to-add-google-analytics-code-to-the-amp-pages

Post count: 19

after installing the plugin, youtube videos have vanished?

Post count: 9544

They work for me. Be sure to see the support threads on WordPress.org and post any issues there.

Post count: 20

Hi

I installed the plugin AMP last Wednesday.
Since yesterday, Google Search Console reports many errors on AMP pages: Incorrect Value of Attribute, Error in shema.org newspaper, Prohibited attribute …)
Any suggestions?

Thanks
Best Regards

Jean-Luc

Post count: 9544

Best to check the support threads on WordPress.org for the plugin. That is where the action is, not here 🙂

A update should push this coming week (either 0.3.2 or 0.4 depending on how they are doing their dot revisions). They have some bugs with Windows server, some things with renamed wp-content directory, some other technical things to fix.

For the schema stuff, if using Yoast SEO, be sure to use the Yoast SEO GLUE for Amp add-on.

I believe TagDiv will ALSO look at this stuff as the plugin continues to mature, but right now it’s the only gane in town unless you want to “roll your own” as they used to say.

Post count: 20

Thanks Chris
I’ve just installed the Yoast SEO GLUE for Amp add-on.
I’m waiting for the next update of the plugin…

Regards

Viewing 25 posts - 1 through 25 (of 44 total)
The forum ‘Newsmag’ is closed to new topics and replies.