AMP-WP Tweaks & Tips

The AMP (Accelerated Mobile Pages Project) plugin for WordPress is still pretty young and under heavy development.

There are little things that can help to fix current validation problems. I have a couple of fresh AMP pages, that are already indexed by Google.

0. RESOURCES

• AMP HTML
• AMP-WP
• Allowed HTML Tags
• Allowed Tags & Attributes
• Validation Errors

---

1. MISSING IMAGE (schema.org-NewsArticle)

The currently registered Microformats template (schema.org-NewsArticle) requires an image.
The AMP-WP documentation explains how to add a featured image to your pages (documentation).

I extended that a bit,  to link a default attachment image, I uploaded before. This needs to be added to your themes functions.php.

function xyz_amp_add_custom_actions() {

    add_filter( 'the_content', 'xyz_amp_add_featured_image' );

}
 

function xyz_amp_add_featured_image( $content ) {

 
 $your_attachment_id = 2016;

 
 if ( has_post_thumbnail() ) {

  $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );

        
 }else{

 $image = sprintf( '<p class="xyz-featured-image">%s</p>', wp_get_attachment_image( $your_attachment_id, 1280) );

        $content = $image . $content ;

 }

 $content = $image . $content ;

 return preg_replace('/(<br>\s*){2,}/', '<br/>',$content);

}

Next we adjust the Microformats definition. This needs to be added to your themes functions.php.

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

 

function xyz_amp_modify_json_metadata( $metadata, $post ) {

  if(empty($metadata['image'])){

    $your_attachment_id = 2016;

    $imgMeta = wp_get_attachment_metadata($your_attachment_id );

    $metadata['image'] = array(

        '@type' => 'ImageObject',

        'url' => wp_get_attachment_url( $your_attachment_id ),

        'height' => $imgMeta['height'],

        'width' =>  $imgMeta['width'],

    );

  }

    return $metadata;

}

---

2. ADD YOUR OWN AMP TEMPLATE

Read the AMP-WP documentation first :) This forces AMP-WP to override the core template with your own. Use the default template as a reference.

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

 

function xyz_amp_set_custom_template( $file, $type, $post ) {

    if ( 'single' === $type ) {

        $file = dirname( __FILE__ ) . '/amp/amp_template.php';

    }

    return $file;

}

---

3. REMOVE NONE VALIDATING CONTENT

Normally the core sanitizer should take care of that.  I am sure a filter will be added in the future. For now, this is a quick workaround. You can use a RegExp or DOMDocument to alter the amp-content in your custom template and filter things that break validation.

$attributes = $element->attributes;


while ($attributes->length) {

    $element->removeAttribute($attributes->item(0)->name);

}

I am using phpQuery for now, as it allows me to add quick fixes. DOMNode or QueryPath works nicely as well :) Will be looking at the core sanitizer and options later this week. All of this is currently added to the custom template.

 require('your-libs/phpQuery/phpQuery.php');

 $doc = phpQuery::newDocumentHTML($this->get( 'post_amp_content' ));

1. Remove REL attributes that are not allowed. Only registered Microformat rel attributes are allowed.

   
    $doc['.prettyphoto']->removeAttr("rel");
   
   

2. Remove attribute ALIGN

   
   
   $doc['*']->removeAttr("align");
   
   

3. Fix TARGET Attribute

   
    $doc['a[target="new"]']->attr("target","_blank");
   
   

Finally output the fixed content as HTML.

 echo  $doc->html(); // amphtml content; no kses

The above examples need to be tweaked to your specific content requirements.

The custom template “post_amp_content” before:

 echo $this->get( 'post_amp_content'); // amphtml content; no kses

The custom template “post_amp_content” after:

 require('your-libs/phpQuery/phpQuery.php');

 $doc = phpQuery::newDocumentHTML($this->get( 'post_amp_content' )); 
 $doc['.prettyphoto']->removeAttr("rel")->removeAttr("href");

 $doc['*']->removeAttr("align");

 $doc['a[target="new"]']->attr("target","_blank");

 echo  $doc->html(); // amphtml content; no kses

---

4. ADD PREVIOUS & NEXT POST NAVIGATION

From the AMP specification :”Note, that AMP document may also be linked to directly…”

This is being added to the custom template as well.

Next:

global $query_string; 

$posts = query_posts($query_string); if (have_posts()) : while (have_posts()) : the_post(); 
 

$next_post = get_next_post();


if (!empty( $next_post )): 
 echo '<a class="next" href="'.amp_get_permalink( $next_post->ID ).'"> &#8604; '.$next_post->post_title.'</a>';


endif; 
 

Previous:

$prev_post = get_previous_post();

 

if (!empty( $prev_post )): 
 echo '<a class="prev" href="'.amp_get_permalink( $prev_post->ID ).'"> &#8604; '.$prev_post->post_title.'</a>';


endif;

---

5. SYNTAX HIGHLIGHTING

You can find a simple pure PHP highlighter here. Not perfect, but a start. Don not forget to include the CSS :)

require_once("your-lib/SyntaxHighlight/SyntaxHighlight.php");


foreach(pq('pre') as $code)

{
 pq($code)->html(SyntaxHighlight::process(pq($code)->text()));

}

 

I will extend on this as new validation errors or tweaks come up. The core sanitizer of AMP-WP still needs some work and should allow us to do some of the above directly, when the content is parsed / converted for AMP.

---

 

6. OTHER AMP ARTICLES

 

Enjoy coding …