Lighthouse - Optimize your website, Part 2: SEO

Last week we took a look into what — and how — Lighthouse can help us with, when working with optimization of your website. This week we will look at the Search Engine Optimization (SEO) part of a Lighthouse report.

For the purpose of this series, I’ve created a really bad looking — and performing — website (with one single page) just to enable me to show how things can easily be fixed.

You can see the website here: http://test.frontenddesigner.dk/

Let’s just jump right into it — here’s the a screenshot of the Lighthouse report

(if you’re not familiar with Lighthouse yet, I recommend you take a look at their Github repo: https://github.com/GoogleChrome/lighthouse or read the Introduction from Google here: https://developer.chrome.com/docs/lighthouse/overview)

As you can see, we’ve got some serious issues here — as we only get a score of 17 / 100. Let’s take a look at each part of the report.

Crawling and indexing

We’ve got a single issue in the Crawling and indexing part:

• Page is blocked from indexing

This means that Google can’t index the content on the page — so this page will likely never be indexed by Google. If Google can’t index the content — the page will never be shown as a search result on Google.

The reason the content can’t be indexed is pretty simple. I’ve got this HTML inside the tags:

The 'noindex, nofollow' value simply indicates (to robots), that we don’t want them to index or follow any links on the page. If we remove the tag completely, we won’t have any issues with indexing of the page.

Content best practices

In this part of the report we’ve got several issues to fix:

• Document doesn’t have a title element

• Document does not have a meta description

• Links do not have descriptive text

• Image elements do not have [alt] attribute

• Document doesn’t have a valid hreflang

• Document does not have a valid rel=canonical

Let’s have a look at how we fix all these issues.

Title & description

We need a title and description for the page. A title and description is often used to show the headline and the descriptive text for a search result in Google. Sometimes Google will change the descriptive text, if it doesn’t match the users search term — or if the description is simply not good enough. I’m not a SEO-expert — and I haven’t got a description on my site yet (I know — I’ll fix it 😉). But Google still creates a good description for me:

To set the title and description, all we need is these two elements inside the head:

If you put the two tags on your page, Lighthouse won’t pinpoint any issues here. This does not mean that your page is optimized perfectly regarding SEO — Lighthouse knows nothing about your content and what you’re optimizing for. Lighthouse just tells us if there’s any technical issues with the page — and how we can fix them.

Descriptive text for links

“Click here”. This is the easy — and very oldschool way — of linking to something on the web. If you look at the link out of context, you’ll have no idea of where you’ll get redirected to, when clicking the link.

Imagine a road-sign saying “Take this exit” without no info about where you’ll end up, if you actually take that exit.

That’s why you have to do descriptive texts, instead of “Click here”, “Read more” etc. A title attribute for the link is not enough to make Lighthouse happy. So just get to it — make those descriptions! 😉 (I’m really bad at it — so I guess I’ll have to get started as well)

On the test page I created I had this link:

It’s fixed putting a great descriptive text as the link text — and not only as the title:

Alt attributes for images

Alt attributes are important in different scenarios. You can use them for actively optimizing you site for the Google Image search. You can also use them to help any visual impaired users of your website, to be able to understand what is in your pictures will help from a screen-reader.

All you have to do is to set an alt attribute with a description of what is actually in your image:

Hreflang & canonical

If you’re not familiar with hreflang and canonical, you can find more info on e.g. Semrush:

• https://www.semrush.com/blog/hreflang-attribute-101/

• https://www.semrush.com/blog/canonical-url-guide/

I’ve deliberately used hreflang and canonical with errors. They are both pointing to a wrong URL. Both to a relative URL — and to an URL that doesn’t exist. They look like this:

To fix them, let’s just adjust them to point on existing URLs — and link to an absolute url like this:

That’s about it. The page now scores 100 / 100!. And that’s just by making sure that:

• The page is available for indexing

• The page has a title and description

• Links have descriptive texts

• Images have alt attributes

• Hreflang and canonical (if used) point to absolute URLs

I’ve uploaded an “index2.html” file with these simple adjustments: http://test.frontenddesigner.dk/index2.html

That’s it for today. Next week I’ll be looking into the “Best practices” part of the Lighthouse report.

If you’re interested in learning more about a specific subject or want me to dig deeper into any part of what I’ve already written about — please don’t hesitate to reach out. You can send me an email at [email protected] — I’ll get back to you and let you know when I’ll take a look at what you’d like to read more about.