Blog not mobile friendly? Neither apache mod_dir is!

As most of you already know, my blog is just static HTML but generated by one small bash script called bashblog or bb.sh. For this it is blazing fast and simple to load and pretty much always looked good on my phone too. When lookin at google search console I spot however that they said it is not really mobile friendly and you better take that seriously for SEO penalties and such.

Read on for some tips and tricks in responsive blog design.

Always set meta viewport

There is a single line of html practically all responsive designed pages add:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Interestingly this was missing from the bashblog template so I added it. To be honest bashblog lets you add a html header so it maybe does not count as a bug if you maybe do not want to be responsive.

This actually makes stuff better, but I also had to remove many pixel-sizes in bashblogs original stuff so now it is much better and more responsive. I think I do not need to write up what I changed in the original css for the bashblog as but scroll down to see my bb.sh fork (with other changes too) on github.

Use internal CSS if you are on a slowly responding server

After that change I did early, most of the problems were gone, but surprise is that I saw googlebot sometimes reporting this or that page to have the "text is too small to read" error and the "clickable links too close to each" error. The weird thing is that on every run they marked different pages with this!

This took me a looong time. Finally through fire an flames I have found that this is actually a double fault of googlebot and the servers that host my blog!

I have found out (by running lighthouse myself for example) that my pages are actually well and count as mobile friendly. What causes the issue then? The server and its surroundings! This was revelation. I am not running this server as the caesar servers I use while writing this post is a free service for the current and former ELTE university students and I still host some of my things here because of why not. But when doing a so called "valósidejű elemzés" or as I translate the googlebot words "realtime test" on the search console it turns out many of the "resources" are having errors and are not loaded by the bot.

These resource errors are mostly images, but holy heavens! The CSS file itself is not loaded! This is actually really bad as the blog was not mobile friendly without its CSS so surely this is a problem.

As I did not want to change the place I serve this blog from, I thought I can maybe try to change bashblog to write CSS files internally into HTML. This change was easy to make and I added css_is_internal=true where you can tell if you want bashblog to internalize (copy its content into HTML) your CSS or you want its original solution to just refer to them as external files.

Rem.: As I wrote about it earlier in Blog speedup tricks here, I actually use lazy loading of CSS for stuff that I am not using - like CSS of asciinema. That is necessary if you want to use internal CSS in HTML otherwise it just grows big anyways and will be slow anyways: speed will be bad, not your stats on the mobile friendliness rating.

The apache mod_dir is not responsive

After all this I still got that my blog is not mobile friendly according to googlebot in the search console. The issue is once again the small text and small clickable areas, but it showed my attachments folder. Oh... so there is this mod_dir enabled on apache and I actually use it and googlebot found it!

It basically gives you a directory listing whene there is no index.html. Some would say immediately that this is a security issue anyways, but my blog was just static html pages with no server-side code whatsoever so what wrong could happen anyways by someone seeing static html files?

You can turn this feature off by writing this to the topmost .htaccess:

    Options -Indexes

That is fine and first I thought I am not even using this feature anyways, but I grepped and searched around a bit and found several use cases for it on my blog and pages. I was thinking maybe there is a way to add CSS to it and asked around a bit, but no one seemed to know a way for it and maybe there is none.

Generating "mod_dir"-like index.html

Actually I then went that way that I go with disabled mod_dir and generate a similar index.html myself if something similar is needed. It seems like that is the most easy solution to make the issue go away keep references to the directory listings in my few posts and other few places.

I have found two easy ways to generate such a html:

1. Re-enable mod_dir and wget its result down from the directory it is needed
2. Use tree -H . to generate html output (this generates multiple levels)

After these, you can add a simple style sheet to your html or maybe even do some kind of automation to magically add those styles by some script.

I took the first way, but it is good to know that tree command has html output.

Ading only these few lines in the beginning of <head> would suffixe:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style>
    body {
      font-size: 2.5vw;
    }
    a { 
      font-size: 2.5vw;
    }
    td {
      font-size: 2.5vw;
    }
    </style>

After adding these the page seems to be nice and mobile friendly with the google mobile friendliness tester.

I think developers at apache mod_dir maybe should add this!

Maybe I can just do a pull request to their project if I find where and how these index files got generated. I think it is some simple code anyways. I guess the easiest way to find where to change the code would be to grep their codebase for the word Indexes and go from there to the generation code.

Final words, my bashblog fork

After all the above now the blog should be once again mobile friendly. Also it should be like that according to googlebot which is nice for SEO. I already do lose some traffic likely because this server seems to not use SSL at all. That is actually not really an issue for my static blog, but heuristics do not know that my blog is static and thus SEO could suffer. There might be other stuff why it might suffer but first things first ;-)

The fork of bashblog can be downloaded from my github. It also contains this whole blog as an example code for its usage and you can even read it on github, my gitea or wherever if you want to! It also serves as backup...

Tags: responsive, web, blog, development, trickz, tutorial, apache, mod_dir, text-is-too-small-to-read, googlebot, internal, css