Is structured data the future of search?

Rich snippets are increasingly used by Google to present searchers with information above and beyond the site title and meta description - such as reviews, prices, addresses - any data that is 'structured'.

This is nothing new, which is why it's such an appropriate subject for a cutting edge blog such as this to write about after over 4 months of total silence.

An example would be review and price range information for a restaurant. Something Google currently provides on Yelp search results - one of their partners when they initially embarked on rich snippets.

How this works is Yelp.co.uk presents the review and price information on each restaurant page in a format that Google can understand using 'microformats' or RDFa markup.

In English that last sentence translates as; Google knows that the two dollar signs refer to the 'pricerange' and the 15 reviews refers to the amount of reviews (or 'count').

By defining the content of a website into principle parts (such as 'pricerange' and 'count') it allows for easy comparison across websites.

Instead of having to go into a website to see that Yelp has 15 reviews and Toptable has 20 reviews you can see this in the search results, such as in the screenshot above.

This could potentially work for any data. Imagine searching on Google and instead of just titles and descriptions you get a summary of a site page - so if it's a product, you see the price, if it's a restaurant it gives a rating, if it's an event, it gives a date.

This would make it easier for you to know the content of a website and quicker for you to search and surf.

Personally i think this is a direction the web could take IF websites catch on to this method of coding and agree specific microformats - for example everyone uses 'price' for prices as opposed to 'cost', 'amount', 'payment' etc.

The well established Google product search (previously Froogle) is making good use of microformats and Wolfram Alpha had a good bash at it last year (what happened to them?!*) - i definitely think it's an area to keep an eye on.

*Update: They are providing factual answers to Apple's Siri software amongst other things...

The only thing standing in the way would be cleverer search algorithms that can figure out which part of web page is the price, the review, the date without the need for it to be hard coded as such. I'm sure the magical web boffins are thinking about this as we speak. Shh, they can't be disturbed...

Related posts
Search images by the colours within them (Feb 09)
What content types can Google Search? (Dec 08)

Check your web design in different browsers online

Check what your website looks like in multiple browsers and versions with browsershots.org.

Different browsers render HTML differently. For example when I make a simple table in one of my posts so I can put an image with a caption under it hovering on the right hand side, I invariably find that it looks different in Firefox and Internet Explorer. See a comparison below:

Blog image in Firefox 3 - lovely space around the copyright	Blog image in IE 7 - horrible text coming too close to bottom of copyright

Now this becomes quite a serious problem if the difference between browsers renders some functionality or usability of your website unusable.

It's therefore important to check on building a new website how it renders in other browsers, something I’ve done in the past by having a number of browsers installed on my PC. There are also a number of programmes that allow you to have multiple versions of different browsers installed at the same time - for this exact purpose.

That is a bit of a hassle though, and browsershots.org makes this easier. You just have to wait for an hour or so. The site provides a quick view, as below, and also the option to download all screenshots in a handy zip file.

Problems

• As it works on a page by page basis, if you want to check multiple pages you will have to wait each time for them to upload all the screenshots - which can be up to an hour and a half depending on how many different ones you want.
• You're only allowed 100 shots in a 24-hour period. I've just done 37 so you can see how quickly you could use up your quota.
• Both these problems don't exist if you pay for the priority service at €21.95 a month.

Related posts
SEO problems of white text on a dark background (Jul 2008)
What font / text size online and how to set it in the CSS (Oct 2008)
Improve and check your website's readability (Mar 2009)

What content types can Google search?

SEO is so much more than trying to get pages or text to rank highly in search engines. With the large variety of content that can now be searched with 'Universal Search' (Google's term for providing something more than just text results) it's worthwhile making sure all the other types of content you publish are correctly optimised.

	Text OK, the basic thing that all search engines cover. If you have text on your site, a search engine spider will read it and often index you. Text pages are returned in search results if the search keywords match their content and ranked according to the usual SEO factors including linking, keyword density, commitment etc.
	Images Google Image Search "analyzes the text on the page adjacent to the image, the image caption and dozens of other factors to determine the image content." (image search FAQs). Some of these other factors may well include alt tags. So ensure your adjacent text, image caption and alt tag are all keyword relevant and targeted to the keywords you wish to rank for. If you are a news site and want your image to appear in Google News, ensure it is inline.
	Video There are a number of things you can do to optimise videos. Especially important now video results are being returned in the standard Google search.
	Flash It was announced back in July that Google will index flash (SWF files). The original Google blog post has some more information on exactly how it works.
	Normal 'text and images' PDFs Google will search and index PDFs much as it does HTML. There's lots you can do to optimise your PDFs for search engines.
	PDFs of scanned docs Google have started indexing PDFs of scanned docs by using text recognition software (OCR) to 'read' the text. Announced at the end of October it's definitely worthwhile getting any PDFs of scanned docs online if you haven't already. Forgetting Google they may well be good content for your users anyway that will encourage linking.
	The previous 6 results summarize the main content types available online that can be indexed however also included in 'Universal Search' are a number of other types of content such as Google News and Google Product Search (formerly Froogle) that I haven't mentioned above as the on page optimisation remains the same - the results themselves are text - however it's essential you go through the necessary submission processes to get on these 'vertical search' engines (search engines providing something specific - the opposite of universal search really).

To list some vertical search engines:

• News aggregators - Google News has submission guidelines. Also make sure images are inline as mentioned earlier. Don't forget other news aggregators such as NewsNow.
• Product search - Google Product Search as mentioned above, there are also many other search engines and sites that will list products.
  
• Business searches - Google Maps: Local businesses can add their details so they come up in searches. Yell.com: One of many traditional online business directories
• Blog searches - Get a blog and appear on a whole of host of search engines including Technorati and Google Blog search. This will also tap into the world of social bookmarking - which any page can do but blogging started it.
• Google has loads more including Google Book Search. Plus even more really specific searches but I think they are mostly done via various partners so you probably can't get on these.
  
• Mobile - And then last but not least it's worth considering search optimisation for mobile. With increased mobile internet usage search engines are going to have to start providing mobile friendly results.
• and many more...

Related posts
Is structured data the future of search? (Mar 2010)

The difference between <title> and <meta name="title"> tags

Use the <title> tag for your page title. Don't bother with a <meta name="Title"> tag.

How i've got this far and not realised this is a mystery. It's only on the back of an email to one of my suppliers in which i asked them to change all the automated titles on my website that i discovered this. I asked them to change the "meta title tags" so they did. They took my word to the letter and so just changed the <meta name="title"> tag leaving the <title> tag as it was, not much help.

Thanks to a really helpful description here, i now know the difference.

The title tag appears in your HTML like this:

<title>Your page title</title>

The meta title tag appears in your HTML like this:

<meta name="title" content="Your page title">

The <title> tag is what feeds your browser title and is also what will appear in Google, see how i've subtely circled where the <title> tag appears in the two screenshots below.

As far as i can tell from a wide number of forums, blogs, SEO advice sites the <meta name="title"> tag is pointless. It is possible that some search engines (but not Google, Yahoo, MSN) use it but i wouldn't bother with it all.

This point is further backed up by looking in the source code of the top sites on the web, the following sites do not contain the <meta name="title"> at all, they just have a <title> tag:

• www.bbc.co.uk
• www.yahoo.com
• www.google.com (read more about www.google.com's optimisation)
• www.timesonline.co.uk
• www.useit.com
• themeaningofweb.blogspot.com/

What font / text size online and how to set it in the CSS

Setting website text sizes seems like a fairly straightforward subject. Yet I thoroughly confused myself for a good couple of hours while trying to figure out how to answer my friend's question. I finally found my simple answer - Set your font sizes in CSS and use percentages or em units.

Colour by numbers has never been this easy

This all came about as my friend sent me an email asking, "What's the appropriate text size for websites?" My first thought was, "Clearly I’ve received an email not destined for me, I’ll now redirect it to someone who actually knows something about building websites," but then realising all my techy friends would answer me in a language light years beyond my understanding I’d figure I’d try work it out myself.

Now as I’ve discovered this question is completely unnecessary once you understand how text size should be set in CSS.

You can set the size of your text in three ways:

• Units: ems, points and pixels (I had no idea what em size was either, look it up on Wikipedia)
• Pre-defined keywords (like small, medium, large)
• Percentages

As far as I can tell most websites seem to use a combination of all 3 methods, indeed when it comes to using units some websites also seem to use a bizarre combination of ems, points, and pixels, effectively hacking text size into the web design.

Clearly this is not the way nature intended websites to be built. The W3C suggests you use a size of 1em (or 100%) and also states that you should never use point size or pixel size.

Now there's a reason not to use point or pixel size. The first and probably most important reason would be that by restricting yourself to an absolute length you are preventing people from changing text size themselves using the text size function in their browsers.

The second reason would be because a specific set size, ie.10pt or 5 pixels, may look good on your computer in Internet Explorer but open the same site in Firefox, Opera, Chrome or Safari and the size may look smaller or bigger as different browsers render text differently. The same may happen across different computers and operating systems.

As the W3C page says, if you want different sizes throughout your page - like a bigger heading, smaller footer text - then set the base text size to 1em (or 100%) and then adjust the other elements by a percent of the base. This means that regardless of your computer settings everything is in proportion. So to have your main text at 100% you may want your main heading (h1) to be a lot bigger so you set that to 150% for example.

Go to the W3C site for more information on CSS and specifically setting font sizes in CSS.

Related posts
SEO problems of white text on a dark background (Jul 2008)
Improve and check your website's readability (Mar 2009)
Check your web design in different browsers online (Jun 2009)

Add Google Analytics to blogger

Check out this post on how to add Google Analytics to blogger sites.

It's really simple and the post above is a step by step process. Essentially all you need to do is add the Google tracking code directly before the </body> tag in your HTML template.

I'm already on Google Analytics as an administrator for my work websites so obviously didn't want to add my website profile as everyone at work would see it. That's when i discovered that just because you may have administrator access doesn't mean that you have your own 'Google Analytics account' - you just have a login. Within Google Analytics you can have access to a number of different accounts.

So if you're in the same situation as me make sure you click 'Create New Account...' in the top right of Google Analytics then you can edit who can see it, who has access and get tracking code specific to you. You will also become the main contact for that account as you input your name and details.

Digital editions should be killed

Digital editions don't provide the functionality of a website and you are wasting your content by using them.

What are they?
Digital editions are online magazines that physically look like a print magazine.



These have been on the scene for many years but I've so far managed to ignore them and tried to convince others to do so too. I've never had a specific reason for this dislike beyond the feeling that doing something that looks like it's offline online seems wrong. To be honest I'd thought they'd go away but they haven't, in fact they seem just as popular as ever.

So I've recently been looking at them in more depth, well if advertisers are willing to spend money on them and people are willing to read them or even pay for them then i can't ignore them.

Examples include the lad's mag Monkey (NSFW) and a whole host of print titles which you can get in digital magazine format (men's health, business week, hello...). They come in two main types - reader-based and browser-based - the former requiring a download and the other online (with the use of flash).

No search engine indexation
My first problem with digital magazines is their inability to function with search engines. They are flash, Google doesn't like flash. However I'd heard that some suppliers of browser-based digital magazines are also providing a HTML page for each flash page so allowing the magazine to be indexed by Google. I wanted to find out more.

So i rang up a digital magazine supplier (CEROS) and battled through the sales spiel until i was passed to a technical member of their team to properly explain what they did to produce this page and what it looked like. I learnt that they are just outputting the PDF (which is what a digital magazine is made from to begin with, and flash graphics and animation is added in later) to HTML. Simple!

Well yes and no. Simple is what it does - it just takes the text in the PDF and puts it into a HTML page that looks like a simple text file. Not pretty but does the job - some of it will be indexed. All the flash content put in after this process (such as animations) won't have any HTML equivalent unless you type it in yourself.

Normal digital edition page	HTML digital edition page (click to enlarge) Yes, it is black text on a grey background but then i guess it is for search engines only...

This is essentially hacking apart a PDF file to turn it into a website. The time and energy doing this would seem better spent copying and pasting every page into notepad and saving every image and then creating a website with the functionality of, well a website.

Update: Google now indexes flash, this doesn't change my opinions though.

Recreating offline experiences
Why shouldn't you recreate offline experiences online? Well the following are my reasons why and I'm not alone:

• Zooming: If you want to read you have to zoom in to the page and move the page around - This seems ridiculous when you can fit an article with images on a well designed webpage and see it without any zooming, just a scrolling down of the page to read more.
• It's not interactive: The beauty of the internet is its interactivity. You can't comment on digital magazines (mostly), it's difficult to link to it, you can't print it without using up all your ink.
• It's a dead end: The internet is a city and you surf from website to website like you would walk from house to house. Digital magazines don't share this world, they're a web cul-de-sac.
• Where do you go from here? Your digital magazine is a static screenshot. They'll be no dynamic links on the side of your digital magazine articles linking to newer articles. Once it's done it's done.
• Usage: Why would i want to flick through a virtual magazine with turning pages? I know I'm online, I realise this is a computer and I'm looking at a screen.
• Browser function: Digital magazines are flash - you can't press the back button on explorer when you turn a page and want to go back.
• Accessibility: I'm not sure how accessible these are but looking at the HTML page i'm not hopeful

Longevity
Content is king online. Good content will gain links over time, the more good content in your website the better you will perform in searches. More good content = more good links = higher Google ranking. But if you are putting your fantastic content into a format that is not as compatible with Google as a normal HTML web page and it doesn't lend itself to being linked to you are wasting that content.

So if you're thinking about using digital editions only use it if you want something short term - it may well provide instant hits when emailed out, and immediate revenue from advertisers excited by its interactivity. But long term, putting good content in a search engine friendly format will gain exponentially more hits over time and building relationships with advertisers on your website may well provide more revenue over time.

Do rel=nofollow tags on internal links benefit your site's SEO?

Well yes, using rel=nofollows on your internal link structure is an advanced SEO technique but it can help to improve your SEO. [See update at end of page, it's likely this technique no longer works].

I asked this question on LinkedIn a couple of weeks ago and what follows is a summary of some of the responses I received and other research I’ve done online.

What is it?

“A site may have many pages that have the opportunity to get crawled and indexed in the SERPs (search engine results pages). You're also looking at near infinite choices for how you interlink all those pages. Out of all those permutations, there is one configuration that is the most optimal from an SEO perspective.

That's because it maximizes the flow of link juice (e.g., PageRank if you're speaking purely in Google terms) to your most important pages and minimizes (or cuts off completely) the flow of link juice to your least important pages.” - Stephan Spencer at Search Engine Land

By adding rel=nofollow to a link you are telling a spider not to follow that link. This was invented to be used in comment fields to prevent comment spam. However as all it does is prevent link juice being passed on, SEO specialists have realised it can be used (completely legally, Google even approves it!) to sculpt internal linking structures.

Example: If you have 100 internal links on a page you are diluting that page’s link juice. By adding rel=nofollow to 90 of the less important links the 10 that remain have 10 times more link juice and subsequently benefit the pages they link to more.

Site structure
Before I get onto the use of rel=nofollow it’s worth considering that this technique is used to fine tune internal linking structure. There’s no point in fine tuning your internal linking structure if it’s sculpted incorrectly in the first place.

“The size and shape of your site's navigational hierarchy is your blunt instrument and rel=nofollow is your scalpel.” - Stephan Spencer at Search Engine Land

“One of the most powerful, and most underdeveloped, on-page SEO tactics is rejigging your internal hierarchical linking structure to optimise the flow of link juice.” This makes sense from an SEO point of view but also from a user point of view – if all your information is arranged in a logical structure it will make for a better user experience.

Using rel=nofollow
So if your site structure is as perfect as you want it, you’ve tried card sorting, user testing and the hippo (Highest Paid Person’s Opinion) is happy then it might be time to look at using rel=nofollow.

First check you have a good xml and HTML sitemap on your site. As Tom Griffin stated in the LinkedIn answer, “The goal is not to block the page from being indexed - the goal is to funnel internal authority throughout your site in the smartest way possible”.

Then you need to select which pages on your site you identify as the most important (and least important) for the relevant keywords you target. This in itself is a worthwhile task for any webmaster. There could be many pages on your site which rank highly for certain keywords but are underused due to being buried in your site structure. The links from those pages could be a massive boost to other pages on your site.

Next is the big one - look at the pages themselves and identify all the links. Clearly this could be a mammoth task even for a site of a few 100 pages so start with the biggie – the home page.

I haven’t tried this yet but I’d recommend creating or using some sort of database or record of which links are on or off (rel=nofollow) to best understand the impact you are having on your site structure. As mentioned above you don’t want to risk creating a dead end and cutting off a page.

Real life examples
SEOmoz have implemented rel=nofollow on their site and witnessed a 20% rise in traffic. However others are more sceptical; Matt Cutts from Google says that nofollowing your internals is a 2nd order effect. It will best optimise the traffic you have rather than gain you more. Essentially he believes there are others things you can do first for a better return on investment.

Conclusion
And my final question on LinkedIn was why aren’t the big sites doing it?

Bbc.co.uk, theregister.co.uk, look in their source code and you won’t find one rel=nofollow tag. The only answer I can think of (and the only answer I got on LinkedIn from Brian Rogers) is that if you have a perfect link structure and your pages rank very highly due to large amounts of external links what difference will fine tuning your internal links make? Or maybe it’s just too complicated?

So to summarise, it’s worth it and it works. How worth it is something only you can decide and, to bore you with clichés, this is only one tool in the SEO armoury.

Update, June 09: Apparently Google now ignores pagerank sculpting such as this. More on Google's Matt Cutts' blog.

Don't just have alt tags on images, include height and width too

A fact i hope everyone making websites knows - include an alt tag with all your images.

Doing so will ensure that your website meets accessibility requirements but more importantly it lets everyone use your website including those with screen readers.

Now something i hadn't bothered with until recently was the height and width attributes. If you make your image the right size and don't include the height and width attributes then the image will be displayed the size it is. 'Why bother with height and width attributes?' I thought to myself.

WRONG! By including height and width attributes you will be improving your web page, making it load faster and making a better experience for your users.

While images are still being downloaded your web page will appear correctly because all the spaces where images should be are the right height and width.

Have you ever been onto a site and found that as the images load up, the text and copy and design all start pinging all over the place? Well that's because they haven't included height and width attributes.

It also means that if an image fails to load completely your page will still look the same, and if you've put in a useful alt tag the impact on your web page design is minimal. More info on height and width tags here.

For example, see my fictional code for a pretend image of a certain rock god in a tourist hotspot
including height, width and alt:

<img src="http://www.yourwebpage.com/yourimage.gif" alt="Robert Smith standing in front of the Taj Mahal" width="75" height="100" />

Related posts
Search images by the colours within them (Feb 2009)
Give images rounded edges using Photoshop (Nov 2007)

Make a favicon - the little icons in the browser address bar

Favicons are the little icons that appear to the left of the url in your browser address bar. They also appear next to the site name in your 'Favorites'. See below, i've subtly circled the favicons in red.

How to create a favicon
Your favicon needs to be 16 x 16 pixels so open up Photoshop (or a graphics programme, even 'Paint' will do) and make yourself a nice little icon that's 16 x 16 then save it as a gif or a bmp. Because this size is so tiny you may find that just reducing your logo to 16 x 16 will make it look a bit sh*t so have a play and keep it nice and simple.

How to get it into the right format
Favicons need to be .ico files. Now there is an open source plugin from telegraphics that you can get for Photoshop that will allow you to save the file as an .ico.

However i've just created a favicon using an online converter that's really easy to use:

• Upload your gif (or whatever) file (you can even enter your twitter username and just use your profile pic)
• Click 'Generate FavIcon.ico'
• Bob's your uncle, you're given a nice little zip file containing the precious .ico file.

How to add it onto your website
Upload the favicon.ico file to your website folders. It needs to be put into the same folder as your home page, make sure it's not in an images folder but just sitting there on its own.

Then add the following HTML tag to your web page after the <head> tag and before the </head> tag:

<link rel="Shortcut Icon" href="/favicon.ico">

You'll have to put this in the html for every page you want the favicon to appear on, or if you are using CSS (which you should!) then it just needs to be in there. [update: see the comments, you can't add a favicon to CSS]

If you still can't see it make sure you are using Firefox to browse the web as Internet Explorer creates problems just to entertain itself.

Collecting favicons
While surfing the web for the information in this post i also discovered a private society of individuals (well one guy) who collects favicons. An interesting hobby i'm sure you'll agree but i can't imagine that they have the resale value of stamps, china dolls or antique pepper pots.

Inputting HTML examples without it being coded

How do you put html coding in a post - such as <strong> - without blogger or whatever WYSIWYG editor actually interpreting it as real code rather than a sample you are trying to display

Possibly the most boring post of all time but my excuse is somebody asked me how i did it. Why my kind friend told me verbally as opposed to leaving a comment on the relevant post is beyond me and totally against the principle of Web 2.0. I've told you before, I'm writing a blog, you can't speak to me in real life!

Anyway all you have to do is put in the appropriate html code for each symbol as opposed to the symbol itself. So if you want '<strong>' then you need to actually put into your post &#60;strong&#62;. This is because < is &#60; in html coding. The code for the symbols is standardised by ISO-8859-1 and click on the following for the full list of all the symbols or the 'HTML Coded Character Set' as it's called.

WAKE UP IT'S OVER!

Teach yourself HTML

Everyone working online should have an understanding of HTML. Mainly because it's so easy to understand the basics.

I've learnt all my HTML knowledge online, search on Google, there's hundreds of pages devoted to teaching you HTML and ironing out problems. But the one site that i've got in my favourites (or 'favorites' as it says on my screen despite the fact English(UK) is my preferred language) and I use ALL the time is (drum roll):

• W3 Schools

The link above in particular (as opposed to the home page) i find most useful. Bookmark it now! All the links on that page open up another window that allows you to change html and see the result.