Atomic Smash homepage splash

A client’s guide to Yoast SEO for WordPress

Words by Anthony HartnellApril 20, 2018

Illustration of traffic lights

What is Yoast SEO and why is it on my website?

Yoast SEO is a WordPress plugin that will optimize your website content for purposes of Search Engine Optimization. There are a few SEO plugins available in the WordPress plugin directory but this is by far the most installed, recommended and supported plugin developed by a team in the Netherlands.

If you didn’t install the plugin yourself and you’ve seen it in various parts of the WordPress admin, chances are it was installed by someone else, for example, by a development agency, or it came bundled along with a one-click installation package.

If Yoast hasn’t been set up yet it won’t affect your site’s content as it purely deals with how your website appears externally, for example when embedding content on a social media website. To achieve this it provides a simple configuration wizard as well as offering a selection of really powerful built-in tools which I will explain guide you through.

How does SEO work?

Firstly, before delving deeper into setting up Yoast I will briefly explain the purpose of SEO and how it has evolved throughout the years.

The analogy I like to use when it comes to explaining SEO is to think of the internet like The Yellow Pages (or any other paper-based listing or directory).  Essentially, each page contains lines of information advertising a business, service or some contact information.

Provided you display up to date contact details, a business in the proper industry category, e.g. plumbing and you have used good punctuation and grammar, your listing is likely to be favoured, or ranked higher than other listings.

Picture of the Yellow Pages phone book

By How can I recycle this (http://www.recyclethis.co.uk) (phone_book) [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

How does this relate to SEO?

In this analogy, search engines are the Directory; you tell that you want to be in their directory, (E.g. by submitting your site to Google or Bing etc), and readers are your website visitors.

The majority of the Yoast plugin is FREE and they offer a paid upgrade to a premium version. This would be the equivalent of buying a larger ad space in the Yellow Pages to show graphics or colours.

Using the traffic light system to improve your content

Yoast SEO uses a clever visual traffic light system of colours to highlight problem areas with the content and give suggestions for improvement. This can be found at the bottom of a post or page. It’s also really nice to see what you’re doing right too and it becomes a challenge to light up as many green dots as possible. This really helps you write good content and know what you need to work on before and after you publish a post or page.

Here is a picture of this blog post at the start of writing it and I’ve been improving it as I go. I’ll explain how to fix the problems and increase the score.

The traffic light analysis in the Yoast SEO metabox

Note: It’s not always possible to get 100% ‘good results’ the first time around so I like to think of the analysis as an aid to writing and improving where possible. If you’re really happy with the content and you have an average readability rating, don’t be discouraged- just publish and improve later.

Problems (2)

Let’s first deal with the problems:

  • No meta description has been specified. Search engines will display copy from the page instead.
  • No internal links appear in this page.

Fixing the Meta Description

  1. In the Keyword SEO tab, click the ‘Edit snippet’ button
  2. You’ll see an SEO keyword title which is automatically generated from the title of your post or page. A coloured bar below this indicates it’s rating. If it’s anything other than green, think about ways to improve the title
  3. You’ll then have the chance to edit the slug which is the URL title joined with dashes. This is a good opportunity to remove Stop words which are words like ‘a‘, ‘to‘, ‘and‘ etc. E.g.
    1. Bad Slug: my-url-is-long-and-contains-a-few-stop-words
    2. Good Slug: remove-url-stopwords-for-better-content
  4. Finally, enter a short description that the content is about. If your post or page uses an excerpt, you can paste it here.

Improvements (5)

One of the improvements above says:

  • The images on this page do not have alt attributes containing the focus keyword.

While this is true, it’s not always possible to use the focus keyword when describing an image but it does touch on a very important point for accessibility and good SEO ranking.

Alt Tags

You might have heard the term before but what are they? Alt tags refer to the alt or Alternative text that appears inside an image tag which is used in place of images for users of assistive technology such as screen readers or text to speech software.

You have probably seen the missing image icon in the browser before; this is the text that displays when that happens, e.g.

Image of alt attributes being using in HTML

Example at https://codepen.io/anon/pen/xjbpzE

There is an excellent resource for accessibility and further reading at www.abilitynet.org.uk

Setting up Social Media

To set up Twitter and Facebook options you first need to enable some settings in the Social part of the plugin.

  1. Click SEO in the WordPress admin sidebar and then Social. Enter all your social media URLs.
  2. Click the Facebook tab and click the slide toggle to enable Open graph meta data. This will allow Facebook and other social media to display a preview with images and a text excerpt when a link to your site is shared.
  3. Just below this, you can specify the URL to a custom fallback image which will be used if the post or page that you embed in social media doesn’t have an image of its own.
  4. Click the Twitter tab and click the slide toggle to enable Twitter card meta data. This will  display a preview with images and a text excerpt when a link to your site is shared. You can also specify the default card to use. We use the summary with the large image.

Twitter summary cards explanation

Previewing a Twitter card

Twitter has a card validator which is a tool on their website to preview how a card will be displayed on social media. You can log in and paste in a URL. Here is a preview of another blog post I wrote

Image of how content looks when embedded into Twitter

Previewing a Facebook card

You can check the Facebook embedding works by logging into Facebook and pasting the link to the page or post. You don’t have to publish the Facebook post, the preview will be fetched automatically:

Image of how content looks when embedded into Facebook

Optimizing SEO content for Social Media

At the bottom of a post or page, scroll down to the Yoast SEO widget and click the social icon – illustrated as two lines with a dot:

Click that and you’ll see a tab for Facebook and Twitter. This is where you can enter different titles and descriptions to display when embedding into those sites. This could be useful if you wanted to write a different title to help drive traffic to a post or page.

Advanced Settings

Yoast provides some advanced options in the admin sidebar under SEO > Search Appearance. Here, you can change the company name and logo and click through each of the tabs along the top to make adjustments for your content types.

A word of caution: These settings are considered to be advanced and are recommended by administrators as they can affect how some of the article listings appear. If unsure, contact the person that set up the site for you.

Making sure your settings are OK

The configuration wizard can be run through to make sure your settings are still OK. This can be found in the admin sidebar > SEO > General. It won’t override any settings you’ve made unless you want to, so running the wizard will not undo your hard work.

SEO Summary and Score

Yoast SEO score after optimization

As you can see I’ve managed to get a 100% score by following Yoast’s suggestions and I am pleased that I was able to fix all the points on the list.

Normally, Yoast analyses content in the standard WordPress WYSIWYG editor but we’re using Advanced Custom Fields to build a flexible page builder with drag and drop functionality. David’s article shows you how to set this up.

To see the Yoast Social Media embedding for yourself, copy and paste the URL of this blog post into Twitter and Facebook. Alternatively, please leave a comment below.

Using ACF and Yoast SEO together

Read Davids blog post on setting up Yoast to work with Advanced Custom Fields

Read Article
Profile picture of Anthony Hartnell

Anthony HartnellDeveloper

Anthony works in the development team and enjoys creating plugins and integrating maps, libraries and other APIs into Wordpress.

Go back to top

Keep up to date with Atomic news