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:
- directly type the address of the web in the browser
- follow the link somebody emails you or posts on social media
- 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
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:
- a crawler
- an index
- 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.
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:
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:
Let’s dive in!
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.
Here’s my result for the landing page of Smart Profit School after some tweaks:
Let’s take a look at what I did to achieve this in a few simple steps:
- Lightweight theme and cache plugins
- Google fonts
- Caching and Cloudflare
- Optimize CSS delivery
- Remove unused CSS
- Gzip compression
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.
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:
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:
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:
While when you access it from a mobile device, you’ll get this:
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:
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:
- w_0.5 will set the width to half the original width
- f_auto will automatically decide the optimal format including WebP or JPEG-XR based on the browser
- q_auto will find the optimal balance between file size and visual quality
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:
Now choose the Extra tab and select Remove Google Fonts option:
Scroll down to Save Changes:
And finally, move your mouse over Autoptimize link located at the top and Delete Cache:
When you refresh your website now, it should load considerably faster and Google Fonts should be gone.
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:
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:
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:
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.
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:
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:
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:
Scroll down and Save Changes and Empty Cache.
Check the speed of your website, it should be faster now.
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:
- Open Chrome DevTools with CTRL+SHIFT+I
- Open the command menu with CTRL+SHIFT+P
- Type “Coverage” and select “Show Coverage”
- 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.
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.
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:
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:
Place this code inside below whatever content you already have there:
Save the changes. That’s it!
Now test your gzip compression at https://www.giftofspeed.com/gzip-test/
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.
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:
Go to the Features tab and scroll down to XML sitemaps. Click the question mark to reveal the link to your sitemaps:
Click the See the XML sitemap link to see your sitemaps and copy the URL address:
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.
Paste the URL of your sitemaps and hit the SUBMIT button:
That’s it! Google now knows about your website and its individual pages. Great job!
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.
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.
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.
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.
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.
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:
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?
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.
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.
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.
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:
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.
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