Anyways, I went ahead and checked it myself with Google Reader and indeed, the post images from JaypeeOnline’s RSS feed were missing and the only thing I could see is the image alt attribute.

Google Reader showing image alt attribute

I did some research and I found out that Google Reader can’t access images from blogs that have enabled hotlink protection. For those who don’t know, I’ve disabled hotlinking to all my images using .htaccess rules which I discussed on an earlier post entitled – How To: Prevent Bandwidth Theft or Hotlinking. After editing my .htaccess file and adding a couple more rules to allow Google Reader access to my images, the post images now show up on Google Reader.

Google Reader showing blog post image

If you have the same problem with Google Reader not displaying your blog’s post images and have disabled hotlinking via .htaccess, just follow this short and simple tutorial.

NOTE: Make sure you back up your existing .htaccess file before you do any modifications. In case something goes wrong, you can always revert to the original file.

The following is the basic code or .htaccess rule to disable hotlinking or protect images from hotlinking:

# Disable Hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?domain.com/ [NC]
RewriteRule .*.(jpeg|jpg|gif|png)$ - [F]

NOTE: Replace ?domain.com/ with your own blog URL.

The following code/htaccess rule is the one that will allow Google Reader access to the hotlink-protected images from your server. If you noticed, there are two lines. The first line is for the regular Google Reader and the second one is for Google Reader Mobile just in case you have readers who use that.

RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/view/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/m/view/.*$ [NC]

Now, combine the previous code to basic disable hotlinking code and you should have this:

# Disable Hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?domain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.|images\.)?google\.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/view/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/m/view/.*$ [NC]
RewriteRule \.(jpeg|jpg|gif|png)$ - [F]

Copy and paste the code to your .htaccess file, save it and upload it back to your web server. That should fix the issue and solve your problem with Google Reader not displaying your blog post images.

To my readers who use Google Reader to get updates from JaypeeOnline, I apologize if you guys weren’t seeing the images included in each blog post these past few weeks/months. I wasn’t aware that there was this issue with Google Reader. I would appreciate it if you guys can let me know if you experience any issues or problems with JaypeeOnline’s RSS feed on Google Reader or other news aggregator sites or apps.

Btw, thank you Noel for letting me know about this! I wouldn’t have known there was a problem if you haven’t told me about it. I really appreciate it.

Has anyone else had the same problem with Google Reader? What did you do to solve the problem? Was this tutorial helpful? Please share your thoughts via the comment section. Thank you and have a nice day!