A "Read more" links are not bad for SEO (and a11y) if done right

From time to time I see and look at some SEO articles to see what others are writing about and what’s new that I need to look at.

I have started reading an article about some SEO mistakes to avoid, and the first thing that stopped me from reading further was a point about “Read more” links.

It was stated that the severity of using the “read more” link for SEO is high and that the developer of the site should remove the use of “read more” links in favour of article links (for example title as a link).

That particular author claimed that when that has been done, the site visibility “went through the roof”.

Partly I can agree with that, but removing “read more” links shall not be advised if it is done right. Here is why.

If you look at my website, on the homepage with a list of articles you will see that I am using the “read more” link (CSS button) under a summary (first paragraphs) of the full article.

Apart from that link, when you click on it, you are redirected to continue reading instead of the beginning of the article.

You can click on the title of the post or the featured image as well and that will get you to the beginning of the article.

From the SEO point of view, my first link is an “article link” as advised, but I am still in favour of using the “Read more” button in my design.

You may ask why?

It’s because my Read more link is not just <a href="/article/">Read more</a>, it’s more than that.

I am using <!--more--> in my markdown to split {{ .Summary }} from {{ .Content }} rather than using automatic summary generation through Hugo.

My “Read more” link redirects you to a related part of text inside the article, allowing you to read further where you started before you click on it (id #Read_More).

When you click on the title of the article or the featured image you will be pointed to the beginning instead. The read more button allows you to have a “continuous” reading experience.

Also, my link <a href="/article/">Read more</a> is more like <a href="/article/">Read more about this article</a>, however user see the only words “Read More”.

That’s the trick for SEO purposes, so the link will contain the full article title, but also for accessibility (a11y) and people who use screen readers.

A screen reader will not just read Read more but more likely Read more about this article (where this article is a title of the full article that links references to).

Here is how I did that on my website.

I am using Hugo for generating my website, hence some references will be oriented into this framework.

<a aria-label="{{ T "ReadMore" }} {{ T "about" }} {{ .Title }}" href="{{ .RelPermalink }}#{{ replace (T "ReadMore") " " "_" }}">{{ T "ReadMore" }}<span class="sr-only"> {{ T "about" }} {{ .Title }}</span></a>

This will look like that:

<a aria-label="Read More about Removing outdated content from the website... not only for SEO" href="https://dariusz.wieckiewicz.org/en/removing-outdated-content-website-seo/#Read_More">Read More<span class="sr-only"> about Removing outdated content from the website... not only for SEO</span></a>

The {{ T "..." }} elements refer to translated content through Hugo i18n, as my website generates them in two languages. In a single language, you can just use text.

As you will see, in between the link tag (<a href=...> ... </a>), after stripping <span> there is the following text: Read More about Removing outdated content from the website… not only for SEO. The site however displays only Read More.

The sr-only class hides additional text that is visible by default by Screen Readers (for accessibility reasons I am using also aria-label).

.sr-only {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  white-space: nowrap;
}

Google and search engine robots also see the link as full text (through innerText), and not only as word Read more.

In that case, if for your design you want to keep read more, then there is nothing against it. As long as you will use your article title as a link along and use a smart approach. The “read more” can get work for you, your users (user experience) and your website (SEO).

Simplified:

<a
aria-label="Read more about {{ .Title }}" href="{{ .RelPermalink }}">
Read more<span class="sr-only"> about {{ .Title }}</span>
</a>