SEO Training

Twitter Tweet Button Slows down Wordpress index pages

Since adding posting about how to install the official Twitter Tweet button yesterday I have noticed an unfortunate side effect.  The button slows down the load time of wordpress sites significantly.

Originally I had placed the button at the top and bottom of each post on the index page.  I have since removed the twitter button from the bottom of the posts.

Why has the Twitter tweet button slowed down my site?

We have all experienced trying to log on to Twitter only to be met with a message that Twitter is over capacity – please try again later.  Well this is what happens…

For each instance of the button on a page the little bit of javascript makes a call to Twitter.  If Twitter is running slow then the query will take longer and it will slow down the page load speed on your site.  If you have 10 articles on a page, and a tweet button at the top and bottom of each article, then that is 20 calls to twitter.  If they slow to half a second then load time will be slowed by 10 seconds!

It’s not just the Twitter Tweet button, The Facebook share button has the same problem.

Maybe, like me you have the facebook share button installed on your wordpress site too.  The same thing applies.  The facebook share button has a far smaller effect though, load times are not effected as much.

Google Adsense Isn’t helping matters either!

Want to really slow down your site?  Add in Google adsense too!  Each of the Twitter button, the Facebook button and Google adsense, all make calls to external sites.  This leaves you at the mercy of their response times.

Should I remove the Twitter Tweet button from my index page?

I am leaving the Twitter button for now.  I may well remove it from the index page in the future.  It all depends on whether more people installing it (which will be millions of users) slows it down even more, or if Twitter address the problem somehow.  I could always go back to Tweetmeme, which seems to have these issues under much better control. Interestingly Tweetmeme are working with Twitter on the button.

Will the Twitter Tweet button affect my SEO?

Google has intimated that they will be taking page load speeds into more consideration.  It stands to reason then that there is a possibility that installing the Twitter Tweet button could have a negative effect on your sites Google rank if the current load speed problems persist.  I for one will be monitoring it closely.

Page load speed not the only problem.

Page load speed has not been the only problem to affect the Twitter Tweet button.  Several major sites removed the button yesterday after discovering that firefox users were getting a pop up that rendered the site inaccessible.  Twitter have since stated that this problem has been recified.

Look!  The official Twitter tweet button is here!  Get the official Twitter Tweet Code.  Ah, but it’s not quite so straight forward for a Wordpress site.

Twitter Tweet Button code generator makes life easy... but modification is required for Wordpress sites.

Adding the official button to Wordpress (like on this site) takes a little more.  The code you get from using the Twitter generator I linked to above looks like this:

<a href="http://twitter.com/share" data-count="vertical"
data-via="SEOHolistically">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>

That works perfectly well for static pages.  But the index page of a Wordpress blog contains more than one blog post.  Inserting the above code into your index page will only tweet the title of your index page and that url.  We need to make some adjustments to the code….

<a href="http://twitter.com/share" data-count="vertical"
data-via="SEOHolistically"
data-related="copyblogger"
data-url="<?php the_permalink(); ?>"
data-text="<?php the_title(); ?>">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>

Lets take a look at these changes.

1. data-via=”SEOholistically” was generated by the generator at stage two “Recommend People to Follow (optional).  It will add in “via @SEOholistically” at the end of the tweet message, so don’t forget to change it to your own twitter account (not that I would mind if you didn’t).
2. data-related=”copyblogger” I have just added in.  It would be generated automatically if I had filled in the second field of the “Recommend People to Follow (optional)” section.  Coppyblogger is nothing to do with me… but you should follow them anyway… good advice! Again, unless you want coppyblogger to be offered as a follow suggestion to everybody who uses the button, change it!
3. data-url=”<?php the_permalink(); ?>” This is where we get into Wordpress specific stuff. This tells twitter to take the url as being the individual blog post url rather than the page url.
4. data-text=”<?php the_title(); ?>” This tells twitter to make the Wordpress post title the content of the twitter post.

That is all there is to the code for the twitter tweet button if you are adding it to a Wordpress blog.

So where do you put the Twitter code in Wordpress?

You should add it to index.php and single.php. In this blog it looks like this (facebook button code removed for simplicity)

Single.php

<div class="entry">
 <!--Twitter Tweet button-->
 <div style='width:100%;'>
  <a href="http://twitter.com/share" data-count="horizontal" data-via="SEOHolistically"
  data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </div><!-- end width - 100% -->
 <!-- end tweet button -->

… so just search for <div class=’entry’> and put it in directly below that.

index.php

Do exactly the same thing as for single.php.

Why use the official Twitter Tweet Button?

You could use Tweetmeme or some other button… but the official button has a big seller for me.  Every time somebody uses it, it will offer up two suggestions of people to follow…. the two suggestions you provide using the data-via and data-related options.  It makes it much easier to gain more followers. That can’t be a bad thing!

The default way that Wordpress displays your page/post/comment/tag pages title is to have the blog name, followed by two >> marks and then the post title, tag title, comment title, or just the blog name if it is the home page. Here is how to do some simple optimisation (ok ok optimization just for you Americans) on your Wordpress site or Blog.

As you can see, on this blog things are a little different.  The home page displays the blog name “SEO Training” and also the site description (small text below the blog title).

On the other pages I have made the blog name go to the right.  Why?  because it is better to have the more important keywords near the beginning of the title for SEO.  This is particularly true when the blog title is repeated on every page as it is in this case.

This is another issue.  Should I have the blog title showing on every page?  Jury is out on that one here… so I’m experimenting.  Another blog I write on my home site about online marketing does not have the blog title on every page. If it is a tag page then the page title will be just the tag.  If it is an article then just the article title will appear in the meta title tag.  The blog is new, so I will give it six months and see if I can notice any discernable difference in performance.

Anyway, I digress a bit. Here is how to change your title tag in wordpress.

1. You need to open the header.php file in whatever theme you are using.  You can do this directly from Wordpress, by clicking on the appearance menu item on the left of your Wordpress dashboard and then clicking on Editor which will show up below it.  Once you are in editor you can select Header (header.php) from the list of pages on the right.  Your files must be writable though or it will tell you it could not save your changes.  Alternatively, if like me you prefer to use ftp, then the path is wp-content -> themes -> (whatever theme you are using) -> header.php.
2. Find the title tag. It will look like this: <title><?php wp_title(’&laquo;’, true, ‘right’); ?> <?php bloginfo(’name’); ?></title>
3. Change it to this: <title><?php if ( is_single() || is_page() || is_tag() || is_category()) {  wp_title(’&raquo;’,true,’right’); bloginfo(’name’);} else {
   bloginfo(’name’); echo ” &raquo; “; bloginfo(’description’);
   } ?></title>
4. Save it.  You’re done!

If you would like the blog title not to appear on every post then you want to use this instead: <title><?php if(wp_title(’&laquo;’,false, ‘right’)){wp_title(false);} else { bloginfo(’name’); echo ‘ &raquo; ‘; bloginfo(’description’);} ?></title>

That is all there is to it. Better SEO for your Wordpress site and it’s not even difficult! Enjoy!