On June 1st, 2011, Google expanded the range and scope of their Plus One button. Instead of just limiting the +1 button to their organic search engine results pages, they now allow webmasters to place +1 buttons on their websites.
As we discussed in a recent blog post, the ramifications of this new initiative could prove to be significant for those interested in maximizing their traffic from Google.
In today’s post, we’ll cover step-by-step how to implement the +1 button on your individual website. I’ll also discuss how to avoid a potentially hazardous result associated with using Google default code. The simple workaround I’ll reveal also carries the benefit of allowing you to control which URL is being +1’d and registered in Google’s organic search results.
Again, if you’re not familiar with Google’s +1 button, please read our earlier post —Google’s Plus One Button – A New Form of Social Interaction — for a more in-depth explanation.
Now you know the basics of the button and what it does, let’s take a look at how to implement the +1 button on your website.
The code and process is very simple.
Place the code below in one of two places on your website theme or website:
1. Just above the closing </head> tag; or
2. Just above the closing </body> tag.
2. Just above the closing </body> tag.
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>
Next, place the following code where you want the +1 button to appear on your web pages:
<g:plusone></g:plusone>
That’s all the code you have to add and the entire process for displaying the button and making it functional. The above steps will work on any web page or website regardless of its format or theme.
But there are limitations and real security issues — important to both you and your customers — that need to be adjusted. The head JavaScript code is fine as-is and does not need any adjustment. The button display code, on the other hand, may create a significant issue. Luckily, the fix is easy.
To understand the limitations and security issues involved, we need to first understand how Google decides which page URL (web address) is being +1′d. Below are the three ways Google determines a Plus One button’s page URL, and the issues or limitations of each (later, I’ll show you the fix.)
How Does Google Find Your Page’s URL?
From an SEO standpoint, it’s important that Google is +1-ing the correct URL on your website. The problem is that the default Google +1 icon code does not have any URL or HREF reference. It also looks for a page’s URL in three different ways (in a specific order), but each can have a different result.
The 3 ways are as follows:
1. Google looks for a specific URL within the +1 button code.
The issue: By default, there is no reference to a specific URL in this code, so Google will not know which page to +1. It will continue to look for the page URL, which unfortunately, can lead to problems that are both inaccurate and insecure.
Google will automatically go to its second way of determining a page URL.
2. Google will look for the page’s canonical link. This is a line of code in the <head> section of your pages.
The issue: The head code often contains a website’s homepage URL and not the actual page being visited, so the page being +1′d is not the page you want to be recorded. In short, this way of finding the correct URL to +1 is not always accurate.
Here’s a typical canonical link reference:
Notice in the above code that the link is http://www.example.com — which is not the article page or the blog post page. Instead, it’s the home page. So in effect, the plus one is for the wrong page.
The other issue is that some web pages do not have the <link rel=”canonical” href=”http://www.example.com” /> code at all.
This means Google will revert to its third way of finding a page’s URL — the web browser’s address bar. And this is a major problem.
3. Google will use the web browser’s address bar location.
The issue: The page in the URL may not be correct. It may contain session ID’s that expire and aren’t actually part of the page’s URL. It could even contain form information. Imagine your customers name or password being sent to Google’s search engine via a +1 click.Additionally, the URL could contain affiliate ID’s or any one of a number of other variables that are passed via a page’s URL structure.
It may not be apparent at first, but this is all quite dangerous. The image below provides an example of the information that might be added to a browser’s address bar (note: this is not a real URL).
Notice there is a Username ID (“u”), session ID (“session”), and Password ID (“p”) all located in the web address bar.
This is really an issue with webmasters or page designers who don’t understand how the button works and are implementing it incorrectly. And this is why it’s critically important that you do understand what’s going on behind the scenes so you can implement your buttons correctly.
If someone asks you to +1 an article but they have usernames, sensitive data, or form variables in the URL, it might look like the example above. This is extremely insecure, and if someone allows Google to use the web page URL address bar as the URL for the Plus One button, serious issues could arise.
So here’s an important warning for all web users: Always check the page URL before you Plus One it!
What does all this mean?
We need to take control. We need to tell Google what URL we want to be used with the +1 process.
Fixing These Limitations
To add a specific URL to the code, all you need to do is add the page’s URL between the <g:plusone> tag and the </g:plusone> tag like this:
<g:plusone href=”http://www.YOURSITE.com/SpecificPage.html”></g:plusone>
That’s it — the complete solution (that wasn’t so bad, was it 
)!
)!There are two ways to adjust the code to look like the image above: manually or automatically. But before I go into the process, there’s one more reason you want to add the URL to the button code and not let Google decide it for you arbitrarily.
If you have an archive page or list of articles on a particular page and you want to add a +1 button to each of the listed pages or posts, you will need to tell Google which URL is to be attached to each button.
Consider a page that looks like this:
You will need to have the URL for each article attached to the correct button. Button A needs to be attached to the URL of the post covering the “Promotional Giveaways” and button B needs to be attached to the URL for the “Advanced Searches” article.
Adding the URL Manually
You can manually code the URL into each button individually. The code would look like this:
Notice I have manually placed each article’s URL into the Google Plus One code. Now if the first article’s +1 button is selected, the URL for the “Promotional Giveaways” will be the URL Google will see as being “voted” on, and if the second button is selected, the article about using “Advanced Searches” will be +1′d.
Adding the URL Automatically to a WordPress Theme
WordPress records the URL of a page or post via a piece of code that is associated with your permalink structure. The URL code within WordPress looks like this:
<?php the_permalink() ?>
In order to have every button match a specific article or post within the WordPress loop structure — even if there are several posts displayed on a single page — you need to place the permalink URL structure into the Google button code like this:
<g:plusone href=”<?php the_permalink() ?>” </g:plusone>
When placed next to a post on the archives or index page, the code above displays like this:
The beauty of the code is that WordPress will automatically change the +1 button URL to the correct permalink or page URL for every post.
What to see it in action? Check out the archives page of our blog for this month. Notice the number of buttons on the page, and that each button goes to a different URL (feel free to plus one any of our posts).
We’ve posted a button that displays on each post in the archives, or on the left hand side of the individual posts. See the image below:
Okay, that’s all the tough stuff. Once you understand that you need to specify the URL that you want +1′d, you’ll be in great shape.
Button Style
Google provides different button sizes and styles. You can display the button as a Small button with or without a count, Medium button with or without a count, Standard button with or without a count, or finally, a Tall button that displays the count above the actual +1 icon (which is what we’re using).
For a full list of sizes and options, refer to Google’s Webmaster documentation page:
http://code.google.com/apis/+1button/
http://code.google.com/apis/+1button/
Can People Abuse the +1 Button?
There are some legitimate fears and concerns I’d like to address before closing.
All my hard with SEO is going to be undermined by black hat website owners who manipulate the system.
Google isn’t doing away with SEO — they still recognize your hard work and will still take all of that work into consideration. The Plus One button is just one of many additional factors that fit into the algorithm that Google uses. Picture it as a puzzle. Adding one piece does not eliminate the need for all the rest of the pieces. Solid SEO work will always produce benefits.
Illegitimate website owners will hire a bunch of people to Plus One pages and gain an unfair advantage over those of us who aren’t doing that.
The first time you click on the button, it registers a +1. The second time (in a row) that you click the button, it removes or reduces the count. This means multiple clicks will result in the button being a plus one count or a zero count (no vote has been registered). This greatly reduces the chance that one person at one IP address can just click their own button for an entire day to increase the votes Google is recording.
Additionally, Google is tracking the number of clicks being made from an IP in a short period of time. If they suspect that some kind of automated software running, Google stops the +1 vote from being recorded and displays a CAPTCHA form which must be filled out to continue.
When the +1 button first came out, people reported clicking the +1 button on all of their pages. To their surprise (and ours, too), Google stopped the process and put up a CAPTCHA page. This means that regardless of the web page URL, if you do too many +1′s in a short time, Google sees it as an automated process and blocks the actions.
Personally, when we discovered these safeguards, it made us feel better. It took the worry out of the +1 button being used in some strong black hat fashion to unduly influence the organic search results. Enjoy the +1 (Plus One) tool, implement it often, and be sure to check back with us for new developments regarding Google’s +1 tool and other Internet marketing developments.
No comments:
Post a Comment