Google announced Thursday that Site Kit is available globally for WordPress users.
What is Site Kit. Site Kit is a WordPress plugin that allows users to set up and configure Google services to get insights in their WordPress dashboards.
Users can see stats from Google Search Console, Google Analytics, PageSpeed Insights, AdSense all in one place.
Because it’s a plugin, it doesn’t require source code editing. Site owners can also assign roles and grant individual permissions
The company released Site Kit in developer preview earlier this year and says thousands of developers have installed it.
What does the dashboard offer? There is a main dashboard, shown above that provides a high-level view of significant changes and how users are finding your site.
Individual page reports show how specific content is performing.
You can also do things like enable PageSpeed Insights and Analytics in order to “see whether page load time affects bounce rate.”
Why we should care. The ability to see all of the metrics about your site performance that are captured across these various Google products in one with Site Kit will give WordPress users an out-of-the-box dashboard experience without the headache of pulling data from these disparate sources.
You can download the Site Kit plugin from the WordPress directory.
About The Author
Ginny Marvin is Third Door Media’s Editor-in-Chief, managing day-to-day editorial operations across all of our publications. Ginny writes about paid online marketing topics including paid search, paid social, display and retargeting for Search Engine Land, Marketing Land and MarTech Today. With more than 15 years of marketing experience, she has held both in-house and agency management positions. She can be found on Twitter as @ginnymarvin.
So what are your site’s standout elements? Here are five:
Recipe ingredients (if your website is about cooking).
Your company’s operating hours.
It’s pretty obvious to you how important these elements are to your site.
But how can you make search engines understand that?
The answer is with schema markup and rich snippets.
What Are Schema Markup & Rich Snippets?
Rich snippets are the extra pieces of information that appear around your website’s link.
Schema markup is HTML code used to create rich snippets.
Take a look at this example.
Let’s say you want to buy a Darth Maul toy lightsaber.
You go on Google and type “Star Wars Darth Maul Lightsaber.”
The photo above shows you the results.
As you can see, you don’t only get links to the different websites selling the toy.
You also get a bunch of additional information to help you decide which link to click.
Amazon shows you star ratings and reviews.
Entertainment Earth includes the toy’s price, length, height, and weight.
Valuable pieces of information, right?
These are your rich snippets.
And if you add them to your site, you’ll naturally boost it higher on Google’s SERPs.
How Rich Snippets Boost Your SEO Ranking
Technically, rich snippets don’t directly affect your site’s ranking on Google’s SERPs.
However, they can still get you ranked higher on Google.
For instance, let’s say you want to bake a Black Forest cake for a loved one’s birthday.
You go on Google and type “Black Forest Cake Recipe.”
Here are the results you get:
As a busy cake-lover, which recipe would you most likely click? One that is rated 5 stars and takes 2 hours and 45 minutes to bake? Or one that is rated 4.9 stars and takes 3 hours and 45 minutes to bake?
Naturally, you’d choose the first option.
The star rating, votes, and description (all rich snippets) encourage you to go to livforcake.com for your recipe.
This is how your rich snippets increase your click-through rate.
And the higher your click-through rate, the more likely Google will notice you.
So how do you add rich snippets to your site?
The Top 5 Schema Plugins for WordPress
The great news is if you’re using WordPress, you don’t have to touch a single line of code.
Simply choose a schema plugin, and creating rich snippets will be easy.
Here are the top five marketers love.
1. Schema Pro
Schema Pro makes adding rich snippets to your site fast and easy.
In a matter of minutes, you can add your preferred configurations to all your pages and posts.
Schema Pro supports 13 useful schema types. These are:
Reviews (music, movies, products, books, etc.).
Recipes (you can create your own attractive schema rich card that’ll boost your click-through rate).
Software applications (add reviews and star ratings to give your applications a boost).
Products (give searchers detailed information on what you’re selling).
Articles (news, blogs, etc.).
Price: $79/month or $249/lifetime
2. All in One Schema Rich Snippets
All in One Schema Rich Snippets is one of the simplest plugins you can find for schema markup.
Although it’s simple, it provides you with snippets for reviews, ratings, events, articles, and software applications.
One great thing about this plugin is you can use it for free.
It doesn’t have a ton of fancy designs to select from, but it does have the basics you need for rich snippets on your site.
The downside of using this plugin is it doesn’t support automation.
You’ll have to add schema markup to each page of your site manually.
What’s interesting about All in One Schema Rich Snippets is it’s made by the same maker as Schema Pro.
In fact, its dashboard heavily advertises Schema Pro.
So how to choose between the two?
Use Schema Pro if you’re running a bigger online business.
The price will be worth it for the automation, unique designs, and schema markup support for local businesses.
If you’re just starting out and want to try something for free?
Go with All in One Schema Rich Snippets.
3. Schema and Structured Data for WP & AMP
Schema and Structured Data for WP & AMP supports 33 schema types.
Three unique ones include:
How To (list the steps in your how-to article to be featured in your rich snippets)
Q&A (if your article is in a question and answer format, you can feature the most relevant questions and answers in your rich snippets)
Audio object (add details about audio you upload like date of upload, length, etc. to your rich snippets)
The best part? If the schema type you’re looking for isn’t part of the 33 this plugin offers, you can request a customized type!
Here are other features this plugin offers:
Reviews pulled from over 75 sites.
Your own customized review rating boxes with schema markup.
Compatibility with other schema plugins like SEO Pressor and WP SEO Schema.
I was recently helping one of my team members diagnose a new prospective customer site to find some low hanging fruit to share with them.
When I checked their home page with our Chrome extension, I found a misplaced canonical tag. We added this type of detection a long time ago when I first encountered the issue.
What is a misplaced SEO tag, you might ask?
Most SEO tags like the title, meta description, canonical, etc. belong in the HTML HEAD. If they get placed in the HTML BODY, Google and other search engines will ignore them.
If you go to the Elements tab, you will find the SEO tags inside the <BODY> tag. But, these tags are supposed to be in the <HEAD>!
Why does something like this happen?
If we check the page using VIEW SOURCE, the canonical tag is placed correctly inside the HTML HEAD (line 56, while the <BODY> is in line 139.).
What is happening here?!
Is this an issue with Google Chrome?
The canonical is also placed in the BODY in Firefox.
We have the same issue with Internet Explorer.
Edge is no exception.
We have the same problem with other browsers.
HTML parsing vs. syntax highlighting
Why is the canonical placed correctly when we check VIEW SOURCE, but not when we check it in the Elements tab?
In order to understand this, I need to introduce a couple of developer concepts: lexical analysis and syntax analysis.
When we load a source page using VIEW SOURCE, the browser automatically color codes programming tokens (HTML tags, HTML comments, etc).
In order to do this, the browser performs basic lexical analysis to break the source page into HTML tokens.
This task is typically performed by a lexer. It is a simple, and low-level task.
All programming language compilers and interpreters use a lexer that can break source text into language tokens.
When we load the source page with the Elements tab, the browser not only does syntax highlighting, but it also builds a DOM tree.
In order to build a DOM tree, it is not enough to know HTML tags and comments from regular text, you also need to know when a tag opens and closes, and their place in the tree hierarchy.
This syntactic analysis requires a parser.
An English spellchecker needs to perform a similar, two-phased analysis of the written text. First, it needs to translate text into nouns, pronouns, adverbs, etc. Then, it needs to apply grammar rules to make sure the part of speech tags are in the right order.
But why are the SEO tags placed in the HTML body?
Parsing HTML from Python
I wrote a Python script to fetch and parse some example pages with errors, find the canonical anywhere in the HTML, and print the DOM path where it was found.
After parsing the same page that shows misplaced SEO tags in the HTML Body, I find them correctly placed in the HTML head.
What are we missing?
Invalid tags in the HTML head
Some HTML tags are only valid in the HTML BODY. For example, <DIV> and <SPAN> tags are invalid in the HTML head.
When I looked closely at the HTML HEAD in our example, I found a script with a hardcoded <SPAN>. This means, the script was meant to be placed in the <BODY>, but the user incorrectly placed it in the head.
Maybe the instructions were not clear, the vendor omitted this information or the user didn’t know how to do this in WordPress.
I tested by moving the script to the BODY but still faced the misplaced canonical issue.
After a bit of trial and error, I found another script that when I moved it to the BODY, the issue disappeared.
While the second script didn’t have any hardcoded invalid tags, it was likely writing one or more to the DOM.
In other words, it was doing it dynamically.
But, why would inserting invalid tags, cause the browser to push the rest of the HTML in the head to the body?
Web browser error tolerance
I created a few example HTML files with the problems I discussed and loaded them in Chrome to show you what happens.
In the first example, I commented out the opening BODY tag. This removes it.
Here you see that if a script writes an invalid tag in the HTML head, it will cause the browser to close it early as before. We have exactly the same problem!
We didn’t see the problem with our Python parser because lxml (the Python parsing library) doesn’t try to fix HTML errors.
Why do browsers do this?
Browsers need to render pages that our Python script doesn’t need to do. If they try to render before correcting mistakes, the pages would look completely broken.
The web is full of pages that would completely break if web browsers didn’t accommodate for errors.
This article from HTML5Rocks provides a fascinating look inside web browsers and helps explain the behavior we see in our examples.
“The HTML5 specification does define some of these requirements. (WebKit summarizes this nicely in the comment at the beginning of the HTML parser class.)
Unfortunately, we have to handle many HTML documents that are not well-formed, so the parser has to be tolerant about errors.
We have to take care of at least the following error conditions:
The element being added is explicitly forbidden inside some outer tag. In this case, we should close all tags up to the one which forbids the element, and add it afterward.
Please read the full article or at least make sure to read at least the section on “Browser’s Error Tolerance” to get a better context.
How to fix this
Fortunately, fixing this problem is actually very simple. We have two alternatives. A lazy one and a proper one.
The proper fix is to track down scripts that insert invalid HTML tags in the head and move them to the HTML body.
The lazy and quickest fix is to move all SEO tags (and other important tags) before any third party scripts. Preferably, right after the opening <HEAD> tag.
You can see how I do it here.
We still have the same invalid tag and script in the HTML head and the SEO tags are also in the head.
Is this a common problem?
I’ve been seeing this issue happening for many years now, and Patrick Stox has also reported seeing the same problem happening often to enterprise sites.
One of the biggest misconceptions about technical SEO is that you do it once and you are done. That would be the case if the sites didn’t change, users/developers didn’t make mistakes and/or Googlebot behavior didn’t change either.
At the moment that is hardly the case.
I’ve been advocating technical SEOs learn developer skills and I hope this case study illustrates the growing importance of this.
Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.
About The Author
Hamlet Batista is CEO and founder of RankSense, an agile SEO platform for online retailers and manufacturers. He holds U.S. patents on innovative SEO technologies, started doing SEO as a successful affiliate marketer back in 2002, and believes great SEO results should not take 6 months.