神刀安全网

Google AMP Aftermath: Replacement Image Results

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 calledUseAmpImage.

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.

Google AMP Aftermath: Replacement Image Results

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? Post your comments below.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Google AMP Aftermath: Replacement Image Results

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮