Thanks for posting these useful tips. These are amazing. ![]()
You may be aware that there is some SEO benefit to naming images, videos and other files with relevant keywords and then having those items in folders within your website which you then allow the search engines to crawl and index. I call this open directory browsing.
Bear in mind that if you place a blank index.html or index.php file in a folder that will display by default and the individual items in that directory will not be discovered. Also bear in mind this will apply to WordPress, Drupal, Joomla, E-commerce, HTML, etc., etc.
In this case when a search engine or web user navigates to that directory they typically get a view as shown in the screenshot below:
http://impactsocialmedia.net/wp-content/uploads/2015/10/default-open-directory.png
Now what you are likely to find is that in the process of using open directory browsing to benefit your search engine performance the opposite has happened! That's right because now you will start getting warnings at Google Webmaster Tools for mobile usability issues. At the same time Google will also pleasantly inform you that this will get you penalized on search engine performance in terms of mobile devices.
So how do we have our cake and eat it too? How can we use keyword items and leave these directories open for browsing and discovery and indexing without getting nailed with the Google mobile usability penalty?
Well luckily it's a fairly simple fix and let's talk about that now so you can be well equipped for success.
The first thing you will need to do is get to your root directory on your web server and most likely you're looking for a folder called "public_html." This is the folder that contains your website files. Now once you get inside of the public_html folder you need to hunt down a file called .htaccess. If by some chance you can't see that file make sure that you have the little box checked that says "show hidden files." If you have that box checked and still can't see any .htaccess file then go ahead and create one.
Refer to the image below on showing hidden files:
http://impactsocialmedia.net/wp-content/uploads/2015/10/show-hidden-files.png
Now let's open that .htaccess file and make a few quick changes like this:
Add the following:
# SPECIFY CUSTOM HEADER FILE FOR OPEN DIRECTORY BROWSING
HeaderName /fancy-directory-styling/header.html
# BLOCK THE DEFAULT HEADER
IndexOptions +SuppressHTMLPreamble
In the code sample above the words preceded by # are simply comments. Pay close attention to the line - HeaderName/fancy-directory-styling/header.html When you do this your code will look like this - HeaderName/the-url-path-and-the-name-of-the-folder-that-contains-your-new-responsive-design-for-open-directory-browsing-goes-here/header.html
Pay close attention to the line - IndexOptions +SuppressHTMLPreamble - This line "turns off" the default header which is creating this responsive design problem. You want to turn it off so that you don't end up with two headers!
Now we're almost done. Now you need to navigate to a folder that you will create and you can name it anything just be sure that it matches the name and path in the HeaderName code above. Now in that folder just create a file called header.html and go ahead and open it.
With it open you can add some code like below:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size:18px;
max-width:95%;
text-align:center;
word-wrap:break-word;
}
a {
word-wrap:break-word;
}
ul {
display: inline-block; text-align:left;
word-wrap:break-word;
}
ul li {
padding: 10px 0px 10px 0px;
font-size:18px;
word-wrap:break-word;
}
img {
display:block;
max-width:90%;
height:auto;
margin-right:auto;
margin-left:auto;
text-align:center;
}
h2 a {
color:red;
text-decoration:none;
}
h2 a:hover {
text-decoration:underline;
}
h2 a:visited {
color:red;
}
</style>
<you can add your google analytics script here for tracking>
</head>
<img src="Add a URL link to your logo here" alt="" title="" />
<h1 style="text-align:center">Add your top of page header here</h1>
<h2 style="text-align:center; padding:20px 0px 20px 0px; color:red;"><a href="Add a URL link to your home page here">Name of your home page here</a></h2>
Now when your all done you can have a nice branded page to display your open directories with a link back to your home page. You can add as much Styling CSS as you like and you can add anything else your heart desires. Best of all you can now go and test and see that it is getting a passing grade for Google mobile usability. You now can also add Google Analytics tracking scripts to get valuable data on users browsing your open directories!
The finished product can look something like the screenshot below:
http://impactsocialmedia.net/wp-content/uploads/2015/10/responsive-design-open-directory.png
If you want to go a step further you can also use the above example with a couple of very minor changes and create a responsive footer to go along with the header. Cheers!

Chowhound
Comic Vine
GameFAQs
GameSpot
Giant Bomb
TechRepublic