It’s high time for a new release of our SEO plugins. Since moving to a two-week release schedule, we’ve fixed more bugs than ever and added some awesome new features. With version 3.9, we are gearing up for the big four-oh. In that last release of this year, we will add something remarkable.

But let’s not get ahead of ourselves. Right now, we’re talking about Yoast SEO 3.9 and the changes and enhancements it brings. So, let’s get right to it, ok?

Yoast SEO 3.9

If you use the free version of Yoast SEO, then the first things you’ll notice are the new banners. These are slightly less annoying, while still informing you of our premium products. Besides that, we’ve moved the reload button for Google Search Console from the header. It is now easier to find and use.

We’ve made it possible for other plugins and themes to add HTML namespaces, via the wpseo_html_namespace filter. By doing so, we’ve also made sure to prevent conflicts with other plugins and themes that also add HTML namespaces.

Yoast SEO 3.9 Premium received the same updates and fixes as the regular one, plus a better title update in the social preview section.

Video SEO 3.9

The Video plugin also received some great updates. We’ve added support for traditional Wistia video URL’s and embed codes. To use this, it is recommended to re-index your video’s. There’s now a fallback for the detail retrieval of private Vimeo video’s, so they will be recognized. The plugin now recognizes //player.vimeo.com/… type URL’s. Force a re-index to use it on existing posts.

Local SEO 3.9

Our Local SEO plugin is undergoing some changes as well. The import function has been overhauled, and there is a new export for Yoast Local SEO locations. You can also find a second address line for business addresses that you can use for room numbers or floors, for instance.

Yoast SEO 4.0

In December, we’ll be releasing version 4.0 of Yoast SEO. This release will come with a genuinely awesome new feature for Premium. We can’t tell you too much about it. However, it is something a lot of you will find extremely valuable. Just a few more weeks…

This WordPress-driven website, for a saw-milling business based in Te Kuiti, milling and producing high-quality processed Radiata Pine for the building industry.

The project was contracted to Urban Legend web by Elan Design, who produced the custom designs. We converted the design to a custom WordPress theme, along with the necessary menus, posts, widgets, links etc to make the site easily editable to the client, or someone else with no knowledge of web languages.

At Yoast, whenever we do a website review, we frequently recommend people change their permalink structure. In this post, we’ll explain why you should consider changing your permalink structure and how to go about it.

Why change your WordPress permalink structure?

A common thing we see in permalink structures are the usage of dates. For websites that post content that is related to current events, such as news sites, this makes perfect sense. However, for most blogs, the content is usually “timeless” as it tends to cover subjects that doesn’t relate to a specific date in time.

Using dates in your permalink structure also tends to have another side-effect, namely a lower CTR for older posts that may very well still be relevant. Whenever someone sees a result in Google with a date pointing back two years ago, they’ll be less likely to click that result. Seeing as Google uses this CTR for page rankings, it might be a very good idea to change your permalink structure to something more appealing to your visitors! If you want more information, you should read our post on WordPress SEO URL / Permalink considerations.

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress training! »

Yoast SEO for WordPress training$ 99 - Buy now » Info

Changing WordPress permalink structure

There are two steps in changing your WordPress permalink structure. The first step is easy: go to Settings -> Permalinks and select Post name:

Changing your permalink settings

But what about all those old posts that still have dates in their permalink? With this handy tool, you can easily have a redirect generated that can be placed in your .htaccess file. This will point posts using the old permalink structure, to the new one. 

Please note that the tool currently only supports Apache-based servers and not Nginx.

After copying the redirect over to your .htaccess file, you should go out and test if everything is working properly. If the redirect doesn’t seem to be working, it could mean that you’re not allowed to use RedirectMatch on your Apache server.

If you don’t have proper rights to edit your .htaccess file or can’t use RedirectMatch, you can also consider using our Yoast SEO Premium plugin. The built-in Redirect Manager will automatically create a redirect for you whenever you alter the permalink of a post to reflect the newly chosen structure.

Read more: ‘WordPress SEO: the ultimate tutorial’ »

In SEO, we often talk about creating the right slug for a page. But what is this really? And why should you optimize it? In this post, we’ll explain all you need to know about it.

When you google “what’s a slug”, you’ll find that the definition we’re looking for is “a part of a URL which identifies a particular page on a website in a form readable by users.” It’s the nice part of the URL, which explains the page’s content. In this article, for example, that part of the URL simply is ‘slug’.

WordPress slugs

In WordPress, it’s the editable part of your URL that you can edit when writing a new post. Note that this only works with the right permalink settings. It looks like this:

slug-slug

If you have added more variables to your URL, we’re still talking about just that editable part of the URL to the page, like this:

slug-ocw

There’s an additional value at the end of that URL. In this case, that extra variable is used so slugs can be the same without the URL being the same. I think these examples clearly show what the slug we are talking about is.

New to SEO? Learn the Basics of SEO in our Basic SEO course »

Basic SEO training$ 199 - Buy now » Info

Optimizing your slug

What are the things you need to think of when constructing the right slug for your post or page? Let’s go over a number of characteristics you need to take into account:

No stop words

Filter our all the unnecessary words. Filter out “a”, “the” and “and” and similar words. We have written a tad bit more on stop words in our WordPress SEO article. For users of our Yoast SEO plugin: you might have noticed we filter stop words out by default.

Add focus

Don’t just filter out stop words, but really all the words that you don’t need. Make sure the slug still makes sense though. In the case of this post, WordPress automatically creates the slug “what-s-a-slug-and-how-to-optimize-it” (based upon the permalink settings in WordPress), which I manually reduced to “slug”.

There is one thing to keep in mind here. “Slug” as a subject is not likely to get another page on its own on our blog. This informative article will most probably remain the central point for information about slugs on our website. So I can reduce the slug to just “slug” for that reason. If this was an additional post to a main article, it would probably have been something like “optimize-slug” (and I wouldn’t have explained what it is, for that matter). So, do consider the page’s level or position on your website.

Keep it short, but descriptive

The URL of your page is shown in Google search results. Not always, sometimes it’s for instance replaced with breadcrumbs (awesome). When it’s shown, Google highlights the matching words from the search query:

url-in-search-result-pages-2

So you need to keep that in mind as well. Next to this, a short slug, right after the domain, will allow Google to show these keywords it in its mobile search result pages as well.

Now go optimize your slug with these three things in mind!

Read more: ‘SEO basics: what does Google do?’ »

Want to know how to create attractive archive pages? And how to increase click-through rates to your posts or pages? Make sure to write short and appealing excerpts for every post or page. The excerpt should be a teaser to get people to read your post. In this Ask Yoast, Joost explains the importance of using excerpts.

This Ask Yoast is all about the following question:

“Why is it important to use the excerpt? Doesn’t Google consider this to be duplicate content?”

Check out the video or read the answer below!

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

The importance of using an excerpt

“The excerpt is that bit of the post, that will be shown on archive pages. So, if you write a specific excerpt for a post, then that excerpt is what shows on archive pages.”

excerpt input field wordpress

The excerpt input field in WordPress

 “Sometimes it’s also shown on your front page, if the front page of your site features your blog posts. The excerpt can actually be a very good teaser to get people to read your article.”

excerpt on homepage

Blog post excerpt as shown on our homepage

“The excerpt is not considered to be duplicate content. In fact having excerpts for every post prevents having duplicate content, when you have a long archive page which shows more bits of the post. So you should use the excerpt if you can. It’s a bit more work, because that means writing an excerpt for every post. But you should if you could. Good luck!”

Ask Yoast

In the series Ask Yoast we help you with your SEO question! Not sure what’s best for your site’s SEO? We’ll come to the rescue! Just send your question to ask@yoast.com.

Read more: ‘How to create the right metadescription’ »

This site, for an Auckland childcare centre, was contracted to Urban Legend web via Elan Design, who provided the graphics and website content.

We coded the custom WordPress theme, comprising pages, posts and categories, widgets, etc. We installed and configured the necessary plugins.

Note that the client has yet to use the CMS to complete some of the content, including photo gallery, and events.

Having a website, online shop or blog that’s fast is a must nowadays. A fast website doesn’t only give your visitors a much better experience, but it also helps your website to rank. Sending fewer HTTP requests to the server can improve the loading times of your website. But why is that?

What are HTTP requests?

HTTP requests are requests that get sent to the server whenever someone visits your website. These requests can contain a variety of information for the server to process and act upon. The most important part of such a request is the URL. Based on this information, the server will try to return a valid response, such as a file. The first stable implementation of HTTP, HTTP/1.0, does these requests in series. This means that a group of requests needs to be finished before the next group is sent. Obviously, this means that pages with a lot of external files will suffer from longer loading times, making your website slow.

Speeding up initial loading times

As described in the previous section, loading a lot of files one after another will result in longer loading times. Now you might be wondering “How do I speed this process up?”. Luckily, there are a few techniques and advancements in browser technology that can help you with this.

Order a website review and get a plugin of your choice for free. We'll even configure it for you »

Get a Yoast website review€ 699 - Buy now » Info

Browser pipelining

Since the introduction of HTTP/1.1, it has been possible to use a feature called “browser pipelining”. This feature allows the browser to fetch multiple files in rapid succession, without waiting for a previous request to finish. This means that the browser doesn’t have to wait as long to send off the next request.

In theory, this would be a very handy feature to have enabled by default. Sadly, in practice, this system still has some flaws. Due to its asynchronous nature, it’s possible that files load in the wrong order.

Let’s take a custom jQuery plugin as an example of how browser pipelining could do more harm than good. As your custom plugin depends on jQuery, the jQuery library needs to be fully loaded before your plugin can properly run. You might already see where this could go wrong; because browser pipelining doesn’t wait for previous requests, your plugin could load before jQuery. The result? JavaScript errors.

This problem with load order can also easily occur with something like images. In the case of images, it’s possible that the order in which the images get displayed differs from the actual order in your HTML.

HOL blocking

Another phenomenon that sometimes occurs when using browser pipelining is Head-of-line blocking (HOL blocking). What this means is that a particular packet (a part of a file) is keeping another packet of the same file from successfully completing. Other packets can only continue on their way once the delivery of the first package to the browser ends.

Due to the issues mentioned, most browsers disable HTTP pipelining by default. In the latest version of HTTP, aptly named HTTP/2, the issues with pipelining are addressed by using a technique called multiplexing which sends multiple HTTP requests over a single TCP connection. If you want to use this technique, make sure your server and your audience’s browsers, properly support HTTP/2.

Move JavaScript files out of the head section

There’s another way to make your website to load faster without much extra hassle. But first a brief history lesson!

Placing all the required CSS and JavaScript in your <head> section used to be considered common practice. However, the problem with this technique is that the rest of your HTML won’t display because these files block its rendering. This results in your visitors looking at a blank page for a couple of seconds.

As early as 2007, a new best practice surfaced. This best practice recommends moving all the JavaScript from your <head> section to the bottom of your page, just before the </body> tag. Why? Because JavaScript blocks any further rendering of a page until it has loaded all its files. By moving the JavaScript, the page’s HTML renders first instead of last. Sometimes it’s possible that you want the rendering of the page to wait until a particular JavaScript file loads. This would be the only exception when it comes to moving files out of the <head> section of your HTML.

Moving CSS to the bottom of the page is not recommended, as it stops the browser from correctly displaying and formatting your content. This impacts the overall user experience. Nobody wants to visit a website where text jumps around the screen because a stylesheet doesn’t load until the very end. Although moving your JavaScript to the bottom of your page doesn’t reduce the number of HTTP requests, it does help improve the overall experience.

Reduce the number of files

Another option to speed up your website is by limiting the number of files that load. This is because for every file you try to load, your browser sends a separate HTTP request to the server. Fewer files means fewer requests and therefore a faster website.

Most commonly, JavaScript, CSS, and images are the main culprits when it comes to slow loading pages. To combat this, you can use a few techniques, namely:

Minifying and concatenating your JavaScript and CSS files.

By minifying and concatenating assets such as CSS and JavaScript, you not only reduce the overall file size, but you also minimize the amount of files that need to load. A good rule-of-thumb is to group files based on their respective functions; if you have multiple files that do something with image manipulation, it might be a good idea to concatenate those.

Additionally, by limiting the amount of CSS files that load initially, you reduce the overall loading time. In that case, minification and concatenation can help as well. After the initial loading of CSS files, your browser caches it so subsequent requests shouldn’t take up as much time. You can imagine that having a single file with all the relevant CSS, plus the caching, can significantly improve the overall experience.

If you have CSS that is very specific for a particular page, you’re better off loading that file separately. As a result, you won’t unnecessarily ship specific CSS rules that aren’t used elsewhere in your HTML.

There are plenty of online tools to help you with minification and concatenation during development. You can also use a plugin, such as WP Rocket, to help you out with this.

Optimizing images

Some themes are heavily dependent on pictures. Because images are also separate files themselves, they too fall victim to the limitations of HTTP. To get around this, it is possible to make use of a technique called CSS spriting. This technique allows you to take multiple images (usually of a similar size) and reduce them into a single image. Then with some smart CSS techniques, you manipulate the sprite and only display a specific part of it. There are a couple of online tools that can help with this, such as SpriteMe. It’s unnecessary to create sprites for _all_ your images, but it’s worth putting in the extra effort for things like backgrounds and social media icons.

Lazy loading

Another way to ensure images won’t make your pages slow, is using a “lazy loading” plugin. Lazy loading is a technique where some JavaScript looks at the current viewport of the visitor and only loads images that are (almost) within view. A good plugin for this is the Lazy Load plugin which delays loading of images until the user starts scrolling down the page.

Bonus tip: use a CDN

Finally, here’s an extra tip. Content Delivery Networks, or CDNs, are a network of optimized servers across the globe that guarantee fast delivery of static content such as images, CSS and JavaScript. The main advantage of using a CDN is that you’re retrieving content from a separate server. This overcomes one of the HTTP restrictions which limits sending a large amount of requests to a single server in one go. By overcoming this restriction, you can achieve shorter loading times! Another advantage of these CDN’s is that the data comes from a server closest to your visitor’s physical location. Shorter distances to the server means faster data retrieval. It’s possible to use more than one CDN, which means your browser can deal with even more HTTP requests at the same time.

Here at Yoast, we use MaxCDN (affiliate link), but with the rising popularity of CDN’s, there are plenty others to choose from. Once you’ve found a CDN provider of your liking, using a caching plugin like WP Rocket can help you to configure your CDN for your website.

Conclusion: Reduce those HTTP requests

As you can see, plenty techniques are available to decrease the loading time of your website. By far, the biggest improvement you can make is reducing the amount HTTP requests you send to the server. Additionally, making the files smaller through minification can also help speed things up.

So, go forth and optimize your CSS and JavaScript! Lower those HTTP requests! Your visitors and servers will thank you for it.

Read more: ‘Site speed: tools and suggestions’ »

For this edition of Ask Yoast, we received a question that belongs in the SEO basics category: what’s a slug? The answer is simple because it’s the piece of the URL that distinguishes a post. In this Ask Yoast, Joost explains what a slug is and what its SEO benefits are.

This Ask Yoast is all about the following question:

“What’s a slug? What’s the difference with a URL? And what is the SEO benefit of a slug?

Check out the video or read the answer below!

New to SEO? Learn the Basics of SEO in our Basic SEO course »

Basic SEO training€ 199 - Buy now » Info

What’s a slug?

Can’t watch the video? Read the transcript here:

“Slug” is actually a word that comes from the WordPress community. A “slug” is the piece of the URL that distinguishes that post. So if you have yoast.com/wordpress-seo, the URL for our WordPress SEO article, then WordPress SEO is the bit that identifies that page as being our WordPress SEO article. It’s what our system uses to recognize that it has to serve you that specific page. It’s the defining part of the URL.

The SEO benefit of a slug is that you can change the words in there and make sure that it has the words that you really want to rank for, because it’s one of the indicators to Google of what a page is about. It’s also one of the things that people see in the search results. So, if you see in the search results ten different URLs underneath each other, about a certain topic, like WordPress SEO, and you see our yoast.com/wordpress-seo, that’s very on point and people might click on that a lot easier than if it’s yoast.com/?P=613458, which is the old default of WordPress.

So that’s what a “slug” is and why it has SEO benefit.

Good luck!”

Ask Yoast

In the series Ask Yoast we try to help you out with your SEO issues! Are you in doubt what’s best for your site’s SEO? We’ll come to the rescue! Just send your question to ask@yoast.com.

Read more: ‘SEO friendly URLs’ »

There will be times where you want to redirect visitors to a different part of your website when they visit a particular page or post. Reasons for this can be that you renamed a post and its URL, a page was removed or you want a different page to rank.

Redirects in a nutshell

The name ‘redirect’ pretty much says it all: It sends visitors traveling to a specific page to an alternative one. But what does this 301 mean and how does it differ from a 302 redirect? Both send your users to a different page. The only subtle (yet very important) difference is that a 301 will permanently send visitors and search engines to the new destination. 302 redirects indicate that you only temporarily want visitors to be sent to a different page.

Creating a 301 redirect on the server

One of the most basic methods of adding a 301 redirect, is by editing your .htaccess file on the server. This method is only available on Apache servers. Nginx has their own way of defining redirects in the server configuration and requires extensive knowledge of system administration.

These configurations can get quite unmaintainable over time, especially if you’re an avid blogger or you’re trying to improve the SEO of your posts. On top of that, you would have to log in on your server over FTP, edit the files and re-upload them every time you add a new redirect. That’s why, generally speaking, using this method is not considered the way to go.

Creating a 301 redirect with PHP

As a WordPress developer, you have two options: Either you make a redirect by altering the headers of a file in the code -or- you make use of WordPress’ built-in
wp_redirect function.

An example of plain PHP could be as follows:

<?php
// MyExampleFile.php
header("HTTP/1.1 301 Moved Permanently"); 
header("Location: http://www.my-blog.com/a-new-destination"); 
?>

And this is how you’d do the same, but now by using WordPress’ built-in function:

wp_redirect( get_permalink( http://www.my-blog.com/a-new-destination ), 301 );

If you forget to add the 301, both WordPress and PHP will both assume that it’s a 302 redirect, which isn’t always the case.

This method is a bit easier than editing files on the server, but can also become cumbersome once the amount of redirects increases.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Creating a 301 redirect with Yoast SEO

Our Yoast SEO Premium plugin offers you a helping hand when it comes to creating these redirects. Our built-in Redirect manager assists you whenever you change the URL of a post, page or any of the taxonomies that may result in a possible 404 if you don’t properly redirect visitors.

In addition, we also offer you an interface to edit or remove these redirects at a later point in time. The plugin also tells you when you’re about to create a redirect that will result in a redirect loop. This looping is something you want to avoid at all costs.

Read more: ‘How to properly delete pages from your site’ »

Ever since the release of the 3.0 version of the Yoast SEO plugin, JavaScript has been a big part of it. We rely on it to make high-end features possible, like real-time content analysis. The decision to use JavaScript meant that the development team had to make a lot of choices about technologies and tools. So, we had to get a firm grasp of the use of JavaScript in WordPress.

While working on Yoast SEO 3.0, we discovered that few WordPress contributors have extensive JavaScript knowledge. At the contributors day of WordCamp Europe 2016, we saw an opportunity to help WordPress advance the future of the internet. By documenting the JavaScript in WordPress, we can make it easier for everyone to build on and enhance the code.

We believe that JavaScript is here to stay. It is a great language that helps to enrich the user experience people enjoy so much on the web. But to work towards a better JavaScript implementation and understanding of WordPress core, we had to find out what goes on!

That means documenting all the places where decisions were made, magical things happen or where complicated situations are handled. This documentation is a requirement to maintain all the functionality. It’s also crucial to prevent misunderstandings that will lead to bugs or other problems. These insights resulted in our dedication to documenting all the existing JavaScript files used in WordPress.

How we started

The first thing we did was to reserve a slot in the development calendar. Every Thursday we have two hours to work on the documentation process. This means that all developers in the office are going to work on WordPress core activities for that period of time. At the moment the primary focus is JavaScript documentation so everybody will put their time into this particular task. In the future, we might be working on other parts of the core.

To get things going, we started off with a briefing about the intentions and goals. After this meeting, we developed a practical approach. This approach consists of guidelines and tools to ensure a uniform result. Every result must follow all standards. We use these to make sure everyone works in the same way.

Tools: JSDoc

Since we’re writing JavaScript documentation, it was only logical to use JSDoc to generate a view of the state of the documentation. The WordPress standards dictate which specific tags you should use in the documentation. It’s mainly used to validate that everything is visible at the intended location.

WordPress: Coding Standards

WordPress has a precise definition on the formatting of code. This ensures that the entire code-base has the same look and feel. It helps developers in providing a unified experience throughout the platform. You all know these definitions as Coding Standards. WordPress implements separate standards for PHP and JavaScript.

There is also a precise definition on how you should format your JavaScript documentation. It is possible to use a tool to generate documentation. If you do, you can use special keywords to provide extra information about the code that is being documented.

Prioritizing files

To start, we’ve created a list of all the JavaScript files provided in a WordPress installation. From that list, we determined what files are the most complex and which ones are in the most critical places. This way, we developed a priority list.

Weekly dedication and future

Every week, all our developers have two hours to pair up and write documentation for a specific file. All patches are code reviewed internally at Yoast before we submit them to core in our attempt to make the review and merge as easy as possible. Currently, we submitted a total of five patches to the WordPress core repository. Three of them are already merged for the upcoming release 4.7.

We received very enthusiastic feedback on the patches submitted. Besides that, we had a good time (with some frustrations) figuring out what was going on. Do you want to follow our lead and get to know WordPress core better? If so, find code that doesn’t have documentation, determine what it does, write the documentation and create a patch. It is one of the most gratifying things to do and makes core documentation maintainers jump with joy!

To be continued…

We will continue to document the files until we finished them all. After that, we will evaluate how and where we’ll put our team to work. We could work on improving existing functionality, architecture and efficiency, but could also develop new features and bootstrapping core for the future.

Do you want to help? Or do you need to document your own JavaScript for a patch in WordPress core? Then you should learn all about the WordPress JavaScript documentation standard.

The merged tickets at WordPress trac:
https://core.trac.wordpress.org/ticket/37717
https://core.trac.wordpress.org/ticket/37718
https://core.trac.wordpress.org/ticket/38118
https://core.trac.wordpress.org/ticket/37365
https://core.trac.wordpress.org/ticket/37571