Easy SEO anyone can do

Did you arrive at the Fireplace Aquarium by way of a search engine like google or bing?  How search engines choose which sites to show and in which order can be influenced by ‘search engine optimisation’ or SEO.  An important aspect of SEO, in addition to having interesting and informative content, is having the technical aspects of a website sorted out such that the website facilitates the content instead of getting in the way.  Currently, I’m working on the following pieces:

  1. No broken links, missing pages or ‘404’ errors or other obvious sources of user frustration
  2. Informative meta descriptions for web pages so search engines don’t have to guess what to say
  3. All images have an ‘ALT’ text description to aid the visually impaired and help search engines understand the messages images are conveying
  4. Verifying that search engines know about all the different pages they might decide to index using Google Search Console (or similar)
  5. Add headings that match questions Google searchers have asked* and provide helpful answers to those questions.
Screaming Frog SEO spider logo
SEO spider

How to use Screaming Frog for SEO

A really great tool to help accomplish the above is the Screaming Frog SEO spider.  You download and run the app**, then point it at your website where it then ‘crawls’ all the interconnected pages exactly like the search engines do, collecting information you can query in a user-friendly way.  For example, you can click a button to see a list of all the broken links in your website (or ideally, see that there aren’t any broken links).  Similarly you can query which pages have meta descriptions, which images have ALT descriptions, and what those descriptions say.  It’s also easy to generate a list of all the web pages, and indications as to which can be indexed by search engines, and then to compare that list with pages actually indexed by google or bing etc.  Where the search engines have missed some pages, you can point the engines to those pages specifically.

How to make a Screaming Frog sitemap

One of the cool things you can do is to generate visual sitemaps, either based on the directory structure, or the route in which the SEO spider crawls the site, and see those as either a tree graph or force-directed graph.  The graphs can be exported in either SVG or HTML format; unfortunately, WordPress doesn’t play well with SVG, so I converted the SVG saved output to PNG using Gimp and you can see two versions of the results below.

Niade.com structural visualisation 11-Mar-2021
Directory tree graph
Force-directed directory structure of niade.com
Force-directed graph

Making the sitemap is easy.  Launch up Screaming Frog and type the base address of the website into the ‘Enter URL to spider’ address bar at the top, press ‘Start’ and wait for the scan to complete.  Then select your visualisation of choice from the Visualisations menu.  Once the visualisation comes up, have a play with the settings by clicking on the small gear icon in upper right corner of the visualisation window.  When it’s looking how you want it to, click the diskette icon to the immediate left of the gear icon to bring up the save screen, pick where you want the visualisation to be saved, select either ‘svg’ or ‘html’ format from the dropdown menu at the bottom right of the save screen, and then press ‘Save’.


*Real world example:  I clicked the ‘Performance’ tab in my Google Search Console and found I was getting queries for “screaming frog visual sitemap”.  I then did a google search for “screaming frog visual sitemap” to see what people wanted, and the search result page helpfully said:

People also ask:

  • How do I make a screaming frog sitemap?
  • How do you use a screaming frog for SEO?  [really, that’s what they ask]

So I made level 2 headings corresponding to those two questions, and then (hopefully) provided some helpful answers.  If you found these answers were helpful, you could thank me by linking to my site from your website, ideally with a “do follow” link. 😀

**Screaming Frog is a UK-based outfit (which is nice) and provides their SEO spider free of charge for use with smaller websites (less than 500 URLs).  They claim versions for Windows, macOS and Ubuntu, however, I develop Fireplace Aquarium on a Chromebook running Debian linux (the testing repository) and much to my surprise (and delight), the Ubuntu .deb file installed using gdebi without incident and seems to run just fine under Debian.

Aqua.egads.uk ➔ Niade.com
niade.com favicon
niade.com

I changed the domain name for the Fireplace Aquarium from aqua.egads.uk to niade.comDreamhost (my web hosting provider since 2005!) made the WordPress domain changeover process super easy:  register and host the new domain name, go into the web hosting control panel, push the appropriate button and in a minute or two everything is switched over.

What to do with the old domain?

It’s poor form to deactivate the old domain and let anything out there with links or bookmarks pointing to the previous site break with 404 errors, so I instructed the old web pages to automatically redirect to the corresponding new versions for three months or so.  Naturally, Dreamhost made the redirect process super easy as well.  After Google got all the pages switched over in the index, I deactived the old domain.

Why niade.com?

Hylas and the Nymphs by J.W. Waterhouse
Hylas and the Nymphs

From time to time I have a poke around at what might be available in short and usable domain names, ideally with the .com TLD.  The usual result of this exercise is “not much”, but in this instance niade.com was available and since it reminds me of ‘Naiad‘ – freshwater nymph – it has a vague watery/fishy feel to it that seemed appropriate.

Web browser fish icon

The ‘favicon’ is a small 16 x 16 px graphic you can see before the web page title in each tab of your web browser.  The niade.com favicon is an homage to the 5-banded barb (Puntius pentazona).

It is relatively straightforward to use the visual editor of WordPress or BoldGrid to embed pictures and have text flowPlaceholder image smoothly around the picture to either the right or the left:  Insert the picture using ‘Insert Media’ from the column tab, then select the picture in the visual editor, click the ‘edit’ icon, and then click on the icon for picture positioning on the right or left.  Centre puts the picture in the centre of the column, but text doesn’t otherwise flow around it.  It can be a little fiddly, but it mostly works.  You can then drag the image around to reposition it within a paragraph as well.

The problem is, you can’t do the same thing with an embedded video.  You can construct a dedicated row and column setup to contain the video but then it’s complicated to get the text to flow around that structure correctly, particularly across different viewing platforms.  I’ve done a lot of searching and getting text to wrap around an embedded video using only the visual editor is a “can’t get there from here” situation.

Continue reading “Wrap text around video in WordPress”

The configurable menus in WordPress have a checkbox labelled “automatically add new top-level pages to this menu” where if checked every time you make a new page it gets added to the menu.  That might be good for drop-down menus but otherwise very rapidly clutters up the page.  By default themes come with a ‘Primary menu’ and you can configure that as you would like, HOWEVER the ‘automatically add new top-level pages to this menu’ button, although you can check and uncheck it, doesn’t do anything… new pages are always added to the primary menu regardless.  You can go into the ‘customize’ option for the theme and manually remove all these pages, but that gets to be a hassle.

To fix the problem, you have to actually create a new menu yourself, any menu at all, and use that.  Confusingly, ‘Primary menu’ is both the name of a menu, and the location of a menu.  After you’ve made your own menu (I called mine ‘main nav bar’) you can set that to be in the ‘Primary menu’ location and you’re then free to delete the ‘Primary menu’ menu and things work as expected.

It’s not a bug, it’s a feature!

(the checkbox not working on the default setup is definitely a bug)

Sorting through BoldGrid

Ok… so finally I decide to READ THE INSTRUCTIONS on how to actually use the BoldGrid software that comes with the WordPress installation on the DreamHost hosting site.

This after some frustration with things like “what do all these on/off flashing symbols mean?” and “isn’t there an easy way to just make two columns of material?” questions and a lot of semi-random button pushing.

illustrate boldgrid controls
Fuzzy boldgrid editor screenshot