Search Verticals

The Advanced
Guide to SEO

Chapter 09

By Neil Patel
and
Sujan Patel

If you operate in a search vertical, you're in a unique place to capitalize on some great traffic. These areas are not as often talked about in SEO, but you can capture some high converting targeted traffic in these areas.

We're going to cover local, mobile, slideshows, youtube and more.

Mobile Friendly Sites — CSS

Many options are available for displaying a unique layout for mobile users. Yet there remains the issue of duplicate content when using, essentially, duplicate pages, such as an ‘m' subdomain.

We're going to walk through a method using dynamic CSS that eliminates any duplicate content issues and provides a better mobile experience. There are two steps;

  1. Detecting the User-Agent
  2. Serving the Correct CSS File

Note: this method can be used for WordPress or any other PHP based CMS.

Create Code To Detect The User Agent

  1. You're going to start out with this line of code, which normally appears in the header.

    <link rel="stylesheet" type="text/css" media="all" href="" />

    Note that the ‘href' portion is empty. This is where we're going to add a bit of PHP.

  2. Here's the PHP;

    <?php
    if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', 
    strtolower($_SERVER['HTTP_USER_AGENT']))) {
    echo "**LINK TO MOBILE CSS FILE**";
    }
    else {
    echo "**LINK TO NON MOBILE CSS FILE**";
    }
    ?>

    This PHP code is a basic if/then - if it detects a mobile browser it will serve the mobile CSS file (which we'll create in the next step). if not ("else") it will serve the normal CSS file.

  3. Put it together - and you get;

    <link rel="stylesheet" type="text/css" media="all" href="<?php
    if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', 
    strtolower($_SERVER['HTTP_USER_AGENT']))) {
    echo "**LINK TO MOBILE CSS FILE**";
    }
    else {
    echo "**LINK TO NON MOBILE CSS FILE**";
    }
    ?>" />

    Copy and paste the above code into your header.php file (or similar location depending on CMS).

    Be sure to replace "LINK TO … FILE" with your actual absolute file path

Create a Unique Mobile CSS File

You have two main options for this.

Option 1
Create an entirely new CSS file. This will depend on how complex your site is and how savvy you are with CSS. You'll have to start from scratch identifying all the class and id elements, which is why I don't recommend this approach.
Option 2
(Best Option) Copy your existing CSS file and alter it to make it work for a mobile experience. This often means a few fundamental things, such as;
  • Some Basic Resets

    html, body {
    	background: #fff;
    	padding: 3px;
    	color: #000;
    	margin: 0;
    }
  • Remove Floats (Display Items In a Single Column)

    * {
    	float: none;
    }
  • You Can Hide The Footer or Sidebar

    #sidebar, #footer {
    	display: none;
    }
  • You Can Normalize Your Headers

    h1, h2, h3, h4, h5, h6 {
    	font-weight: normal;
    }
  • Control The Image Size

    #content img {
    	max-width: 250px;
    }
  • Keep Everything In The Center

    .center {
    	width: 100% !important;
    	text-align: center;
    }
  • Format the Links for Mobile

    a:link, a:visited {
    	text-decoration: underline;
    	color: #0000CC;
    }
    
    a:hover, a:active {
    	text-decoration: underline;
    	color: #660066;
    }
  • You Can Add A Few iPhone Specific Styles

    @media only screen and (max-device-width: 480px) {
    	html {
    		-webkit-text-size-adjust: none;
    	}
    }

Optimizing Online Slideshows

Slides are still an underutilized vertical of content on the net. Tons of people are optimizing for videos, images, news and blog comments. But the fact is, slideshare pages are ranking well in some competitive markets.

Just check out Rand's slideshow showing up 7th on the search "marketing for startups".

Optimizing Online Slideshows #1

There's several things you can do to rank well for slideshows — generate visits to your slideshow content, and possibly some referral traffic to your site.

  1. Pick Your Target Keyword(s)

    In this case, Rand chose;

    • [marketing for startups]
    • [inbound marketing for startups]
  2. Optimize Your Title, URL & On-Page Elements

    When you first upload your slides, the title field becomes the <title> tag and the URL. Be sure to get your target keywords in there.

    Optimizing Online Slideshows #2

    Rand's title is unique but still has the keywords "inbound marketing for startups"

    Optimizing Online Slideshows #3

    You can see it ends up in the title and URL - and the length is ideal.

    Optimizing Online Slideshows #4
  3. Make Your Slide Links Clickable

    Include links in the bottom of your slides. They supposedly do not carry any SEO value, but can drive huge referral traffic.

    Optimizing Online Slideshows #5
  4. Embed the Slideshow On Your Website

    Here you can see that Rand has also embedded the slideshow into SEOmoz's blog.

    Optimizing Online Slideshows #6
  5. Get Your Presentation On The Homepage

    Slideshare will put your presentation on their homepage if it gets a good amount of shares and views in the first day. You'll get lots more views and referral traffic from this.

    • Do not upload your slides until you are ready to share them
    • Immediately when you post your slides - share them across your social channels and ask others to share them as well.
    • Use bitly.com to make an easily shareable link.
  6. Optimize Your Profile

    Your slideshare profile allows you to add a link. This is not a followed link, but if anything, still provides referral traffic value.

    Optimizing Online Slideshows #7
  7. [Bonus] Try These Other Presentation Sites!

    There's lots more sites besides slideshare. Such as;

    They are not as used but sometimes this will allow you to stand out more.

Drive Traffic To Your Site With YouTube

Warning: Some of the tips in this section stretch a little beyond "white-hat". Please use your own measure of risk tolerance and judgment. I am simply telling you some technical facts and while I don't always advocate their use, it's important for you to know the options.

Let's talk YouTube — how to get tons of eyes on your videos which will then send you referral traffic.

Also, you may be tempted to use less than awesome content to get your accounts filled with videos. It's always better in the long run to use the highest quality content possible.

I'll call these "parts" because you can do these in many orders.

Make several accounts

Let's say you're in the home improvement industry. Your company is "Quality Hardware"

You'll want a brand page

  • /qualityhardware

And some other accounts that look like people.

  • /diyguy
  • /homerepairman
  • /toolshandyman
  • /hammersandnails

Keep them all in a spreadsheet so you can keep track of the accounts and your progress.

Make 3-4 Videos

Make 3-4 videos that present the main point of the website you're trying to promote.

Keep them high quality and short. 1-3 minutes is best.

Alter the Videos Slightly (1 for each account)

Next - you're going to be posting the same video across several accounts. So you'll want to alter them slightly so YouTube's auto detection doesn't pick them up as being the same and flag your account. You can alter them in several ways;

  • change the music
  • change the background color
  • slightly change the timing (this way you'll also get a different preview image)
  • change the color of any captions you may have

Upload

When you're ready, upload the slightly different videos across all accounts. Only use the same video on up to 3 accounts.

So if you have seven accounts and 4 videos, spread them across the seven accounts.

Use an optimized title, description and tags — target your keywords with best practice optimization.

Consider a tasteful clickable link also overlaid onto the video itself.
Transcribe your video (YouTube's auto-transcription is usually pretty bad — make your own and upload it)

To Upload A Transcription

  1. See if one exists already

    1. Sign into your YouTube account
    2. Go to your video
    3. Go to ‘Captions'
    Drive Traffic To Your Site With YouTube #1
  2. See if one exists already

    You will see it broken up frame by frame — most of the time the auto-transcription is terrible (even funny).

    Click Download, as shown below.

    Drive Traffic To Your Site With YouTube #2
  3. Edit it and upload a new transcription file

    Drive Traffic To Your Site With YouTube #3

Include Your Referral Link

When including your referral link, it goes in the description. Follow the following guidelines;

  1. Put it first. Otherwise it will get buried and the user may not see it.
  2. Include the full ‘http://' - this way it becomes clickable and active nofollow link.
  3. Use the Google URL Builder http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55578 to track the success of each link more specifically.
  4. If linking to a deeper page within your site, use best practice URL construction and have keywords and descriptive words in the URL.

Increase View Count Early

I will always advocate organic and natural marketing. I do not promote the actual use of the following websites. But they exist, and the choice is yours.

These free services will help you increase view-count quickly, which is an important factor in YouTube ranking.

You of course should exercise all natural and long-term methods of getting eyes on your videos before falling back to less than honest options.

Other YouTube Ranking Factors

  • Favorites
  • Commenting
  • Sharing
  • Thumbs Up
  • Subscribers
  • External Links to Your Page/Videos

Bonus Tips for optimizing your videos:

The following takes a little more effort up front, but can also work to optimize your YouTube video to get views quickly.

  1. Find another video similar to yours that has a high number of views and ranks well.
  2. Use their title, description & tags and alter them slightly to fit your video.
  3. Post your video
  4. THEN get people to comment on your video and the one you used for the draft of your title and description. YouTube will see a connection in content and hopefully value: it will associate the highly viewed video with your new video and rank it higher.

Also, if you embed a video on your website — do not let it autoplay. Not only do users find this annoying, but NONE of the views from the embedded version will count towards total view count.

Local Search Techniques

While many local SEO guides give you the usual tips, like keeping a consistent NAP across listings, or increasing the number of citations you receive — we're going to assume you're familiar with the basics.

  1. WHOIS Info - Make sure it matches your NAP

    Look up your whois info with http://whois.domaintools.com/

  2. When you register your local listings, register from the actual place of the business.

  3. Upload or correct your listings with GPS data services. There are a few of these that I know of.

    Here's how you'll start that process for each site

    • Navteq

      1. First, check to see if the listing you want to add already exists. I'm using this pizza place in Seattle as an example.

        Local Search Techniques #1
      2. Then you can either add a new listing or edit the existing one

      3. Fill out the info

        Local Search Techniques #2
    • Teleatlas

      Its a very similar process for teleatlas

      Local Search Techniques #3
  4. Use the microformat hCard to display contact information

    hCards are most commonly used to display information semantically about people and organizations.

    http://microformats.org/wiki/hcard

    If we were to make an hCard for the pizza place in Seattle it would look something like this:

    <div class="vcard">
     <a class="fn org url" http://www.piecoras.com/">Piecoras</a>
     <div class="adr">
       <span class="type">Work</span>:
       <div class="street-address">1401 East Madison Street</div>
       <span class="locality">Seattle</span>,  
       <abbr class="region" title="Washington">WA</abbr>  
       <span class="postal-code">98101</span>
       <div class="country-name">USA</div>
     </div>
     <div class="tel">
      <span class="type">Work</span> +206-322-9411
     </div>
     <div>Email:
      <span class="email">info@piecoras.com</span>
     </div>
    </div>

    You can use that as a basic template to create your own hCard.

Installing the Facebook Open Graph

Remember, this is an in depth technical guide. Most websites do not fully integrate the Facebook like button into their website. We're going to get very in depth and walk through the complete installation of the like button, which includes creating a basic app account as well as installing the open graph meta tags.

For the sake of this guide, we're going to assume you understand the benefits of a complete integration of the like button within your website. For a full explanation from Facebook, you can read their documentation http://developers.facebook.com/docs/reference/plugins/like/

This process is broken into six steps;

  1. Create a Facebook App ID
  2. Get the Like Button Code
  3. Get the Open Graph Tags
  4. Integrate the Like Button Codev
  5. Integrate the Open Graph Code
  6. Check Installation With the Debugger

Please note for this entire section, you need to be logged into Facebook. :-)

Create A Facebook App ID

Go to the apps for Facebook page and click "create a new app".

Here, you're going to fill in some basic information to create your app. We're only doing this to get an App ID #.

Installing the Facebook Open Graph #2

You can fill in your website name for the App name. Click continue

Installing the Facebook Open Graph #3

On the next screen, you're going to see your App ID #. Save this in your text editor for later.

We can now complete the rest of the process of creating the App. As mentioned, this was only to get your App ID, but we need to finish filling out the form.

Installing the Facebook Open Graph #4

You can add an icon.

Installing the Facebook Open Graph #5

Then complete the form where shows and save changes. You're done with the App step, and ready to get your like button code!

Get The Like Button Code

The forms for the like button and open graph can be found here;

http://developers.facebook.com/docs/reference/plugins/like/

The first thing we're going to do is get the code for the like button, which is extremely simple.

Installing the Facebook Open Graph #6

You'll want to leave "URL to Like" blank (because we're going to allow Facebook to fill this dynamically from whatever page the button is on). The other options are simply design and function choices: button size, showing faces, etc. Choose what you'd like!

When you're doing, go ahead and get you're code!

Installing the Facebook Open Graph #7

Once you click "get code" the following window is going to pop up.

Installing the Facebook Open Graph #8

Because (at the time I'm writing this) WordPress is not fully HTML5 compliant, you'll want to select XFBML format. Most of you are probably using WordPress, and that's currently the best way to go.

Be sure to select the correct App ID from the dropdown menu. (The one you created in the prior step).

All we're doing here is copying and pasting all three sections of the code and saving them in your text editor (along with your App ID) for later.

Installing the Facebook Open Graph #9

You should now also double check that your App ID's match.

We've got our code saved, time to get the Open Graph tags!

Get The Open Graph Tags

Installing the Facebook Open Graph #10

The Open Graph Tags are going to go in the header of your website. Remember, we're going to be on the same page as we just were (scroll down) to get your open graph code.

http://developers.facebook.com/docs/reference/plugins/like/

There's only three fields to complete here. The rest we're going to leave blank (just as before, they'll get filled in later dynamically).

Select the type of your website from the dropdown. Enter your site name.

And remember the App ID from earlier? You're going to copy and paste that into "Admin".

Installing the Facebook Open Graph #11 Installing the Facebook Open Graph #12

Integrate The Like Button Code

Again, I'm assuming most of us are using WordPress. We need to put that first big chunk of code just below the opening <body> tag. For most of us in WordPress, this is going to happen in the Editor > header.php file

So first go to Appearance > editor

Installing the Facebook Open Graph #13

From here, you'll need to navigate to the header.php file.

Installing the Facebook Open Graph #14

Locate the opening <body> tag.

Installing the Facebook Open Graph #15

And copy the first chunk of code and paste it just below the <body> tag.

Installing the Facebook Open Graph #16

Next, we're going to paste the second bit of code in the <html> tag. Facebook's documentation says this is to enable compatibility in some versions of Internet Explorer.

Installing the Facebook Open Graph #17

The third and final piece code is the actual like button itself. Everything else so far has been additional code that helps the like button out.

On QuickSprout, I have my like button in the right-hand sidebar.

Installing the Facebook Open Graph #18

For most of you, this is going to mean having it in a widget in WordPress. So we're going to navigate to Appearance > Widgets.

Installing the Facebook Open Graph #19

Depending upon your theme, you're likely going to have a sidebar called "right sidebar" or "post sidebar" or "pages sidebar". Basically, you'll want to follow these steps for every widget needed to place the button on the pages desired. For some of you, this will be just one sidebar spot, while for others, it may be 2 or 3.

Drag and drop the "Text" box from "available widgets". The text box allows you to insert or write anything with HTML etc into it. Its a great all purpose widget, and perfect for our like button code.

You can fill in a title, which will give the text area a heading if you'd like.

Installing the Facebook Open Graph #20

You're going to take the third portion of the like button code, and copy and paste it into the "Text" widget.

Installing the Facebook Open Graph #21

You can of course place other elements in the text box if you'd like — Tweet buttons, Pinterest etc

Integrate The Open Graph Code

The last step is the most technical. But you've made it this far, so don't give up! The benefit you will receive from having a complete Open Graph installation is very worth it!

Since we'll be integrating a little PHP, let's first move the open graph code to a new file and rename it with a .php file extension. We won't be using this file, but this way we'll be able to see the code better, as your text editor should color it to match the syntax.

Don't get scared! We're mainly just going to be cutting and pasting to complete your open graph tags, which will then get placed in the WordPress header.php file.

Here's what the code looks like in a .php file.

Installing the Facebook Open Graph #22
  1. Get your theme's title tag code.

    We're going to make your open graph title the same as your title tag. This makes sense right? We're controlling the way our page gets displayed around the web when the like button is used.

    this is the header.php file of a WordPress theme. Copy whatever is between <title> and </title> in your theme.

    Installing the Facebook Open Graph #23

    Go to your theme's header.php file again (under Appearance -> editor) and located the <title> tag. Copy whatever is in between the title tags onto your clipboard. It doesn't matter what the exact code is. Assuming the title is working correctly on your website, this code may be slightly different for everyone's theme or SEO plugins. What matters is you copy it exactly.

    There IS one instance where the code is quite predictable, and that is if you're using SEO for WordPress by Yoast. With Yoast's wonderful plugin, your title tag code should always be;

    <?php wp_title(‘ ‘); ?>

    Paste your title tag code in between the quotes of your title property in the open graph tags, like this;

    Installing the Facebook Open Graph #24

    This is the Yoast title tag code pasted into the title property of the open graph tag.

  2. Next, we have to fill in the URL property. We're going to dynamically insert the URL of the current page into this field.

    For this, we're going to use this little code snippet;

    <?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>

    Installing the Facebook Open Graph #25

    Cut and paste that code straight into the URL property of the open graph tags.

  3. Next, even though Facebook tells you not to leave the image field blank, we're going to do so. Why? Because the person sharing your content will (in most cases) be given the option to choose the image they would prefer to display.

    Installing the Facebook Open Graph #26
  4. Fill in your site name.

  5. Remember that App ID again? Yup, you're going to paste it into the "app_id" field.

    Installing the Facebook Open Graph #27

    With that, your facebook open graph tags are ready to go!

  6. Paste the entire open graph code into the <head> of your website.

    Again, we're to go to header.php (Appearance > editor). You're going to paste these just below your other meta tags (meta description etc) in the <head> area of the code.

    Installing the Facebook Open Graph #28

    Congrats! You're done on what's likely to be the trickiest step!
    Onto the debugging!

Test and Debug Your Open Graph Installation

While this last step isn't required, it's there as a tool in case you feel like testing your installation. I recommend also "viewing source" on your site, and have a look at the open graph code to see if everything looks right by eye.

To get to the debugger, you go to:

http://developers.facebook.com/tools/debug

Simply enter the URL of the page you would like to debug and run it.

Installing the Facebook Open Graph #29

Create Click To Tweets

Imagine you have a document that's a list of quotes or short ideas. Would it be cool to allow readers to tweet an exact quote at the click of a button? You can use a little tool called http://clicktotweet.com/

Have Your Content Ready

Any list of short items works great. For example, I have a post of 100 Ways To Become a Twitter Power User - http://www.quicksprout.com/2012/01/30/100-ways-to-become-a-twitter-power-user/

In it, there is a list of twitter facts;

  • Seventy-two percent of power users publish a blog post once a month.
  • Seventy percent comment on other blogs.
  • Sixty-one percent write at least one product review a month.
  • Sixty-one percent will leave comments on news sites.
  • Power users are six times more likely to guest post.
  • Five times more likely to run a blog.
  • Seven times more likely to post to Wikis.

Let's turn these into easily tweetable tweets! I suggest you have your content ready to go, so we can try it together.

Use Click To Tweet To Create Your Link

  1. Construct Your Tweet

    • Quote
    • Link
    • Author

    In this case we'd want to use:

    Quote
    "Seventy-two percent of power users publish a blog post once a month."
    Link
    http://bit.ly/JlMcWi <--bitly link
    Author
    via @neilpatel

    And we get:

    "Seventy-two percent of power users publish a blog post once a month."
    http://bit.ly/JlMcWi via @neilpatel

    Create Click To Tweets #1
  2. Plug that into Click To Tweet

  3. Click Generate

    Create Click To Tweets #2

Add Your Links In the Content

All you need to do is add a hyperlink after each quote, like this;

<li>Seventy-two percent of power users publish a blog post once a month.</li>
<a href="http://clicktotweet.com/tL79h">Tweet this fact!</a>

You can also make the quote itself tweetable, depending on how you want to display it, like this;

<li><a href="http://clicktotweet.com/tL79h">Seventy-two percent of 
power users publish a blog post once a month.</a></li>

Click to tweet this fact!

Do this for each quote or fact!

Detecting if Users Are Logged Into Social Networks

The following code will allow you to detect if users are logged into Twitter, Google Plus or Google, directly in your website. For facebook you can do this via API, but for these other networks you need a special workaround.

It will then allow you to display content differently depending on which social network they are logged into. The choice is up to you!

I would simply advise to keep users privacy in mind and not do anything that might cause them concern. I would also note that this code is dependent upon third party sources and it could break at any time. This might seem similar to other methods that have been around for a while, but I've worked out my own version if it for you.

Add Code To Header

For this example, we're just going to set up an html document with our text editor. This will show you the functionality, and then you may use in any specific situation you wish.

Put this in the <head> section.

Detecting if Users Are Logged Into Social Networks #1

Note: If you're using WordPress you can paste this into the header.php file

Let's look at the code piece by piece:

This simply calls a basic stylesheet

<link rel="stylesheet" href="styles.css">

This calls the Twitter and Google API's

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>	
<script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=1.1'></script>

This adds JavaScript function to display if logged in or not.

<script type="text/javascript">	

	function show_login_status(network, status)
	{
		if (status)
		{
			$("#" + network + "Status").html("Currently logged into 
			<span class='red'>" + network + "</span>");
		}else{
			$("#" + network + "Status").html("Not currently logged into 
			<span class='green'>" + network + "</span>");
		}
	}
	
</script>

Let's add some <body> stuff next!

HTML To Display If Logged In Or Not

This goes in the HTML

Detecting if Users Are Logged Into Social Networks #2

The portion shown in red is the important part. It is the id's and classes which display if the user is logged in or not.

Here is the code;

<div class="container">
	<section>
		<div class="row">
		
			<div class="page-header">
				<h1>Detecting Social Networks Logged Into</h1>
			</div>
				
			<p>You can see below it is detecting if I am logged 
			into Twitter, Google or Google Plus.</p>
			
			<div id="TwitterStatus" class="outputStatus"></div>
			<div id="GoogleStatus" class="outputStatus"></div>
			<div id="GooglePlusStatus" class="outputStatus"></div>		
				
		</div>
	</section>
</div>

We just have one more part to add!

Add Your Links In the Content

Put this below the HTML somewhere.

This part is a bit of a trick, which gets Google and Twitter to say if you're logged in or not.

Detecting if Users Are Logged Into Social Networks #3

Here is the code;

<img style="display:none;" onload="show_login_status('Google', true)"
onerror="show_login_status('Google', false)" src="https://accounts.google.com/CheckCookie?continue=https://www.google.com/intl/en/http://www.quicksprout.com/wp-content/themes/quicksprout/seo-guide/images/logos/accounts_logo.png" />

<img style="display:none;" onload="show_login_status('GooglePlus', true)"
onerror="show_login_status('GooglePlus', false)" src="https://plus.google.com/up/?continue=https://www.google.com/intl/en/images logos/accounts_logo.png&type=st&gpsrc=ogpy0" />

<img style="display:none;" src="https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif" onload="show_login_status('Twitter', true)" onerror="show_login_status('Twitter', false)" />

This code works by calling for an image (but not actually displaying that image). If the user is logged in, it returns ‘true'. If not logged in, it returns ‘false'.

Here is the final output!

Detecting if Users Are Logged Into Social Networks #4

Installing Google Plus Badges

Next, we're going to walk through the steps on how to install a Google Plus Badge into your site. This is the badge which will link to your personal Google Plus page.

Find Your Google Profile ID

Navigate to your Google Plus profile page — http://plus.google.com/ and log in. In the URL you will find your profile ID. For example, my page is;

Installing Google Plus Badges #1

And that long string of numbers is my ID.

Get yours and save it for later.

Go To the Badge Profile Config Tool

Go here https://developers.google.com/+/plugins/badge/personal-config

Most people will probably try to go here https://developers.google.com/+/plugins/badge/ to the Google Badge page, but it might confuse you more then help you.

This is why I recommend heading straight to the Profile Config Tool here https://developers.google.com/+/plugins/badge/personal-config

On this page, you can easily generate everything you need to add the Google Plus Badge to your site.

Enter Your Profile ID and Get The Code

Remember your profile ID we found a few minutes ago? That's what you should paste into the box as shown here;

Installing Google Plus Badges #2

Make sure you see the check mark and "looks good" next to the ID.

Select "badge" and your language.

Advanced Options

Google does not make this apparent, but you actually have some different display options.

  • Option A - Display Your Name

    I found that playing with the width, 260 looked the best, as it was the smallest size I could make the badge and have it keep my name.

    Installing Google Plus Badges #3
  • Option B - Display Two Badges Side By Side

    This should work for everyone. 170 is the best width to maintain the two badges with minimal extra whitespace around them.

    Installing Google Plus Badges #4
  • Option C - The Two Badges Stacked

    100 pixels wide is the minimum allowed size, and also gives you the best layout of the two badges stacked with minimal whitespace.

    No matter the size you choose, you will see that it has automatically generated some code for you below;

    Installing Google Plus Badges #5 Installing Google Plus Badges #6

There are two pieces to this code;

  1. The javascript which goes in the <head> of every page (assuming the badge is on every page).
  2. The actual button code, which goes in the <body> of the HTML wherever you want the button to appear.

Let's add them!

Again (as we've done many times in the document!) navigate to appearance->editor in WordPress and then find your header.php file.

Add the Code To Your Site

Paste the first part of the code into the <head>

Installing Google Plus Badges #7

Preferably, you should paste this near the other JavaScript code.

Paste the second piece of the code wherever you want your button to appear. In the case of QuickSprout, if I were place the Google Plus badge on my account, it would likely go here;

Installing Google Plus Badges #8

I know that I have this area being managed with my widgets, so I would go to the widgets within WordPress to add the code. Here's how you do it.

Navigate to appearance > widgets

Installing Google Plus Badges #9

Either use an existing text widget or create a new one, depending upon where you need to place the button.

Paste the code within your text widget;

Installing Google Plus Badges #10

Note: you can always adjust the size in this step too, if you paste it in and it doesn't quite look right on your site.

Conclusion

Congratulations if you've made it to the end and been able to implement the techniques in this guide! SEO can sometimes be hard work but very rewarding. If you've done most of the things in this guide, on top of creating exceptional content and interacting on social networks, you've been working really hard, but it will all pay off!

Well done! You made it through
The Advanced Guide to SEO!