3 Steps to Powerful SEO for Your WordPress Blog

Search Engine Optimization is a must these days. In this article, I focus on three easy steps to make your WordPress blog optimized for search results. We'll discuss technical, on-page and off-page optimization techniques.

SEO stands for Search Engine Optimization and as Yoast Academy puts it, SEO is the practice of optimizing websites to make them reach a high position in search results. There’s an ongoing debate about whether SEO actually works of whether it’s all just a waste of time and money.

I believe that SEO still makes sense and I want to show you how to easily optimize your WordPress blog so it ranks well in search results. This won’t guarantee any specific advantage for your website, but it won’t hurt you either.

Important: If you’re just starting and don’t have your blog yet, stop right here and read How to Build a WordPress Blog with SSL & 2FA where I explain exactly what to do to get you up and running. Don’t worry, this article will wait here for you 🙂

Disclosure: Please note that some of the links in this article are affiliate links. When you purchase products or services using these links and I may earn a commission at no additional cost to you. This helps me make this content free of charge to you. I only recommend products and services I’ve personally used.

Why should I care about search engines anyway?

Because most of the time, that’s exactly where most of us end up when trying to find the best answers to our questions.

When you think about it, there are only four ways to get to any website these days. You can:

  1. directly type the address of the web in the browser
  2. follow the link somebody emails you or posts on social media
  3. search for something via search engines like Google, Bing, DuckDuckGo or Yahoo

Searching for answers is even easier these days than ever before since you can type your question directly in the address bar of the most modern browsers without even getting to the search engine website first.

Yes, there were times when address bar understood only a real URL address and to search on Google, you’d have to go to www.google.com first and only then type your query. Nowadays, you just select your preferred search engine in the Settings of the browser and you can ask your question directly in the address bar as you’re probably aware of.

No wonder that search is the most preferred way to find content on the Internet and it still drives more traffic than social media. And that’s exactly why it makes sense to understand how to get your content ranking on search engines.

SEO versus GO

Google crawls the web.
Resource: yoast.com

Let’s face it, SEO is actually GO which would stand for Google Optimization. I’m fully aware of other search engines like Bing, Yahoo or DuckDuckGo, but most people use Google when they search the web. That’s the fact and that’s the reason why you want to optimize your website primarily for Google.

Google Search consists of three main parts:

  1. a crawler
  2. an index
  3. an algorithm

A crawler, also known as spider or robot, is a script that crawls the web and follows links from one page to another page. An index is a name for Google’s immense database where crawler saves the HTML version of the page it finds. An algorithm is Google’s secret sauce, much like the recipe to Coca Cola. We can only guess how it works, but it seems that there are a few basic rules to follow in order to get to the top of search results.

Five steps of crawling the web.
Resource: yoast.com

Google prefers quality and relevant content because it drives higher income from selling ads. You want to provide quality and relevant content because you want to drive traffic to your website.

This is a win-win situation. If you provide the content that Google likes because it helps its users, Google will be more than happy to promote your content in return.

In the end, it’s all about traffic. Users generate traffic by returning to Google because they know they’ll get what they search for. As Google gets more traffic it attracts marketers who want to buy more ads to promote their products. You make users happy by providing quality content so your website gets ranked high in search results which brings you more traffic. Everyone is happy. 

3 steps to powerful SEO

Simply put, you want Google to find you as much as any other visitor of your website, but since Google is still just a bunch of computers, unlike your readers, it needs a bit more help on your side.

I’ll show you three steps to optimize your website so Google not only finds it but also likes it and treats it as a source of relevant and quality information that will serve well its users. 

Basically, you need to create relevant content people actually ask for, you need to make it easy to find and understand for Google and you need to be trustworthy so Google can treat you as an authority with right answers.

Sounds like a lot of work? Well, it is, but we’ll divide it into more digestible chunks:

  1. Technical optimization
  2. On-page optimization
  3. Off-page optimization

01

Step 1: Technical optimization

Let’s start with your WordPress blog. Ideally, you haven’t yet a chance to flood it with thousands of plugins and fancy themes which would slow it down to unconsciousness.

Speed is the most important technical aspect of your website. Not only that users want relevant answers to their questions, but they also want it fast. If your page loads for more than 10 seconds, you’re as good as offline. Nobody will wait such long for your page to load unless you’re Facebook. They’ll just go somewhere else.

Don't kill all the efforts to get to the top of the search with a slow website. It's like shooting yourself to the knee before running a marathon you're preparing for the whole year. Click To Tweet

That’s why I chose to start the optimization with the technical aspects of your website. Your great article presented on a nice shiny theme is worthless if it loads for a minute. You’ll be the only one who ever read it.

There are three important factors of good technical optimization:

  1. Speed
  2. Mobile-friendliness
  3. XML sitemap

Let’s dive in!

01

Speed up your website

Users expect things to be fast, they expect what websites respond quickly. According to Wire magazine from 2014, more than 47% of people expect a site to load in less than 2 seconds. Google’s stats from 2016 say that delays over 3 seconds lead to over 40% abandonment. These are pretty old numbers, so we should expect these days people are even more demanding when it comes to speed.

First, let’s face the truth. Go to PageSpeed Insights and GTmetrix to see how your website scores. How are you doing?

Here’s my result for the landing page of Smart Profit School after some tweaks:

PageSpeed Insights results.
GTmetrix results.

Let’s take a look at what I did to achieve this in a few simple steps:

  1. Lightweight theme and cache plugins
  2. Images
  3. Google fonts
  4. Caching and Cloudflare
  5. Optimize CSS delivery
  6. Remove unused CSS
  7. Gzip compression

01

Lightweight theme and cache plugins

I started with a free Hello theme by Elementor and installed two cache plugins, Autoptimize, and WP Super Cache. Here’s how I did it: Speed Up Your WordPress Site with WP Super Cache and Autoptimize

02

Images

When I started building my landing page, I made a huge mistake. I completely ignored the most important rule about images – to make them as small as possible. I like to use screenshots for my tutorials, the problem is that image-heavy articles are slow to load. Especially on high-resolution displays, screenshots can have even few megabytes, which is absolutely unacceptable.

For the landing page, I recommend using low-quality cover images hidden behind gray, partially transparent overlay. At first, I used a regular image and applied the overlay in Elementor, but this approach was bad for two reasons.

First, I used a big image and second, I added another resource in the form of CSS rule. Then I realized, that I can produce the image with overlay directly in Photoshop and export the result as JPG with 20% quality. With overlay applied, the image is actually smaller as it displays a smaller amount of color, yet it’s still acceptable.

This background image has only 34 KB, but it’s still pretty good for my purposes:

Desktop version of the landing page background image.

For mobile devices, it’s advisable to use a different, ideally even smaller image. You can easily set this up directly in Elementor. In my case, I use this image for a mobile version of my landing page:

Mobile version of the landing page background image.

It’s loaded automatically depending on the screen size of the device used by the visitor of the website. I don’t use the foreground image of myself on mobile devices to speed up the page even more. So when you access my page from the regular desktop, you’ll get this:

Desktop version of the landing page.

While when you access it from a mobile device, you’ll get this:

Mobile version of the landing page.

Autoptimize offers WebP support. It will automatically create a WebP version of your images which loads faster than regular images. These optimized images are served to the supporting browsers so they load your resources faster than regular images.

To set this up on your website, make sure to have this option checked:

Load WebP settings in Autoptimize.

Meet Cloudinary

If you want to take the images optimization to the whole new level, you should definitely consider Cloudinary.com. It’s a free web service which allows you to upload all your assets and use links to those assets in your posts. Two biggest advantages of this approach are:

  • loading times
  • on-the-fly imagine manipulation

With Cloudinary, your images sit on CDN network so they are delivered much faster than if delivered from your web hosting server. On top of that, Cloudinary allows you to manipulate images directly by inserting specific commands right inside the URL of the image.

As an example, here’s the URL to one of my image https://res.cloudinary.com/zavrelj/image/upload/v1568515559/SPS/3-steps-to-powerful-seo/autoptimize-settings-loadwebp.png. When I want to optimize it, I can just insert specific directives right inside the URL like this: https://res.cloudinary.com/zavrelj/image/upload/w_0.5,f_auto,q_auto/v1568515559/SPS/3-steps-to-powerful-seo/autoptimize-settings-loadwebp.png.

This addition will make sure that the image will be delivered with these settings:

  1. w_0.5 will set the width to half the original width
  2. f_auto will automatically decide the optimal format including WebP or JPEG-XR based on the browser
  3. q_auto will find the optimal balance between file size and visual quality

03

Google fonts

When you install Elementor, you’ll get default fonts from Google, but I suggest just turning them off. People won’t leave your website because your amazing article is displayed in a boring Arial instead of exciting Roboto.

On the other hand, I bet that they will definitely leave it if the quality of your content is poor. Roboto (or any other Google font for that matter) won’t probably help you keep them on your website.

To disable Google fonts site-wide, you can use the Autoptimize feature. Just go to Dashboard and hit Autoptimize link at the top:

Autoptimize settings.

Now choose the Extra tab and select Remove Google Fonts option:

Removing Google fonts in Autoptimize.

Scroll down to Save Changes:

Saving changes in Autoptimize.

And finally, move your mouse over Autoptimize link located at the top and Delete Cache:

Deleting cache in Autoptimize.

When you refresh your website now, it should load considerably faster and Google Fonts should be gone.

04

Caching and Cloudflare

Caching can help speed up your website by delivering the already generated and stored content. To get the up-to-date version of your website after making some changes, you need to empty the cache.

First, delete the cache creat by Autoptimize and WP Super Cache. If you still see no changes, you might need to purge Cloudflare cache.

Here’s how to do it.

Go to your Cloudflare account and select the right domain. Next, click the Caching icon:

Cloudflare purge cache

Here, you can either purge everything or just a specific page or even image and other assets.

You can also turn on the Development Mode. This will temporarily bypass the cache and allow you to see the updated content:

Cloudflare development mode.

05

Optimize CSS delivery

CSS is notoriously slowing down WordPress and the more complicated and heavy theme you use, the worse this can become. That’s why there are some approaches you can use to at least minimize the potential negative impact.

One of the popular approaches is based on the premise, that you initially load for the user only that part of the content he can actually see. This makes sense. There’s no need to load the whole long page if your user is able to see just the first 1% on his tiny mobile screen. 

The immediately visible part of the content is called Above The Fold because it’s in fact above the region where the page “is folded” so the rest is not visible unless the user scrolls down to see it. It’s therefore critical to load only such CSS that needs to be used in order to correctly render the Above The Fold content. This portion of CSS is the so-called critical CSS.

Now, the obvious question is how to make sure that only the critical CSS is loaded and the rest is deferred and loaded only when it’s needed, typically once the user scrolls down the page.

The answer is simple. You need to specify which portion of your CSS is critical and there are tools to help you with that. Once you have your critical portion of CSS specified, you can use Autoptimize to load it prior to anything else.

First, let’s load the whole CSS inline so we can grab it from the HTML code.

Go to Autoptimize and click the Inline all CSS? option in the CSS Options section:

Autoptimize CSS settings.

Scroll down and save the changes.

Open your website in Incognito window, hit CTRL+U to display the source code of the page and select everything inside the style tag. This can be a lot of code, but don’t worry.

CSS in source code.

Copy the selection to your clipboard and navigate to Critical Path CSS Generator page.

Here, you need to type the URL of your website and paste the code from your clipboard:

Critical Path CSS Generator - full CSS

Once you have this, hit the Create Critical Path CSS button and the script will find out which portion of your CSS must be loaded to render Above the Fold portion of your page correctly:

Critical Path CSS Generator - critical CSS

Copy the result from the third window that will appear and go back to Autoptimize settings. Uncheck the Inline all CSS? option and check the Inline and Defer CSS? option instead. Now, paste your code to the text area that will appear:

Autoptimize - above the fold CSS

Scroll down and Save Changes and Empty Cache.

Check the speed of your website, it should be faster now.

06

Remove unused CSS

There’s a good chance that your website contains a lot of CSS that you don’t need. Frameworks like Bootstrap or themes come with dozens of CSS definitions that you probably don’t use. These unused definitions only add excess code and contribute to the growth of your website which is slower to load.

Removing unused CSS can not only help optimize content rendering but also improves the overall performance of your website.

First, you should analyze if you have any CSS that’s unused and how much of it is there. If you’re using Chrome, there’s a nice tool called Coverage that helps with that:

  1. Open Chrome DevTools with CTRL+SHIFT+I
  2. Open the command menu with CTRL+SHIFT+P
  3. Type “Coverage” and select “Show Coverage”
  4. Hit the record button and reload the page

As you can see in my case, 95,5% of my autoptimize.css is not used on this page, yet it’s loaded. In total, this page loads 1.5 MB of resources, but only 0.4 MB is used, so 77% of the loaded assets are just dead weight which slows the loading times.

When you double-click any line, DevTools will show you what CSS definition is used or not. The green column in front of definition means that this page used it, red means that it didn’t.

In order to get rid of unused CSS, you can use an amazing online tool available at www.uncss-online.com where you place your HTML and CSS and it will return your shortened CSS.

However, with WordPress, it’s pretty hard to get around everything that’s going on with themes and plugins. If you know what you’re doing, this can greatly improve the performance of your website. If you don’t, it’s better to ask some front-end specialist for help.

I’ve used this technique for my Jekyll generated and Netlify hosted static website when I was able to get rid off 95% of unused Bootstrap CSS, but that’s another story for another article.

07

Gzip compression

Gzip compression is another great tool to improve the loading speed of your website. It basically compresses the files like HTML, CSS, and Javascript and sends this compressed version to the browser of your visitor.

This much smaller version of your website is then automatically decompressed by the browser and the visitor is served the uncompressed original files. In my case, I was able to compress 85.88% of my content so instead of loading 154.2 KB, the browser of my visitor loads only 21.8 KB.

Testing Gzip compression

Let’s see how this is done. First, you need to locate the .htaccess file stored in the root of your domain. If you’re using cPanel, go to File Manager:

Namecheap cPanel File Manager

Locate your domain name, and look for .htaccess file. If you’re using only one domain, this file is typically stored inside the public_html directory.
Select the .htaccess file and click Edit:

Editing .htaccess file

Place this code inside below whatever content you already have there:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml


  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
Saving changes to .htaccess file.

Save the changes. That’s it!

Now test your gzip compression at https://www.giftofspeed.com/gzip-test/

02

Mobile-friendliness

It’s very important that you always make sure your website looks great on mobile devices because more and more people use them as their sole means to access the Internet.

If you don’t have your content mobile-friendly you are hurting yourself because those unhappy visitors won’t give your website a second look on their desktop PC, they just disregard your site as lame and weird.

Luckily, these days, most of the WordPress themes are mobile-ready and responsiveness is an integral part of them. You can test how the specific page or post looks on desktop, tablet, and mobile and you can even choose which elements should be visible or hidden on specific devices and screen sizes.

All you need is keeping this in mind and always test how your content looks on different devices. When you need to compromise, always aim for the best version for mobile devices unless you are sure that your traffic comes primarily from desktop computers.

This is something you can easily find out with the help of Google Analytics for example where you can display the type of device your visitors are using to access your website.

03

XML sitemap

In order to make sure, that search engines can find, index and rank your website is to submit an XML sitemap. A good XML sitemap is like a roadmap of your website and it helps Google and other search engines to find essential pages of your website.

Even though Google crawls the Internet on its own so it would eventually find your website, it won’t hurt to help him with the effort. 

First, you need to create the sitemap and I will show you how to let Yoast generate it for you. Second, you need to submit it to your Google Search Console account.

Let’s get to it.

Make sure you have Yoast SEO plugin installed:

Yoast plugin dashboard

Go to the Features tab and scroll down to XML sitemaps. Click the question mark to reveal the link to your sitemaps:

Yoast plugin features
Yoast plugin XML sitemaps

Click the See the XML sitemap link to see your sitemaps and copy the URL address:

XML sitemaps URL

Open Google Search Console and select Sitemaps from the menu. If you don’t have an account yet, just sign up with your Google account and add the URL of your website.

Adding sitemaps to Google Search Console

Paste the URL of your sitemaps and hit the SUBMIT button:

Submitting sitemaps to Google Search Console

That’s it! Google now knows about your website and its individual pages. Great job!

02

Step 2: On-page optimization

On-page optimization basically means that you try to help search engines to better understand what your website is about. When Google crawls your website, it does a pretty amazing job by realizing what’s going on there based on the context, but it’s still just a robot and it can’t understand everything as easily as we humans do.

Search engines look for specific clues to get the context like keywords, synonyms, alt text of images, and even the kind of theme you use. Yes, fitness theme and butchers theme have some distinct features that might help with the context.

01

Focus keyphrase

It’s usually advised to use just one keyword. I can understand that if you cover many different topics in one article, this might be quite hard, but you just need to choose the most relevant keyword. For example, for this article, I’m simply using SEO as a keyword.

Yoast Focus keyphrase

02

Page title

Get your keyword in the title of the page and respect the length of the title suggested by Yoast to avoid clipping. Also, make sure that the title is always wrapped by H1 heading and that you don’t use H1 heading anywhere else in the article. There should be only one per page and it should be reserved for the title.

03

SEO title

The page title and SEO title can be the same, but you can add snippets or another text to the SEO title without changing the page title which is pretty convenient.

Yoast SEO title

04

SEO-friendly permalinks

Ideally, you should have your core keyword in the URL, however, if you have an old post with a lot of link equity (the number of links to that page), it’s not a good idea to change the URL, because you will start from scratch from the search engine point of view.

I always start with a core keyword and try to come up with the title of the article next. This will guarantee that the slug (the URL version of the post title) contains the keyword. As you can see in the example below, my keyword for this article, which is SEO, is present in the title and in the URL address as well.

Yoast SEO-friendly URL

In any case, you should always use SEO-friendly links. The worst case that could happen is a plain link which looks like this: ?p=123. To make sure that your URLs are SEO-friendly and human-readable, go to Dashboard -> Settings -> Permalinks and check that the Post name option is selected:

SEO-friendly permalinks

If your links are not SEO-friendly, but they already have big link equity, it’s probably better to keep them that way. To learn more about permalinks, refer to this Yoast article: What is a permalink?

05

Meta description

This is where you describe what your content is about, what is the main message or goal of your article. Write down a short yet effective description and what’s in it for the potential reader, why should he click the link and read your piece.

Yoast meta description

06

Content

Get your core keyword and its synonyms to the content. This helps search engines understand that the content is actually relevant. Don’t try to push it hard though. Stay reasonable and use keywords only when it makes sense. Your primary goal should always be to create content for real people, not for search engines.

I have my keyword mentioned in this article in many places, but only where it makes sense. I don’t even try to place more of it solely because it could help with optimization.

07

Image optimization

You should optimize the description of the image so search engines better understand what’s on the image. You can do it by properly naming the image and adding the alternative text.

Try to name your image files properly before using them in your posts. Alternative text is not just for search engine, but for visually impaired visitors as well.

08

Internal links

Try to link from other pages to your page. This is a good signal for search engines. Just don’t overdo it, or it will look spammy, just try to stay natural. Make sure that your highest-authority pages have the most backlinks from other pages.

As an example, I placed this short paragraph to all relevant pages to explain that when the visitor just starts with his blogging career, he should read my comprehensive blog-building guide first:

Important message about cornerstone article

09

External links

It seems that search engines like when you link to the resources they already trust. This makes your website looks trustworthy as well, which might really help especially when you’re just starting out. Some say that this tactic might be a bit controversial, though.

For example, you can take the top 5 ranking search results for your core keyword and place them in your article where it’s relevant.

Another tactic is to create a section at the bottom of your article where you list external resources for a specific topic.

03

Step 3: Off-page optimization

Off-page optimization is all about link building. There’s an absolutely amazing guide for beginners which I can totally recommend: https://moz.com/beginners-guide-to-link-building

Liked This Article?

Smart Profit School offers a lot more! Join more than 40,000 students and get ahead of the class!

Didn't Like It?

Please, let me know in the comments below how to make it better. I’d appreciate your honest feedback!
me-squared-600x600

Jan Zavrel

Jan is Biohacker, iOS & Web Developer, Author, Teacher, Lifelong Learner, Evernote Certified Consultant. He’s an author of THE SYSTEM2, a unique methodology for Evernote power users, and THE NEW FITNESS: Forty Years Old Dad in Twenty Years Old Body where he explains how to hack your life to live forever. Learn more about his work at jan.zavrel.net.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Leave a Comment

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated and your email address will not be published. Please, do not use keywords in the name field. Let’s have a personal and meaningful conversation.

avatar

This website uses cookies to personalise content and ads, to provide social media features and to analyse traffic. We might also share information about your use of this website with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies, Terms of Service and Privacy Policy if you continue to use our website.