Uprankers » Coding Tips http://uprankers.com Tools and strategies to dominate search results Mon, 16 Jan 2012 16:53:33 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 How to use microformats to enrich your SERP snippets /how-to-use-microformats-to-enrich-your-serp-snippets/ /how-to-use-microformats-to-enrich-your-serp-snippets/#comments Tue, 10 Jan 2012 17:03:40 +0000 Lury /?p=912

People often look at search engine optimization as if it was all about positions in the SERPs and nothing more. True, you have to be at the top, but microformats could give you (almost an unfair) advantage over your competition with just a little bit of work.

Microformats? What are you talking about?

Microformats provide a way to structure and markup your data in a way that crawlers like googlebot can easily parse and extract specific pieces of information from. A while ago, Google started to show data extracted from microformats in the SERPs, but not too many websites have adapted and changed their markup.

Implementation – easier than you think

Usually, onsite SEO means writing a lot of code, buying commercial plugins, fixing internal linking structure etc. With microformats, it’s totally different – they’re used to better present your data to the crawler, so all the required information is already there – in your template files.

All you have to do is to simply add a little bit of markup to get required DOM structure.

Example – imdb.com

If you have never used Google to find a move review on imdb, here’s a picture of IMDB SERP snippet for “godfather” search

godfather SERP snippet IMDB

Have you ever wondered how it is possible that IMDB has ratings, director, stars and other links already in the SERP? This is the best example of how microformats should be used. To prove that it really gives you an advantage, take a look at other results on this page. Below IMDB, there is a long gap before another snippet with microformats is shown:

As you can see it can really make a difference!

What the hell is schema?

As many other things nowadays, microformats also have documentation online – folks from Google done great job putting it all together at schema.org

The part we are currently interested in is movie schema

Hands-on IMDB movie schema implementation

Let’s look at IMDB source – we will show you step by step how they did it.

1. movie itemscope

Ok, first things first – itemscope. By adding itemscope to a div you define that your div contains information about particular item.

<div id="content-2-wide" class="redesign">

2. Cover picture

<img src="http://ia.media-imdb.com/images/M/MV5BMTIyMTIxNjI5NF5BMl5BanBnXkFtZTcwNzQzNDM5MQ@@._V1._SY317_CR2,0,214,317_.jpg"
     style="max-width:214px; max-height:317px;"
     height="317"
     alt="The Godfather Poster"
     title="The Godfather Poster" 
     itemprop="image" />

As you can see, the last param of img is itemprop=”image”

3. Item (movie) name

<h1 class="header" itemprop="name">
The Godfather

<span>(<a href="/year/1972/">1972</a>)</span>
</h1>

4. Rating

<div class="star-box giga-star" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 
<div class="star-box-giga-star">
9.2
[...]
<div class="star-box-details">
Ratings: <strong><span itemprop="ratingValue">9.2</span></strong><span class="mellow">/<span itemprop="bestRating">10</span></span> from <a    onclick="(new Image()).src='/rg/title-gigastar/votes/images/b.gif?link=ratings';"     href="ratings"   title="519,864 IMDb users have given an average vote of 9.2/10"
    ><span itemprop="ratingCount">519,864</span> users</a>
</div>

As you can see here, AggregateRating is used and because it’s a separate “item” in terms of microformats itemtype is provided.

I’d recommend you to check AggregateRating schema, as it’s commonly used on shopping sites and you’ll probably find it useful.

5. Movie description

<p itemprop="description">
The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.
</p>

This part is quite self-explanatory :)

6. Director

<h4 class="inline">
    Director:
  </h4>
<a    onclick="(new Image()).src='/rg/title-overview/director-1/images/b.gif?link=%2Fname%2Fnm0000338%2F';"     href="/name/nm0000338/"   itemprop="director"
    >Francis Ford Coppola</a></div>

Again simply adding itemprop=”director” to your existing markup will make Google display it in the SERP

7. Actors

<h4 class="inline">Stars:</h4>
<a    onclick="(new Image()).src='/rg/title-overview/star-1/images/b.gif?link=%2Fname%2Fnm0000008%2F';"     href="/name/nm0000008/"   itemprop="actors"
    >Marlon Brando</a>, <a    onclick="(new Image()).src='/rg/title-overview/star-2/images/b.gif?link=%2Fname%2Fnm0000199%2F';"     href="/name/nm0000199/"   itemprop="actors"
    >Al Pacino</a> and <a    onclick="(new Image()).src='/rg/title-overview/star-3/images/b.gif?link=%2Fname%2Fnm0001001%2F';"     href="/name/nm0001001/"   itemprop="actors"
    >James Caan</a>

So to add actor information to SERP, simply put itemprop=”actors” in elements linking to their profile on your site.

8. All the other stuff

We could go on but i think you get the idea – just go to schema.org, find your schema and add markup to win with your competition!

You might find a tool provided by Google useful to check if your implementation is correct – Rich Snippets Testing Tool – sometimes implementation is a bit tricky and this tool might come in handy.

]]>
/how-to-use-microformats-to-enrich-your-serp-snippets/feed/ 0
W3 Total Cache JavaScript minification troubleshooting /w3-total-cache-javascript-minification-troubleshooting/ /w3-total-cache-javascript-minification-troubleshooting/#comments Tue, 10 Jan 2012 12:14:02 +0000 Lury /?p=887

W3 Total Cache is a really popular caching plugin for WordPress. It’s easy to set up, and using default settings you can significantly boost your site’s performance.

Unfortunately, there is one common issue with the default JavaScript compression settings when you have several other plugins installed – it breaks js!

Default W3TC minify settings look as follows:

W3 Total Cache minify settings

Solution

If your JS-dependent features stopped working after enabling JS minification, you have to:

  1. switch minify mode to “Manual” on W3TC Global Settings Page;
  2. go to minify section in W3TC configuration page;
  3. in JS section, click enable, then…
  4. pick your theme from the dropdown menu to the right of JS file management;
  5. now comes the tricky part – you’ll have to manually enter all js files, one by one, after pressing add a script button and Save all settings;
    • remember to exclude from this list any js files used by site features which are broken
  6. after clearing W3TC page and minify caches, you can test if excluding a file from compression helped (it should!).

List of js files

Ok, but how do you get all your js files? It depends on a browser you’re using.

Firefox:

  1. install and enable Firebug Extension;
  2. open it by clicking a “bug” icon in the browser’s status bar or simply by clicking Ctrl+Shift+C ( ⌘+Shift+C on Mac);
  3. switch to Net tab;
  4. click JS filter at the top;
  5. click Domain table header to order by domain name to have JS files grouped by domain.

Now you can simply right click each js and copy it to W3TC JS minify settings.

Google Chrome:

  1. open developer tools by clicking Ctrl+Shift+C ( ⌘+Shift+C on Mac);
  2. switch to Network tab;
  3. filter Scripts at the bottom.

Now you have to copy-paste each script address by right-clicking its name, choosing Copy Link Address option and pasting it into W3TC JS minify settings.
Safari and Opera are pretty much the same.

Final thoughts

While solving this kind of problems always require testing, I think our life would be easier if  the author of W3 Total Cache changed this part of configuration a little bit. My suggestion is to change it to “exclude the following scripts from compression” because that’s what we actually want to do. You also have to remember to update this list every time you add new plugins.

]]>
/w3-total-cache-javascript-minification-troubleshooting/feed/ 0