Google AMP Aftermath: Replacement Image Results

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.