How to check for broken links on your WordPress site – the right way

Please, please, please, I cannot stress this enough – do not install the Broken Link Checker WordPress plugin! I see so many recommendations that people install this but it can really slow a site down, it is a real resource hog and also adds a lot of bloat to your database.

There are several great (and free!) ways to check the links on your WordPress site without slowing it down so much. These are all external tools, meaning they work either on your computer or another website (so not on your host server).

Mac – Integrity

Free, or $8 (~£5) for a pro version with some neat extra features

This is the tool I use to check my sites. Now, before you start running checks on Mama Geek to catch me out, I’ll admit I haven’t been vigilant – but I do have a list to sort through when I find the time (ha!). Even though I don’t always practice what I preach, when I do find the time, I use Integrity.

It’s handy as you can export a list to work through at your leisure, and also view your broken links by frequency, look at the links by status or by page, and it works really nicely with WordPress sites. In my experience it is quick – although huge sites will still take some time, and it does also depend on your processing power etc.

Integrity

Windows – Xenu’s Link Sleuth

Free

This tool is well recommended and looks great. I’m not a Windows user myself but it seems pretty simple to use – I was able to install it onto my Mac using Winebottler, and it is very straightforward. On initial load, choose “File” -> “Check URL” and then simply enter your web address, make sure “Check external links” is ticked, and click “Ok”

Xenus Link Slueth

It seems fairly quick to run and very comprehensive, and spits out a long list of all of the links on your site, and their status. From here you can browse through the list and sort out any issues.

Finding Broken Links - the right way

Chromebook / Linux – Broken Link Check

Free up to 3000 pages

Broken Link Check will check up to 3000 pages on your site for you, and then list all of the broken links that it finds, together with the url it found the link on, and it will even pop up a window highlighting where in the html source of the page it found the broken link.

Broken Link CheckWhy bother?

To be honest, fixing broken links on a blog with a lot of comments and links in the content is a lot of work, especially if you’re tackling the problem for the first time since you started your site. So why bother?

A lot of people don’t think it is worth the effort, but if you keep on top of things then I think your site seems better maintained and more relevant without too many broken links. Linkrot is not a nice condition for a site and creates a bad user experience – people might not want to return to your site if things like product links in reviews are out of date.

As for SEO, opinion is mixed on whether fixing broken links is important. Broken internal links are definitely important as too many 404 errors can have a big effect on your Google ranking – but external links? The jury still seems to be out on that one. Google actually says to “check for broken links” as best practice, but doesn’t specify whether it has an effect on your ranking or not.

Personally, I think that user experience is important – and also, visitors will not return to your site if it seems out of date and riddled with bad links, which will have a knock on effect on your popularity and eventually your ranking as well. Whether you think that is worth the effort is up to you – just please don’t slow your site down while doing it; avoid that plugin!

 

Useful online tools for web developers

I’ve got a whole load of online tools and apps saved in my bookmarks, so I thought I would share a handful of my favourites here. Some of these do very simple things, but they save so much time during the development process, or save me from remembering the exact way to do things.

Iconogen

This tool creates all the different types of favicon and website icons a modern website needs. No longer do you just need a simple 16px ico file on your site, and with Iconogen you just upload an image and it outputs the code and files you need.

My tip: When putting the code into a WordPress template header file, you can use <?php echo get_bloginfo('template_directory');?> in the image href to grab the images from your theme directory.

The author of Iconogen has also created a few other neat tools which you can find by clicking their names, top right on the Iconogen site.

Underscores

The Underscores site will generate a starter theme for WordPress that you can create a custom design on top of – you just need to put in your theme name & a few other details you might want to set, and it outputs a zip file of a complete theme that can be uploaded straight to WordPress and customised from there. It isn’t designed to be used as a parent theme, and is very SEO friendly out of the box.

I build almost all of my WordPress themes using Underscores, and you can end up with vastly different sites all beginning from this starter theme.

Underscores

Html entity encoder/decoder 

Really useful for generating badge codes, etc – this tool will convert symbols like < into their html entities so that you can share them within posts.

TinyPNG / TinyJPG

These are two brilliant sites by the same development team, that compress image files for use on the web, without any compromise on image quality. It’s like magic! It often reduces the sort of images I work with by around 70%, which can really speed up a site.

Also, pandas!

The TinyPNG Panda
The TinyPNG Panda

WordPress functions.php Snippets

Another WordPress-centric one, this site is full of snippets of code that you can add to your WordPress functions.php file to add extra functionality to a WordPress site. Some of these are included in the Underscores theme files by default, but there are some nice extra bits in here too.

WP Test

My third WordPress tool is this set of test data for designing and developing WordPress sites. It will test your theme to the limit and try it’s best to break it, so you can make sure your theme is ready for all eventualities. I used to use the “official” WP test theme data, but this is basically an enhanced (and a bit more humorous) version of that.

Font Awesome

This is a webfont comprised entirely of icons, that you can embed in your site and use whenever you need an icon. They have all of the most popular social networks and anything you might need for an ecommerce shop or business site. It saves you having to make and embed lots of teeny tiny icon image files all over the shop, and you can use css to change the colour of the icons really quickly and easily.

CSS Font Stack

Grab pre-made font stacks for all the most common fonts, so that your design deprecates as gracefully as possible if the first choice font isn’t available on the user’s computer. This is really useful when you’re using a font that isn’t fully “web safe” but also isn’t available as a webfont.

Creating Chelsea Mamma – designing around a header image

When Kara hired Ellie Illustrates to create a new header for her blog, Chelsea Mamma, she decided she wanted a custom theme built around her new header – and that’s where I come in. This is probably my favourite kind of job; taking a header or logo design from a graphic designer, and creating the perfect theme to match it.

A gorgeous header does not make a blog design great all on it’s own… To give you an idea of how much difference it makes to create a theme around a header, rather than just using a header in a generic theme, take a look at the before screenshot for the Chelsea Mamma blog: Continue reading “Creating Chelsea Mamma – designing around a header image”

Creating what the Redhead said

My latest project, what the Redhead said, went live at midnight on New Year’s Eve. I’m lucky enough to count Donna amongst my friends, and working with her on this project has been a real pleasure.

Design

As a starting point, Donna filled out my Web Design Preferences form and we had a chat about what she wanted from her new blog. She wanted her new blog to be the next stage in her blogging journey; a grown up continuation of her parenting blog Redhead Babyled.

Donna sent me a family photo from a recent photoshoot that she wanted in her header, and we chatted about her favourite styles of fonts and websites. I began to put together a design that had nods back to Redhead Babyled, while still feeling like something new. Continue reading “Creating what the Redhead said”