Implementing AMP pages in Textpattern

beechy · 2016-03-15 10:58:02

I have a news publishing site, and want to implement AMP pages (https://www.ampproject.org/), as these seem to be taking off at the moment.

I’ve noticed that AMP pages were discussed on the forum back in October – http://forum.textpattern.com/viewtopic.php?id=46404

I’d say that an AMP page extension for Textpattern would be really useful, but writing a Textpattern extension is well beyond my abilities.

Almost all of the major UK news publishers now have AMP pages – the Mirror, the Guardian, Daily Mail etc these pages display as a carousel at the top of search engine results in Google when on a mobile device, making them really prominent.

My question is….

Is there a way in Textpattern to have articles from say the news section displaying at two different urls (effectively in two Textpattern sections)?

i.e www.mysite.co.uk/news/name-of-article
and
www.mysite.co.uk/amp/name-of-article

If this is possible I could then use a different Textpattern page and different Textpattern forms to format the /amp section content.

I would use the rel=“canonical” and link rel=“amphtml” to ensure the /amp pages were not seen as duplicates by the search engines.

It would be fairly straight forward to change the content to the AMP format via article forms as my article images use the article image field, I also have custom fields setup for youtube videos so these would be fairly straight forward to change to the amp html as well.

Most of the other article body content is straight forward HTML which is allowed in AMP pages.

Other content directly embedded in the article body such as embedded tweets would be slightly more complicated and would need re-formatting on the fly. For example if an article contained a twitter embed.

A list of all of the component available in AMP can be viewed here – https://www.ampproject.org/docs/reference/extended.html.

Any advice with the best way of going about implementing AMP pages in textpattern would be great.

Last edited by beechy (2016-03-15 11:00:26)

towndock · 2016-03-15 15:47:58

Rather than have two separate addresses for AMP & standard html content, you may want to have Textpattern deliver the AMP content to only mobile devices.

This is cleanly accomplished using plugin adi_mobile.

You can format one section, using one Textpattern page (and forms as needed).

michaelkpate · 2016-03-15 16:13:25

I have a Textpattern Plugin for AMP: mkp_if_amp

It works but I haven’t officially released it because I am cleaning up the documentation. I will try and get it complete later today.

etc · 2016-03-15 17:10:02

beechy wrote #298274:

Is there a way in Textpattern to have articles from say the news section displaying at two different urls (effectively in two Textpattern sections)?

i.e www.mysite.co.uk/news/name-of-article
and
www.mysite.co.uk/amp/name-of-article

If this is possible I could then use a different Textpattern page and different Textpattern forms to format the /amp section content.

AFAIR, this was possible in earlier versions (4.4?), but considered as a security hazard and patched. IMO, we should rethink it. Meanwhile, you effectively need a plugin, I guess. adi_mobile is a great choice for your mobile visitors, but I’m not sure Google will be able to detect your pages as AMP.

beechy · 2016-03-16 09:50:36

Thanks for all the replies.

michael the plugin you have looks really cool, and straight forward to implement. I’m going to install it and I will report back if I manage to get my AMP pages showing in Google.

Is there anyway the plugin can rewrite HTML tags for AMP that are added directly to the <txp:body /> for example if a user adds an image to the article body this would need changing to –

<amp-img src=“image-name.jpg” width=“1080” height=“610” layout=“responsive” alt=“an image”></amp-img>

Instead of the usual <img> HTML tag

Or is this something that could be done in the actual textpattern form for the amp page?

Thanks

Tom

Bloke · 2016-03-16 10:11:54

etc wrote #298285:

AFAIR, this was possible in earlier versions (4.4?), but considered as a security hazard and patched. IMO, we should rethink it.

Then be my guest and rethink away… :-)

etc · 2016-03-16 15:14:32

Bloke wrote #298297:

Then be my guest and rethink away… :-)

Yeah, I’ve got the pawa! and got a simple (and secure) plan: what if txp permlinks (to articles, sections and so on) had some inherit attribute? So, on http://my.multiflavour.site/?flavour=amp page, all txp permlink tags with inherit="flavour" set would preserve flavour=amp part. We then could retrieve it (adi_gps into core!) and conditionally output appropriate pages/forms.

This could be useful for multilingualism too: just preserve lang part where pertinent. That’s like etc_url works, and it looks easy to implement. We could even store the default value of inherit in some preference, to fully automatize links construction. Is it a plan?

Bloke · 2016-03-16 20:33:30

etc wrote #298320:

some inherit attribute?

Interesting. Not sure that ‘inherit’ is the right term, but I can’t think of anything better. Maybe ‘preserve’? Hmmm, maybe not.

Does this have implications for other tags or internal functions (link_to_next, prev, older, etc) and pagination?

Open up a new branch on GitHub and we’ll try it out.

Destry · 2016-03-17 07:39:35

beechy wrote #298274:

Is there a way in Textpattern to have articles from say the news section displaying at two different urls (effectively in two Textpattern sections)?

i.e www.mysite.co.uk/news/name-of-article
and
www.mysite.co.uk/amp/name-of-article

I don’t know how or if AMP plays into it, but I’m pretty sure you take a rank hit by SEs for duplicate content. You might want ensure you’ve put in all the contingencies you can if you go down that road.

Bloke, etc,

With that in mind, I’m not sure it’s a good idea to encourage easy creation of replicate content in Txp, but maybe I’m not understanding the issue at hand in relation to Txp functionality.

A better approach to this by users, architecturally speaking, is to think about content models more and structure content (i.e., “chunk” it down to the component pieces) so it can be reassembled and output in more granular — thus potentially similar — ways without being exactly the same as some other full page. It doesn’t take much to create a little variation in output while still communicating the same message in the information. That way you don’t get the SE hit and don’t have to worry about the metadata contingencies.

beechy · 2016-03-17 12:55:11

AMP takes account of the duplicate content issue with rel=“canonical” and link rel=“amphtml” metatags, so as long as these are included there would be no hit for duplicate content with regards to SEO.

I’ve installed Michael’s mkp_if_amp extension and this works really well allowing you to use a new textpattern form when /amp is added to the end of an article here is the example on his demo site:

http://ampdemo.cmsstyles.com/2/you-wanna-be-where-you-can-see-our-troubles-are-all-the-same/amp

The only problem is that there are a number of HTML tags that are not valid in AMP HTML – for example the <img> tag.

I’ve managed to use a different forms to reformat the <txp:article_image /> for AMP for example:

<txp:if_article_image>
<amp-img src="<txp:image_url id='<txp:custom_field name="article_image" />' />" layout="responsive" alt="<txp:title />" width="1170" height="800"></amp-img>
</txp:if_article_image>

But in a lot of my articles there are also images and other HTML that have been embedded directly into the <txp:body />

It looks like some of the other CMS’s have got round this using a re-write engine extension which effectively re-writes any HTML embedded in the main body to valid AMP tags when on the AMP page.

Last edited by beechy (2016-03-17 12:55:39)

Destry · 2016-03-17 13:08:18

beechy wrote #298350:

AMP takes account of the duplicate content issue with rel=“canonical” and link rel=“amphtml” metatags, so as long as these are included there would be no hit for duplicate content with regards to SEO.

Good to know. Thanks.

If TXP Magazine ever fired up again, your situation would a good article. I’d be interested in seeing your news site, when ready. Be sure to share it.

etc · 2016-03-17 13:21:38

beechy wrote #298350:

The only problem is that there are a number of HTML tags that are not valid in AMP HTML – for example the <img> tag.
…
It looks like some of the other CMS’s have got round this using a re-write engine extension which effectively re-writes any HTML embedded in the main body to valid AMP tags when on the AMP page.

I don’t think it’s the only problem, but have no time to develop right now, sorry. As for this one, you can try to install etc_query and replace <txp:body /> with

<txp:etc_query data='<txp:body />'
	replace='//img&=<amp-img{@*} layout="responsive" />' />

or something like that. You can transform other HTML tags into their AMP versions this way.

Textpattern CMS

Textpattern CMS support forum

#1 2016-03-15 10:58:02