New roles in the WordPress project, blocks and WordPress 5.1

Today’s roundup is a nice collection of interesting things that happened in the WordPress Community in the last couple of weeks. There’s some very exciting news about expanding the WordPress leadership team and I’ll discuss a couple of new features of the next version of WordPress.

Expanding WordPress Leadership

Matt Mullenweg published a post this week on the Make WordPress site where he announced two new roles to be added to the WordPress Leadership team. The first new role is that of Executive Director and will be taken on by Josepha Haden. The second role is that of Marketing & Communications Lead and our very own Joost de Valk will be taking on that role. This is what Joost had to say about it:

WordPress is paving the cowpaths for the web with projects like Gutenberg, I’m looking forward to leading marketing & comms for WordPress and working with everybody to tell the story of this awesome project and community.

Both new roles combined mark a great step forward for the growth of the WordPress Project as a whole.

Genesis 2.8 introduces Gutenberg based onboarding feature

Genesis, the leading theme framework, has introduced an onboarding feature that is based on Gutenberg. Basically, a set of preformatted and configured blocks (called Block Templates) are made available when you activate a Genesis Child Theme. This is what they had to say about it in the Genesis 2.8 announcement post:

Genesis 2.8 includes a new onboarding feature theme that authors can use to define which demo content is loaded when a user installs a new theme. One-Click Demo Install makes it easy for theme authors to load in plugins and perfectly-designed Gutenberg blocks onto the home page of a new site using that theme.

 

The Gutenberg project may have had some people doubting over the need for a new editor, but integrations like this – alongside an improved editing experience – that make it awesome. And this is only the beginning: it’s one of the first types of integrations like this.

Block plugins

In fact, there are already a couple of really interesting plugins out there that provide for extra custom blocks. We, of course, have our own Yoast SEO How-To and FAQ block (and there are many more on their way), but here are six interesting block providing plugins you should definitely check out:

As I’ve mentioned in a previous roundup, WordPress.org has a dedicated view for plugins that provide blocks as a library or as an enhancement to their already existing core functionality. You should definitely check that out if you haven’t already.

What next for WordPress 5.1

The next WordPress release is called 5.1 and is scheduled for the 21st of February 2019. The work for 5.1 began long before the launch of WordPress 5.0 and therefore it’ll have two very interesting features:

Fatal Error Protection

WordPress 5.1 will introduce a so-called WSOD protection (white-screen-of-death protection). This feature will recognize when a fatal error occurs, and which plugin or theme is causing it. With this new feature, you’ll still be able to access the WordPress Dashboard and the respective plugin or theme will be paused. This allows users to still log in to their site so that they can at least temporarily fix the problem.

PHP upgrade notice

If your site is still running on an old and insecure version of PHP, WordPress 5.1 will let you know after the upgrade. The lowest PHP version still receiving security updates is currently 7.1. This means all the PHP 5.x versions are outdated and insecure and the PHP upgrade notice is intended to get people to have their hosting companies change the PHP version. With the latest PHP versions seriously boosting your performance as well, trust me, you want to be on the latest and greatest, as it will make your site faster.

You can read more about these features in Felix Arntz’s introduction post on the Make WordPress Core blog. And that’s it for this roundup. What are you most excited about?

The post New roles in the WordPress project, blocks and WordPress 5.1 appeared first on Yoast.

Ask Yoast: Not much above the fold in Twenty Seventeen?

“Above the fold” is a term originating from newspaper and tabloid design. It refers to the upper half of the paper that shows the most important news and photos of the newspaper. In web design “above the fold” means the part that you can see without scrolling down the page. Guidelines often state that your most important message should be above the fold. However, the Twenty Seventeen theme just allows for a large image, and we received a question about that at Ask Yoast:

Ruth Maude emailed us about the Twenty Seventeen theme – the new default theme for WordPress:

“We’ve always told our customers that their main message and call-to-action should be above the fold. The new WordPress Twenty Seventeen is all image above the fold. Isn’t the fold important anymore?”

Check out the video or read the answer below!

For good SEO, you need a good user experience. Learn about UX & Conversion! »

UX & Conversion from a holistic SEO perspective$ 19 - Buy now » Info

Not much action above the fold?

In the video, I’ll share how I feel about “above the fold” nowadays:

Well, Ruth, you’ve hit my single most important issue with the Twenty Seventeen theme. It’s just too big. I think something should be above the fold too. At the same time, what’s really most important is that you show people that there’s a way to scroll. If people see that there’s a way to scroll on your site, they will scroll and they will find that other stuff, if you’ve made it interesting enough for them. So really good imagery is what Twenty Seventeen is all about. That can really help. And it can give a sort of interaction with a user that can be pretty good. But I wish there was a bit more action above the fold on 2017 too. We agree.

Good luck!”

Ask Yoast

In the series Ask Yoast we answer SEO questions from followers. Need some advice about SEO? Let us help you out! Send your question to ask@yoast.com.

Read more: ‘How to find the perfect WordPress theme’ »

How to find the perfect WordPress theme

We’ve seen it happen so often. You have a great blog, and at some point, you decide to go for a new look and feel. There are a couple of things you’ll look at, usually in the order: layout / look and feel, usability, and optionally, room for advertising. If the theme meets your needs in all two or three of these points, you might download and install it. If that sounds familiar, this post describes how to find the perfect WordPress theme!

A theme has quite a few things to take care of, and a lot of themes miss out on these. This overview should help to keep you out of trouble when you’re looking for a new theme. If you’re thinking of installing a new theme, please give the following points a thought. Keep in mind; your new theme should be accessible, compatible, customizable, integrable and standards compliant.

Define your needs

Whether you are in the market for a free theme, a premium theme or want to hire a developer to build one especially for you, the first step is always the same: define your needs. Write down what the theme should do, now and in the future. You might not need an eCommerce shop at this time, but what about in a year from now? What should your site look like? Which pages do you need? What types of content are you planning to publish? Once you have a clear picture of the requirements, you have a better chance of finding your dream theme.

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

Yoast SEO for WordPress pluginBuy now » Info

Find a trusted reseller or developer. How’s the support?

Should you build a theme yourself? Or will a general free theme do? The discussion on whether a premium theme is better than a free theme continues to rage on. Both sides have their merits. There are loads of crappy free themes, but there are just as many crappy premium themes. What you should do is find a reseller or developer that you trust. Look for social proof; how many reviews does a theme get? Is there an active message board? When did it receive its last update?

In general, every theme on WordPress.org underwent scrutiny, so they are safe to use. But that doesn’t mean they’re awesome. Theme resellers offer loads of premium themes in varying degrees of awesomeness. But just because you pay for them, doesn’t necessarily make them better than free themes. In addition to that, since you only receive the files when you pay for a theme, there’s no way to check the quality upfront. Despite social proof, it’s still a leap in the dark.

How flexible is the theme?

A static theme won’t do you any good when you want to change the page layout in a couple of months. Make sure to choose a theme that is flexible in its appearance as well as its functionality. Don’t choose a design that screams for full-width images when you only need a well-presented place to write your poetry. Check what happens to a theme when you turn off all massive images; does it still function? And is it possible to change colors, fonts and other visual elements?

Your theme should have ample room for widgets, plus it should support featured images and offer multi-language support. Lots of themes have a page builder on board; these help you construct your bespoke layout. But, this is something you should be careful with because these could generate less than stellar code that hinders your SEO.

Which post and page templates does the theme support?

Another way to keep things flexible is for a theme to offer multiple posts and page templates. That way, you could start off using a basic template with a main content area and a left sidebar, but have the flexibility to change to a full-width content area or one of the many other options. If a theme has only two choices, that might become problematic in the future. Pick a theme with enough sensible templates.

Does it function as a parent/child theme?

Parent and child themes are a great combo. If you use any of the theme frameworks like heavy hitter Genesis, you know how powerful these are compared to regular themes. A child theme gets its functionality from a parent theme. So if you’re making changes to your child theme, the parent won’t see these. You won’t break the parent theme if you make a mistake. The same goes for updates; if you update your parent theme, which happens often, it won’t wipe the changes you’ve made to your theme because it’s a child and doesn’t contain the functionality.

Whether you need a theme framework depends on your needs. Almost all WordPress projects will benefit from a theme framework, but it might be overkill if you only need a tiny amount of its functionality and you know exactly what kind of theme you need.

Watch out for theme bloat

Many themes are bloated, and this will increase loading time. If the developer of a particular theme included everything but the kitchen sink, you might get a feature-complete product but an insanely complicated one as well. Try to find a theme that offers everything you need, instead of everything there is. Your theme should be lean and mean. See the next point.

Check site speed and mobile-readiness

In this day and age, mobile-friendliness is imperative. In addition to that, your site and its theme should load as fast as possible. Choosing a lean and mean theme will certainly help in this regard. Check the responsiveness of a theme and run a Google mobile-friendliness test. You could also enter the address of the theme’s demo site in Google’s PageSpeed tool to see if there are particular loading issues. However, this is just an indication, since you can only judge the real loading speed of your theme when it’s running on your server.

Is the theme’s SEO in order?

While Yoast SEO fixes a lot of WordPress’ SEO issues, a good theme helps a lot. Most WordPress themes will claim SEO-friendliness, but make sure to check it. Find out if the theme’s code is nice and clean or an intangible mess. Has it been updated recently? And will it be supported in the future? How many JavaScript libraries does the theme depend on? Does it support Schema.org structured data? If you’re eyeing a free theme, make sure there are no hidden links to the developer’s website, as this can hurt your SEO efforts. In general, keep Google’s Webmaster Guidelines in mind when hunting for SEO-friendly themes.

Is the theme’s code valid?

Many a theme author is more of a designer than a coder, and thus they sometimes hack around until it finally looks the way they want, without bothering to check whether the code they’ve written is valid HTML. If it’s not, current or future browsers might have issues rendering the content correctly. You can check whether the code is valid by using the W3C’s validator.

Test, test, and test again

Once you’ve chosen your favorite new theme, it’s time to kick it into gear. Start with a development setup to test your new theme through and through. Run every type of test you can think of. This might be a security check with the Sucuri plugin or a theme check with the Theme Check plugin. Load your site with dummy data from wptest.io to see if every element is represented and functioning. Run pagespeed and mobile-friendliness tests to see if problems arise. Fix the issues, or find a new theme.

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

Bonus checks

That’s just to get you going. There’s a lot of stuff you can check before you install your brand-new theme. Start with these three checks, if you will:

Hooks

WordPress plugins use so-called “hooks” to be able to perform their designated tasks. These hooks allow for instance to add extra output, tracking codes, etc. A lot of issues with plugins will arise for you when a theme author forgets to add these hooks. This is how to check for them:

1. In header.php, it should have a small piece of PHP code that looks exactly like this wp_head(); or this do_action('wp_head');, usually just before a piece of HTML that looks like this: </head>.

2. In footer.php, it should have another small piece of PHP like this wp_footer();, or this do_action('wp_footer');

3. In comments.php and/or comments-popup.php, it should have a piece of code like this: <?php do_action('comment_form', $post->ID); ?>, just before the </form> HTML tag.

Template files

Another wise thing to do when you’re changing themes is to compare theme files. If for instance, your current theme has an author.php file, which contains the template for your author profiles, and your new one doesn’t have that, that might be an unpleasant surprise when you install the theme. The files you should be checking for in your old and new theme:

  • home.php: the homepage template.
  • single.php: the template for single posts.
  • page.php: the template for pages.
  • category.php: the template for category indexes.
  • author.php: the author template, used when someone wants to find all posts by a certain author.
  • date.php: the date template, used when someone tries to look at for instance a certain month of posts on your blog.
  • archive.php: this template is used when either category.php, author.php or date.php isn’t there.
  • search.php: used when someone searches on your blog, a very important template to look at if you’re concerned about usability, and whether people can find posts on your blog.
  • 404.php: used when WordPress can’t find a certain post or page, this is a very important template file to have!

How is your theme handling titles?

You should check how your current theme is handling page titles in the file header.php. You can find it within the <title> HTML tags. If the title tag differs, you might want to check out why and what happens when you enable your new theme. Sometimes it’s for the better (for instance, because it turns around blog description and page / post title), but you have to make sure up front!

It will probably look something like this:

<title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>
If it does, you’ll be a lot better to change it to:

< ?php wp_title(); ?>

Now Yoast SEO can take care of all the titles. We have a great article that you can read if want to know more about crafting good titles.

If your theme does all of this correctly, you should be quite ok. Good luck with your new theme, and if you have any tips on other things to check, please share in the comments!

Read more: ‘Why every website needs Yoast SEO’ »

How to reduce HTTP requests to speed up your WordPress site

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’ »

Recent posts and comments for WordPress

recent posts commentsWhen I was writing the chapter about internal links for our ebook, I also mentioned Recent Posts and Recent Comments. But these subjects were mentioned only very briefly. It seems so logical to add these for any blog, that it didn’t seem necessary to use more than a page to explain these. But if it is common sense to me, is it to everyone? My post about Common sense for your website taught me it isn’t. And if it is for you, it won’t hurt to emphasize that common sense.

In this post I will discuss a number of common internal links that can easily be added via WordPress itself. Or any plugin that is created up for the purpose.

Recent posts

For any website with a blog, adding recent posts or a section with a selection of links to posts (examples listed below) can be a valuable asset. We do that on our website as well. It’s an easy way of telling your visitor:

  • about recent market developments;
  • about recently added information to your website that might be of interest for him or her;
  • about new products or services your company offers;
  • or simply to let your visitor know that you have a blog.

versatile recent postsThis section usually consists of a simple list of links. WordPress offers this functionality by default like shown in the image on the right (this is actually in our Versatile Theme). But to be honest, even if you are less technical, you can create a nice PHP snippet using the examples WordPress gives for the wp_get_recent_posts function. If you prefer shortcodes, I recommend Bill Ericksons’ Display Posts Shortcode plugin.

Just recently, I also started playing with this very customizable plugin called Recent Posts Widget Extended. This plugin is very customizable right from the Appearance > Widget section in WordPress. If you don’t want to use shortcodes in widgets and prefer a customizable recent posts widget, you should really try this plugin.

There are many variations to the recent posts links:

  • Related Posts: usually below the actual article. Very helpful for people that want to read related posts if they like (the subject of) your article.
  • Featured posts: link to your main posts, best read articles or posts that relate to recent market development, for instance by linking to the most recent posts in a category.

Besides that, in the previous examples you can of course replace ‘post’ with ‘products’, and all will make sense as well.

Recent comments

You have to think about this section. If you add a recent comments section and your last comment is dated 2013, that will immediately add an expire date to your website as well. Apparently you haven’t written anything interesting last year?

But if you have comments on all your posts (thank you, valued commenters on this website) and you write articles on a regular basis, the recent comments section will be very valuable. Comments allow for keyword variations, as a visitor might have used a different keyword than the one you are using over and over on your blog. Next to that, and more importantly, a recent comments section will show your visitor you have a vivid and engaging reader base. Meaning you must have something interesting to say.

Note that in most cases you want to limit the number of links on your page (we aim for max 50 links per page), so the link value per link will be best. That might be a reason to choose between recent posts or recent links in your sidebar. In that case I would recommend recent posts. The reason for that is simple: If you have a vivid blog, chances are all recent comment links will go to the same page :)

WordPress has a function for recent comments as well: get_comments. It’s highly customizable, by the way. It’s really easy to display for instance just the comments made in the last week. As I don’t have any experience with plugins that can help you with these recent comments, I’m looking forward to any suggestions you might have.

Like with the recent post alternatives, something similar to the recent comments could be recent reviews or testimonials. Both are user generated content of course. In a recent project I found this plugin for testimonials very useful. It adds schema.org, for instance. If you are looking for a nice way to add testimonials to your WordPress site, be sure to check it out. It’s a new kid on the block, only released in May 2014, but I really like it!

Closing thought

Recent posts and recent comments are valuable internal links for any website. There are many ways to add these and it isn’t that hard to do. If you feel people aren’t visiting or even finding the blog on your website, you should simply add a small widget to your sidebar and see the traffic grow!

This post first appeared on Yoast. Whoopity Doo!

Regular security audits: taking our responsibility

Yoast SecurityToday, we’re announcing that we have partnered with Sucuri, in the interest of pro-actively securing our plugins. As our plugins run on more and more sites, we have a responsibility towards our users and the web at large to make sure that we do our utmost to make sure our code doesn’t make them vulnerable.*

We’ve been preparing this release for over two months. In that time, Sucuri has identified vulnerabilities in plugins across the WordPress ecosystem affecting over 20 million downloads. This shows the need for users and web hosts to update plugins promptly on security updates. If you look at it, it beckons for a more “forced” way of updating plugins. It also places additional scrutiny on us, plugin and theme developers, to ensure that we are not only focused on features but place additional emphasis on good, secure, code.

Once a security problem is public there’s no stopping the bad guys in any other way than to update. To us, as authors of plugins that all combined have more than 20 millions downloads and run on over 5% of the top 1 million websites, it made even more clear the need for more scrutiny in our code writing. We could think of no one better than the guys working in the trenches, Sucuri.

Improved security, so we can sleep better

Let me be honest: there’s no such thing as 100% safe software. Ever. But we can strive. From now on, Sucuri will review all the code in our major plugins at least four times a year, on top of our own testing and development best practices. They will work with my team to ensure that the patches we push are adequate and work with us to get the word into as many hands as possible. For all intents and purposes, they will be an extension of my development team, focused strictly on security. We are not foolish enough to think that this is the end all be all to security, no, we realize this is a process and will continue to evolve.

Like all of you, we’re not perfect. We’re sure though, that having the pro’s at Sucuri review our code regularly will lead to our plugins being among the safest out there, which is how we want it. It’s how we, as the good web stewards we strive to be, will take responsibility for what and how we do it – providing our users the best, and most secure, options available. Not just because you sleep better because of it, but because we sleep better because of it too.

But you said “partnered”?

Yes. This will be a relationship in which we reciprocate the service by being an extension of their online marketing team. Sucuri will review our plugins, we’ll help them by reviewing their online practices from a website optimisation point of view. Let’s face it, we can’t all be good at everything, they are great at Security, but could use some help at online marketing and website optmization, and they recognize this, which is why we are going to help them get better.

To start, they have already received our diamond review, our ultimate review package in which we provide a thorough review of their SEO practice, website usability and conversions. Have you seen their latest changes?

In a similar fashion, we’ve made the first improvements to our plugins based on their reviews, luckily showing no critical issues yet.

Additionally, they will be working with us beyond just the code we ship. They will be working with us to improve our overall security posture as an organization and we’ll be leveraging their Website AntiVirus and Firewall products to ensure a safe online experience for all our online visitors. They are the premiere Website Security company and we rock at what we do, it’s only right we make full use of each others services.

Lead, not follow

When I was on the Dradcast 2 months ago, I hinted at some of this. We should lead by showing how people can improve their products and processes. I personally think every premium plugin / theme company should have a process for regular independent security reviews of their product(s). This is an example which I’d love for every company in the WordPress community to follow and document.

We’ll be as transparent as possible about all of the things we do, both Sucuri in how they improve their site as we in how we improve our code. As you can see, we’re very excited to be working with the team at Sucuri and we look forward to making the web safer together!

* For the record: from a purely juridical point of view, the GPL basically disclaims all warranty.

This post first appeared on Yoast. Whoopity Doo!

Headings and why you should use them

This is a republish: we’ve made some minor changes to it. We decided to republish it, because this post and its content are still applicable and important now.

This post just had to be written. Somehow we have a chapter about Headings in all (!) our site reviews. Usually the website owner can’t change a single thing about the heading setup of the website, as he is unwilling or just lacks the knowledge to change the theme of the website. But headings do matter.

There are two ways headings can structure your content. In classic HTML, there would be 1 H1 tag on each page, maybe a couple of H2’s etc and these would all combine to form an outline of the entire document.

In HTML5, each sectioning tag (for instance <section> and <article>) starts again with an H1. This was done to make it easier to combine several components onto one page and still have a valid outline. It makes sense from a clearly theoretical perspective, but it’s lots harder to understand and we generally recommend against using it. This article explains what’s “wrong” with it.

Structuring the entire page

In the case of HTML4, it seems logical to use one H1 per page, of course being the main title of that page. In most cases, that’s not your brand name or website name (on your homepage it probably is, and that’s fine). On this page on yoast.com, it’s “Headings and why you should use them”. That is what this content is about. I’m not going to talk about Yoast here, so no need to make that the H1, right? Here’s what Matt Cutts has to say about it:

On a category page that H1 would be the category name and on a product page the product name. It’s not that hard, indeed. That is why we still recommend using the H1 this way.

H2 is for subheadings of that H1. Use it to divide content into scannable blocks; both Google and your visitor will like it. H3 is for subheadings of that H2, preferably. Sometimes I use H3 for blocks that should be H2, but just don’t hold that much information for the visitor, like the closing heading on this post, where I will ask you to comment on my statements – perhaps you don’t agree and we could have a nice discussion about that ;-)

I want to emphasize that this all isn’t new. Over the last six or seven, maybe even more years, not much has changed in the way we recommend using headers.

Without headings, it is all Chinese

Without headings, it is all Chinese

What I dislike most, is when people use headings to style certain elements of a website. “Call us at 0123456789″ and use H1 to style the phone number. Your web designer knows better than that. Have him add a class to your CSS file for that. Even Google’s SEO Starter Guide mentions this. Second, when people just squeeze an entire paragraph in an H2 or H3. That happens more often than you think. Sales pages or landing pages love that practice. We don’t.

Look what headings we found in the attic

Have you used any H4s, H5s or H6s lately? Alright, using an H4 could be useful if your text is longer than a 1,000 words and you want to add an extra layer in the page structure. And the H4 could be used for sidebar or footer headings that don’t include that keyword you want to rank for, but any other use of these headings seems unnecessary. Funny thing is that a lot of themes just did not pay that much attention to these headings as well, sometimes making H5 text smaller than paragraph text.

You should style them to make them look more important than regular text, but don’t overdo this. These headings are extras, I think. Used in the early days of the internet, but more and more useless these days. I wouldn’t mind if we would get rid of at least H5 and H6 altogether, to be honest. Using three, four headings at most is structure enough for me.

Headings and SEO

You are going to ask this: what value do headings have for SEO? Well, we feel that the value is less than it was, but headings still help Google to grasp the main topics of a long post. As mentioned, Google might scan your post as well and why not make that as easy as possible?

There are other things like great content and schema.org markup that will help your rankings more than a great heading structure, but in the end, using a nice heading structure isn’t that hard and helps your visitors as well. So please, at least use a heading structure and the way we described it above is easy enough for everyone to use.

What are your  thoughts on headings?

As promised: we are really looking forward to your thoughts on headings. They should be in any theme, but to what extent? Drop your 2 cents in the comments!

This post first appeared as Headings and why you should use them on Yoast. Whoopity Doo!

A new Yoast theme: Strategy

Today we’re unveiling the next of our Yoast Genesis child themes: Strategy. Aimed a bit more at the business side of the WordPress community, you’ll find that the look of this theme changes dramatically with the different color schemes it comes with. From a warm, beachy Summer feeling orange to a cool Winter.

Summer 354x290Winter 354x290

So, even if you prefer Autumn, or would rather be up in the Cloud(s), I think everyone will find a color scheme that matches their preference.

Autumn 354x290Cloud 354x290

The theme has the same benefits our other themes have: several great custom widgets, fully responsive with a sticky menu all the features a modern site needs, without any clutter. It’s a Genesis child theme, which brings with it all Genesis’ power, but we’ve added the possibilities of modern WordPress Themes because we’ve incorporated the theme customizer, allowing you to quickly and easily switch between all the settings.

So, go check out Strategy and tell us what you think!

This post first appeared on Yoast. Whoopity Doo!

Sliders suck and should be banned from your website

Two years ago, we wrote about why we really don’t like sliders. We still don’t like sliders. If your theme forces you to include a slider (also named carousels) on your homepage, please realize that it’s making you use a feature that has no value for SEO. A feature that is probably slowing down your site by loading extra JavaScript. And prevents your user from reading the good stuff (your content) immediately. It will most probably account for less conversion as well.

Even though both SEO experts and conversion experts agree on the fact that sliders have little use 99% of the time, website developers insist on adding sliders to their themes. Some customers refer to sliderless themes as “outdated” but we strongly disagree. Let’s make one thing very clear: sliders suck. Of course, I entitle myself to my own opinion, and you’re entitled to yours. But let me explain once more why they suck.

Science and experiments

It’s not often that science is conclusive in their findings. However, sliders seem to be one topic on which it is. There’s literally not one study that we’ve found that says sliders are a good idea. I often point people to shouldiuseacarousel.com when wanting to explain why not to use a slider. This simple website does an awesome job at showing the statistics as well as trigger the annoyance sliders usually evoke.

Sliders: better use static images or copy

Let’s look at some of the findings:

That’s just the tip of the iceberg. Over the years, many studies have shown that sliders should be avoided.

For good SEO, you need a good user experience. Learn about UX & Conversion! »

UX & Conversion from a holistic SEO perspective$ 19 - Buy now » Info

But… I need a slider!

Ok, so you’re, for instance, a photographer. You need that slider, right? Wrong. People tend to act as if there’s no other way to show their images but by sliders. This simply isn’t true. If you can’t have a slider and you’re a photographer, would you just give up having a website altogether? Of course not, you would look for other options, such as the revolutionary idea of showing static pictures. If you want moving pictures, you should change careers and become a filmmaker.

Seriously, whatever makes people think that having stuff move on your website is a good idea, ever, is still beyond me. Auto-playing videos are also annoying, right? You can create awesome collages through which people can browse at will. The pictures won’t be forced onto them (if they even notice them in the first place), they’ll just notice the ones they like. And trust me, that will sell better.

If you’re a photographer, it’s likely you’re a creative person. You probably make photo albums for people from time to time, which presumably don’t have sliding images. So how about you showcase that skill and creativity by designing your web pages with static images?

Focus

What you’re saying with a slider is basically: “I really don’t know which product or picture I should put on display on my homepage, so I’ll just grab 10 of them!” In that case, you really need to add focus. If you don’t know what to choose, how would your visitors or clients?
You should know what your own business is about and what product or picture deserves that front page spotlight.

By focusing on the right (static) image or message, you will give people a far better feel of your business, and you as a person, than a slider ever could. Not in the least because sliders, as we’ve said twice now, are simply ignored in most cases. And a message that’s ignored hardly ever comes across (notice the sarcasm).

SEO and Conversion Rate Optimization

There is another reason why we recommend against sliders. Sliders push down your main content, plain and simple. In fact, most sliders we encounter in our consultancy these days, are big enough to fill out any screen. This means the content won’t even be visible above the fold. And this backfires on your SEO efforts, which we’ve already shown through the article linked in the list of findings above.

There’s not a CRO expert that will disagree with us on this: sliders kill your conversions. So simply having a slider on your website, will get you less sales than without that slider! If that’s not a deal breaker, I seriously don’t know what is.

Just combine the two and realize what a monstrosity the slider actually is. It kills your rankings and your conversions!

Mobile websites and sliders

It’s really convenient to include a slider on a mobile website. It allows you to add more content to that page, that smaller screen, without the page becoming too long. What if people have to scroll, right? Well, quite frankly, they are used to that. That’s just one myth you can forget about. It’s not just that. Lots of times, things go wrong when using a slider on a mobile website. Some of the other pitfalls you’ll encounter when adding a slider to a mobile website:

  • Image sliders tend to load the desktop site images, not optimized for mobile speed or in fact ruining it for phones on 3g or less.
  • The same goes for sliders running on JavaScript. Why add JavaScript for something people will treat as a banner or simply skip to get to your content instead?
  • If your slider isn’t responsive, it will ruin your otherwise responsive website. This happens all too often, unfortunately.

Bottom line is that sliders might break more than they add in value for your website. But the main question you should ask yourself when using that slider on your mobile website, even if it’s responsive and optimized, is: do I really need that slider? I can’t imagine you do.

Why should you believe us?

If you don’t believe us, believe these experts who we’ve asked for their opinion and experience with sliders:

Sliders never converted and never will

“Sliders only exist because web designers love them. And because they make the life of the web team easy: they can give every department or product division a place on the homepage. And they don’t have to make choices.

But it’s not your job to make your colleagues happy. It’s your job to make your visitors happy. And to sell.
And that’s the biggest problem with sliders: they don’t convert. Never did and never will.”

Karl Gilis, Owner of AG Consult and renowned conversion expert

Use static images and copy instead

“It’s extremely rare to see sliders work. You’re better off using static images and copy.”

Peep Laja, Owner of ConversionXL.com and Markitekt


Just for portfolio displays

“I think sliders are interesting but somewhat problematic. The biggest problem I see is that if visitors are bouncing from the page in a second or two, they will never see the other options on the slider. If you use a slider for navigation, be sure the same choices are visible in static form, too. I think sliders work best for portfolio displays where several large, strong images can be displayed in the same space without impeding the visitor’s ability to navigate or determine what other content is on the site.”

Roger Dooley, Author of Brainfluence (also available on Kindle) and owner of Neurosciencemarketing.com


Sliders are distracting

“I think sliders are distracting. It’s a way to put extra crap on a page that’s typically not best for visitors. If it’s important in most cases you should just put it on the page without sliders or extra clicks.”

Hiten Shah, Co-Founder of Crazyegg and KISSMetrics


Sliders suck 99.8% of the time

“Sliders suck 99.8% of the time! We once did a test with a client where we changed their slider to a static image with 3 core benefits and lifted conversions by a nice amount.”

Bryan Eisenberg, Author of Brand Like Amazon: Even a Lemonade Stand Can Do It and Waiting For Your Cat to Bark (also available on Kindle)


Sliders are evil

“This popular design element is – for many – the go-to solution when there are more messages to put on the home page than there is room to put them. Rather than make the tough decisions that require prioritizing conversion goals, web teams turn to the rotating banner as an offer of compromise.

Sliders are absolutely evil and should be removed immediately.”

Tim Ash, CEO at SiteTuners, Author of Landing Page Optimization (also available on Kindle)


Use a static image instead

“In A/B tests, sliders tend to lose. In fact, one of the easiest ways to grow a page’s conversion rate is to remove the slider, and to replace it with a static image. If you want to be really lazy, you can just test the slider against the static version of each of the slider’s options. The static version usually wins.”

Karl Blanks, Chairman and Co-Founder of Conversion Rate Experts


Sliders deliver little to no value to the customer

“Sliders please the owner of the site, but they deliver little to no value to the customers. The reason is that we are not going to sit there and wait for your ‘movie’ to play out. I’m also not a fan of sliders because for most businesses they provide an excuse not to think about personalization and being good at giving the customer the right answer, right away.”

Avinash Kaushik, Digital Marketing Evangelist for Google, Author of Web Analytics 2.0 (Also available on Kindle)


Sliders are hardly accessible

Conversion is one thing, but from an accessibility stand, sliders suck as well. Here’s what our own Andrea has to say about this:

Though there are examples and recommendations to follow to make sliders as accessible as possible, I’ve rarely seen a fully accessible slider being used in production. Sometimes sliders are just not coded with accessibility in mind, sometimes they are but there are so many accessibility requirements to address that missing just a couple of them can be disastrous for accessibility. Interaction with keyboards and assistive technologies is so hard that static content is always preferable. It’s no coincidence that shouldiuseacarousel.com was launched by Jared Smith of WebAIM, one of the most influential and respected organizations committed to spreading out accessibility culture and developing accessible web content.

Andrea Fercia, accessibility expert at Yoast

Honestly, we could go on and on. So no matter how pretty you think sliders are, know this: sliders simply suck

Want to outrank your competitor and get more sales? Read our Shop SEO eBook! »

Shop SEO$ 25 - Buy now » Info

Epilogue

When we first published our (unchanged) opinion on sliders back in 2014,  UX designer Ian Armstrong commented that “in some cases, sliders make sense. A slider can be used effectively if it a) tells a story and b) doesn’t auto-forward.” Imagine a real estate page that has a slider for images of a house. It’s not auto-forwarding and helps you to get an idea of the entire house – it tells that story.

Ian also states that “if you properly set expectations and really stress the slider as a story mechanism, you’ll probably see a major uptick in interest.” He’s probably right, or, as Rich Page stated below that initial 2014 post: “If in doubt, TEST IT!” Most of us are used to sliders like that on real estate sites. There is always an exception to the rule, right? Although in this specific case, one might even argue if the ‘slider’ even qualifies as a slider.

Your 2 cents are welcome.

Read more: ‘eCommerce usability: the ultimate guide’ »

WordPress Themes by Yoast

yoast themesIt’s done! The WordPress Themes by Yoast are now finally available. This project has been over a year in the making. When Mijke joined Yoast in September 2012, we decided it’d be a good plan to use her design skills and our knowledge about optimizing WordPress sites to make themes that actually help people easily build good websites. We’ve learned a lot of things in the process of making these themes, most importantly that we’re so perfectionistic that we’d never get anything released if it wasn’t for my wife. But, we’re there.

We’re releasing 3 themes today, all of them very different but all of them share a lot of functionality too. They’re all Genesis child themes, as we believe in the Genesis framework. We’ve done “some” work on it though: we’ve fully integrated the Genesis frameworks core features and our own theme specific features with WordPress’ cores theme customizer, leading to functionality like this:

theme customizer

You can install the theme, customize it to your liking and then activate it. The screenshot above contains the Vintage theme, which is completely different from, for instance, the Versatile theme:

versatile desktop 1120x680

Shared functionality

All our themes contain a set of 8 widgets that you can use for all sorts of functionality. From easily creating mail signup forms to showing social network buttons and big call to actions. Check out the different Yoast widgets.

They also share our update code, which allows us to push updates for bug fixes, new functionality and even new color schemes. All of the themes have been built on Genesis incredibly SEO friendly core, so you can benefit from the highest standards in the industry.

More themes coming!

We intend to release a new theme every month or so, though we’ve decided to take somewhat more time for the next theme release so we have time to fix bugs that might arise. The next theme will be available around the end of March.

Flexibility while maintaining style

We’ve worked very hard to make the themes as flexible as possible, yet at the same time try and make them look good almost all the time. We’ve tried to make them all look “tailor made”, even though we’ve only named one theme as such :)

screenshot desktop 1120x680

I can keep talking about these themes, but you should just look at them, so let me encourage you to go check them out and play with their demo sites!

This post first appeared on Yoast. Whoopity Doo!