6 Essential WordPress SEO Tips And Tricks To Rank Above The Competition

Effective SEO is essential for taking your site up a notch and getting discovered online. Jon Henshaw, co-founder, and President of Raven Tools recently presented on this topic in a webinar, where he walked us through some advanced tips and tricks for speed and coding optimization. These tips will make for top-notch SEO and help your business rank above the competition.

Yoast SEO is probably one of the easiest to use plugins out there and it's worth it.  A good number of WordPress sites use Yoast and it's often the very first plugin installed due to its incredible SEO benefits. 

Yoast will help you control and manage your content's titles and meta descriptions beyond what the base WordPress install does. Additionally, Yoast provides open graph information so images you share via social media will be displayed automatically.

Another benefit Yoast provides is the ability to create XML sitemaps. Websites, provided they have solid navigation, generally don't need a sitemap. However, say you've been given a site that doesn't have the best information architecture… the site map will be useful in this case, giving search engine crawlers a better understanding of your website's structure. 

If you want a top-notch site optimized for SEO, it starts with choosing the right theme. While choosing a prefabricated theme is easier for beginners, investing in one built from the bottom up is the ultimate way to guarantee your site is fully optimized for SEO.

Reason being, all of the theme makers out there are trying to create a theme that is as appealing as possible to as many people as possible. The themes they create are packed full of features and contain code that isn't necessarily needed and can detract from site performance. 

On top of that, theme makers, while they are trying to appear to well-known SEO standards, they are not "SEOs" in terms of job function. They are very talented web designers with coding ability. Therefore, more often than not, these themes are jam-packed and end up slowing down your site. If you want a truly optimized site, like the one to be discussed here, you need to create your own theme.

Creating a theme with the Zurb Foundation

Many people might be familiar with Bootstrap. Another arguably better solution for creating a theme from the bottom up is with the Zurb Foundation. The Zurb Foundation is actively maintained and updated, as well as free and completely open-source. Through it, you can create a fully responsive front-end framework.

FoundationPress WordPress Starter Theme

FoundationPress is the up to date WordPress starter theme created by Zurb. This operates as a bare bones theme that already uses this framework that has been put together.

Here we will list the most important coding tips for when you put together your own theme. A lot of tips revolve around speed and structured data because that is incredibly important right now.

Semantic HTML

The first thing you should do when you start coding a theme is to make sure you are using Semantic HTML. Semantic HTML is fairly new standards that came out with HTML 5. Semantic communicates to search engines what it is your content needs. For example, if you're going to have your site navigation, you would put the <nav> element around the code that has that. If you have advertising that doesn't have anything to do with the content of your site, then you would be the <aside> element around that particular code.

Here is a code example of what that looks like. Everything inside of <nav> is site navigation. Below that, we have an aside and inside my <aside> is my advertising information. All of these things convey a context to a search bot. Because a search bot has to make a lot of guesses. All people code differently. Search engines are pretty smart but don't rely on search engines to interpret what your page is about. Instead, be very explicit regarding what your page is about.

CSS & Speed

With speed in mind, Google has recommended a new way of doing things. In the beginning, web design involved inline CSS. In other words, you would have a particular element in your HTML and you would go ahead and just apply that style right there to that element.

Then, everybody got better practices and started putting them into CSS files. So you would have something like main.css and you would link to it from the head of your document. We are, in a way, reverting back to the older style except we are doing it with better practices. That is by taking the CSS that is in the CSS doc and putting it directly in the head on the HTML page. What that does is takes away an additional call when a browser is trying to bring up a page.

Going back to the problem with prefab themes: most themes are calling all different kinds of files. They usually call multiple CSS files, multiple JavaScript files and so on. That can slow down being able to render that page. The newer trend is to start putting CSS directly on the page in the header. Additionally, along with the same lines, you need to be putting all of your JavaScript and anything that is beyond HTML at the end of your page. That way, it will make it load significantly faster and then go and grab that JavaScript and execute it if needed. 

Header Footer Plugin

Let's say that you've already put your theme together and you've done the most you can do. Then, as you get going you realize you have JavaScript you need to put in for, say, a social sharing plugin.

For this after the fact problem, you can use the Header Footer plugin. This is a solid plugin that has been around for a while; it is free and highly recommended. If you are running the Yoast SEO plugin (hopefully you are), as soon as you activate the Header Footer plugin, Yoast will give you a warning. Just ignore it. As long as you use this to insert code in the header and footer of your pages then it's not going to mess up or override what the Yoast plugin does.

Structured Data

Assuming you've been following SEO at all in the past few years, then you've heard of something called schema.org. Google decided that they were going to come up with their own vocabulary and they called it schema.org. Similar to the semantic HTML elements mentioned before, it allows you to tell a search engine that this a company, article, blog entry, or breadcrumb navigation for this page.

There isn't a chance for miscommunication to the search bot because you are being explicit with them. Structured data can greatly benefit you. It can also enhance your search results using something we call rich snippet. The original way to implement this was to use something called Microdata. Frankly, it was confusing. Fortunately, within the last year or two, we have created a new way to implement this called JSON-LD. The example above shows what the JSON-LD structure looks like.

It is important to designate, using structured data, whether it is an article or a blog post. Additionally, using the breadcrumb vocabulary is recommended because that can enhance the search results. It will show a category breakdown in the search results which is helpful because people can click on those things and have context about what the article/post is about.

Use the raven.link/schema for information on useful tools to help you get familiar with this. One tool pertains to the main options such as 'product'; you can input information and then it will output it into JSON-LD to give you a visual of how it works. The other tool is an actual service and WordPress plugin that will do any type of schema. Whatever it is you want to do, it will output it into JSON-LD.

This is another one that you've probably heard of if you are familiar with the world of SEO. AMP stands for Accelerated Mobile Pages. This is Google's attempt to make the web faster on mobile devices and deliver a better user experience. It basically forces us as bloggers and publishers to strip out all the stuff in there (ads and other things) that slow down a page as it gets rendered.

Here's an example of AMP in action. On the right is a normal blog post. Through AMP, it gets rid of everything and gives you the essential information.

This is an example of how Google is doing this on a phone. If you are on your phone and you search for something news related, you are going to see an AMP icon (red arrow). If you click on that, you are going to go to the AMP version of that.

Here's where things get interesting. While a faster loading page traditionally means a better user experience, this is a different scenario. Google hosts any page you turn into AMP. That creates a whole new list of issues which have to do with analytics because you are no longer hosting that information.

Those are things that Google itself is working on to solve because they realize that those are issues with publishers. The idea is that you can get further up on search results pages using AMP. So, it's something to think about doing. It's also going to start being used for e-commerce sites; eBay is set to start doing this and Amazon is on the way.

Automattic, who makes WordPress, has been working closely with the Google AMP team. If you are overwhelmed by the idea of having to convert everything over to your AMP page, don't fret. All you do is turn it on and it automatically makes AMP pages out of all the existing pages. If you are concerned about the new URL, they use the original link, so you're fine there. The biggest problems have to do with one click events which get stripped. But again, the AMP links are a work in progress.

Image optimization is one of the biggest optimization opportunities that people are missing with their sites. Particularly, when it comes to mobile. We've gotten used to broadband or flooding our blog posts with huge images intended for desktop browsers. However, as we now know, more and more of our traffic is becoming mobile. So, if you have those big images it's going to take longer. These are things that Google takes into account when it is deciding where to rank your site in their results.

ImageOptim

When on WordPress creating a new post, the first thing to do is compress the image before uploading it. ImageOptim is a free app for Macs with plenty of Windows equivalents.

EWWW Image Optimizer

Again, there is an easier way to compress images. The EWWW Image Optimizer will automatically optimize and compress every image you upload.  *If you're a WP Engine customer, we disallow this plugin but recommend using the cloud version: https://wordpress.org/plugins/ewww-image-optimizer-cloud/

SRCSET

There is a new HTML standard which is perfect for speeding up images. It's one thing to compress your image, it's another to get it to a size that is truly optimized for mobile. The way to fix that is to use SRCSET. SRCSET is this new standard element that goes with image tags. It lets you specify alternative images for a particular screen size and resolution For example, if someone was accessing my post on a phone and it was 306px wide, it would pull from the right side.

Here is an example of what the SRCSET code looks like. You will see that the code before it is normal. The SRCSET code is bolded; you can specify the alternative image here. You have the option to put the width of the screen (this one specifies 360px or smaller) and you also have the ability to set the resolution of the screen. This will show resolution two-times that the visitor is viewing on a high-resolution retina screen so it's not displayed as a fuzzy image.

It's one thing to deliver a small image so your page loads faster; it's also important that you don't simply resize a big image into something small and unreadable. To take it a step further, create completely different images. This works with SRCSET perfectly because SRCSET simply specifies a different image. By creating a different image with different dimensions and less information, you are optimizing it for mobile and ensuring fast load times.

While there isn't a plugin to create a completely new image (that's up to you), there is a plugin that will automatically convert whatever image you include those sizes. SRCSET Responsive Images is the plugin that will help you start implementing this on your site.

Although we have discussed a lot of technical SEO tips and tools to get an upper edge on your competitors, it doesn't matter how detailed or meticulous you are. The next tip is to help you in case something breaks. 

Google Search Console

To help alleviate the inevitable issues, make sure you have added your site to Google Search Console. Google has worked pretty hard to keep this updated. It will tell you what errors you have so you can address them relatively easily.

Site Auditing Tool

A site auditing tool will automatically monitor your site weekly or monthly. Things break all the time. Particularly if you are not the only one who access to your site. The other thing is, the internet is never stagnant, you are always vulnerable.

Site Auditor does exactly what was just described. It's the quintessential tool for site auditing to ensure your SEO is kept at peak performance.

To learn more about the Raven tools to help you achieve ultimate SEO optimization, watch the full webinar here. 

Source: 6 Essential WordPress SEO Tips And Tricks To Rank Above The Competition