Make blog images compatible for amp page

Recently, I compared SERP rankings of my website pages between desktop and mobile Google search results. The pages that were ranked higher on desktop search results, were pushed to fifth or sixth result page. So, this was a main reason why I had less traffic from mobile & tablet devices.

Based on above findings, I’ve further analysed on – how to improve my article page SERP rankings on mobile devices. The factor which Google relies on is the page load time.

I’m currently using GoDaddy’s shared hosting plan, which has a minimum of 0.5 seconds to respond back to a simple static HTML page request. So, bringing the actual page load time below 0.5secs isn’t feasible. This pushed me to look ahead for strategies that could improve mobile SERP.

The primary solution is to serve the article pages as AMP (Accelerated Mobile Pages). Because AMP contents are cached by the Google APM servers or Cloudflare AMP servers and speed of the origin server is not an issue at all. Since, most of my webpages are showing the static contents… it was easier for me to code a different URL action that shows up the AMP views [.cshtml] for the same blog content.

One of the main challenges, was to convert the existing embedded post images to an AMP compatible image tags. This required an HTML/XHTML parser library like HTML Agility library, which offers you with the flexibility to do HTML node searches using xPath selectors. So, before rendering AMP page HTML the article body content was pre-processed and replaced all images with amp-img tags using following helper method

/// <summary>
/// Processes the content of the page.
/// </summary>
/// <param name="content">The content.</param>
/// <param name="isAmp">if set to <c>true</c> [is amp].</param>
/// <returns></returns>
public string ProcessPageContent(string content, bool isAmp)
{
    if (!isAmp) return content;

    var doc = GetHtmlDocument(content);
    var imageList = doc.DocumentNode.Descendants("img");
    if (!imageList.Any()) return content;

    const string ampImage = "amp-img";
    if (!HtmlNode.ElementsFlags.ContainsKey(ampImage))
        HtmlNode.ElementsFlags.Add(ampImage, HtmlElementFlag.Closed);
    string processedContent = content;

    foreach (var imgTag in imageList)
    {
        var original = imgTag.OuterHtml;
        var replacement = imgTag.Clone();
        replacement.Name = ampImage;
        if (replacement.Attributes["layout"] == null)
        {
            var layoutType = "responsive";
            if (fixedSizeImgRegex.IsMatch(replacement.Attributes["src"].Value))
                layoutType = "fixed";
            replacement.Attributes.Add("layout", layoutType);
        }
        processedContent = processedContent.Replace(original, replacement.OuterHtml);
    }

    return processedContent;
}

Above code primarily looks for <img> tags in the content and replaces it with <amp-img> with required properties added/modified. You may need to add the width and height for the existing image tags to make it look & appear proper within AMP.

This way I was able to convert all my articles as AMP article pages. Here is an working example

https://davidsekar.com/misc/block-bsnl-ads-using-ipsec
https://davidsekar.com/amp/misc/block-bsnl-ads-using-ipsec

Happy coding!