About a month ago, I implemented an ActionFilter to modify images in a post to match Google's AMP requirements.

Today, I give you an update of the results! But before I give you the results, I want to explain how much work went into this particular project.

The amount of work put into this was merely a new controller and a new ActionFilter called UseAmpImage.

At first, I tried DisplayModes, but that didn't seem to work because of the caching.

So, I decided to create a brand new controller called Amp to output a plain post as per Google's request.

Once implemented, I just had to wait to find out whether everything was functional or not.

The Results

After a month, I decided to check the statistics on Google's Webmaster Tools...err...I mean, Google's Search Console.

With the minimal amount of effort (a controller and an ActionFilter), I was able to update my site to use AMP pages.

Finally, here are the results of my efforts.

Excellent! I was extremely happy with this.

However, what about those 20 pages? Call me a perfectionist, but I had to figure out what was up with those remaining pages.

Fixing an Issue

After looking over the 20 pages that weren't working, I noticed something weird with each post.

Every time I requested one of the 20 pages, I noticed I didn't get any HTML back. It was a blank page.

What the...?

I went back through the code and everything seemed alright, but then I noticed each post didn't have an image anywhere in the post. It was just text with hyperlinks.

It seems I needed to add one line to the code. Here is the updated UpdateAmpImages method.

private string UpdateAmpImages(string response){    // Use HtmlAgilityPack (install-package HtmlAgilityPack)    var doc = GetHtmlDocument(response);    var imageList = doc.DocumentNode.Descendants("img");
     const string ampImage = "amp-img";
    if (!imageList.Any()) return response;
    HtmlNode.ElementsFlags.Add("amp-img", HtmlElementFlag.Closed);    foreach (var imgTag in imageList)    {        var original = imgTag.OuterHtml;        var replacement = imgTag.Clone();        replacement.Name = ampImage;        response = response.Replace(original, replacement.OuterHtml);    }
    return response;
}

Notice after the string constant? If we don't have any images in the post, just return the response.

Conclusion

I uploaded the change and so far, it seems to be working.

I will probably give it another two weeks before I examine what Google detects in my code, but this is far from over.

I guarantee I will have more errors to fix, but it seems this is a case of fixing one set of errors will result in a ripple across and fix the next set of errors.

Stay tuned.

Have you implemented Google AMP pages yet? Are you having any luck? Please share your comments.