Using htaccess for 410 Gone Page Prevents Use of Images

.htaccesserrordocumentfolder-redirectionredirect

I am shutting down a website. I have deleted the wordpress site and the only page left in the domain is a page announcing the permanent shutdown of the site. The URL of the shutdown page is…

http://mydomain.co.uk/index.htm

there is also a folder containing 4 images (3x *.jpg; 1x *.gif). These images are a part of the shutdown page. Thus…

http://mydomain.co.uk/images/

When I enter a URL: mydomain.co.uk – the page 'mydomain.co.uk/index.htm' displays properly with the images in the page correctly displayed. The images in the page use this link type…

<img alt="Shutdown graphic" src="images/exampleimage.jpg" border="0" height="200" width="300" />

which works correctly.

However, I am trying to get all calls to 'mydomain.co.uk' to direct to the root folder and to display 'index.htm'. So, the following URLs would all then display 'index.htm'…

mydomain.co.uk
mydomain.com
mydomain.co.uk/anyfolder/
mydomain.co.uk/anyfolder/*.*

To achieve this I have tried this .htaccess file…

ErrorDocument 410 /index.htm
# Trigger a 410 Gone for all user requests
RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteRule ^ - [G]

This file .htaccess file works correctly for all the URL types. However, it fails to display the images from the image folder in the shutdown page.

How can I modify the .htaccess file so it will allow the images to be displayed?

I have tried changing the link in the tag so the images are in the root directory, and also put the images in the root folder. Unfortunately, the .htaccess file still prevents the use of images.

It seems like the .htaccess file is preventing the use of the images in the index.htm file. If I remove the .htaccess file the page works properly again (with images) for mydomain.co.uk, but not for the other URLs.

Any ideas please?

Best Answer

There's a couple of changes you need to make...

  1. You need to allow unrestricted access to your images. So, in the case of the above rule, you need to make an exception for your /images directory (or rather, any request for a file in the /images directory). Or, preferably, just for the four images you are linking to.

    • You could also send an X-Robots-Tag: noindex HTTP response header to ensure search engines don't try to index these images. Or perhaps block the /images directory in robots.txt (unless these images have previously been indexed and need to be removed).

    For example, immediately after the RewriteEngine directive (before your existing rule):

    # Prevent the following images being blocked
# (and set a NOINDEX env var)
RewriteCond %{REQUEST_URI} /exampleimage1\.jpg$ [OR]
RewriteCond %{REQUEST_URI} /exampleimage2\.jpg$ [OR]
RewriteCond %{REQUEST_URI} /exampleimage3\.jpg$ [OR]
RewriteCond %{REQUEST_URI} /example\.gif$
RewriteRule ^images/. - [E=NOINDEX:1,L]

# Send "X-Robots-Tag" HTTP response header for these images
Header set X-Robots-Tag "noindex" env=NOINDEX

    Alternatively, you could check the HTTP Referer header when these images are requested and allow them to be blocked when the Referer is not your site (eg. direct requests from search engines). However, this is less reliable since the Referer header is not reliable. You might get users that don't see your images.

    For example, instead of the above, you would use the following instead (example.com is your domain):

    # Allow access to images when the "Referer" is the current site
RewriteCond %{HTTP_REFERER} ^https?://(www\.)?example\.com(/|$) [NC]
RewriteRule ^images/. - [L]

  2. When you link to these images in the HTML source of the error document you need to use a root-relative URL (starting with a slash) or absolute URL (with scheme + hostname), not a relative URL as you are currently doing. Otherwise, when a request is made for an image at a different path depth, eg. /foo/bar, the browser will try to load the image /foo/images/exampleimage.jpg - which does not exist.

    For example, using a root-relative URL:

    <img alt="Shutdown graphic" src="/images/exampleimage.jpg"

Alternative - Use Data URIs (no external images)

Alternatively, use data URIs instead and embed the images directly in the HTML source (no external images). Reference: https://css-tricks.com/data-uris/

Related Topic