Posts Tagged ‘Rich Snippets’

Improve page/post indexes’ accessibility

Saturday, February 27th, 2010

This is just and addendum to a previous tip about in-page anchors: I don’t know if anyone noticed, but I’ve made some little changes to those indexes.

There’s no more to add, but some hints to make the headings more accessible: I’m trying to get those fucking on , too — and it isn’t “so” easy.

First of all, I made the menus’ layout closer to : it depends on how you stylized them via , so I can only suggest you to have a look at the example (just in the upper-right side of the page).

As you might notice, chose to handle the show/hide toggle link… while I’m preferring jQuery instead. You don’t have to make any change there.

I changed other 2 things you could find useful: the 1st implies to use slugs to replace the existing anchors’ IDs. My previous post suggested as follows:

<h3 id="chapter-1">Chapter 1</h3>
<h3 id="chapter-2">Chapter 2</h3>
<h3 id="chapter-3">Chapter 3</h3>

To be clearer, the above IDs used the same semantic prefix – in these cases, chapter- – with ascending integers to differentiate the anchors. Here’s what you should have after modifying them:

<h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet</h3>
<h3 id="ut-wisi-enim-ad-minim-veniam">Ut wisi enim ad minim veniam</h3>
<h3 id="typi-non-habent-claritatem-insitam">Typi non habent claritatem insitam</h3>

I really hope that it helps with the automatic ‘ creation: otherwise, it’s even preferable. Of course, remember to change the anchors accordingly.

The 2nd point I considered is “optional” and lots of people discourage its use: anyway – if you haven’t them elsewhere on the same page – you could add accesskeys to the links.

<div id="toc">
<h4 id="toc-label">Index </h4>
<ol id="toc-toggle">
<li><a href="#lorem-ipsum-dolor-sit-amet" accesskey="1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#ut-wisi-enim-ad-minim-veniam" accesskey="2">Ut wisi enim ad minim veniam</a></li>
<li><a href="#typi-non-habent-claritatem-insitam" accesskey="3">Typi non habent claritatem insitam</a></li>
</ol>
</div>

Some browsers could override them by default, but they won’t hurt: just make sure you aren’t using the same accesskey for two or more different links.

Another thing: looking at the Jeff Starr’s blog (a very useful resource you must read) I noticed anchors to go back to the TOC in plain headings. Those are especially useful to avoid mouse scrolling.

<h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet <a href="#toc" rel="toc">↑</a></h3>

I suggest you to maintain the rel="toc" in the end of the anchor, because it’s a standard reference. Optionally, it’s possible to handle the link with jQuery to get a better scroll to the TOC — I’ll explain how later.

That’s it for now: feel free to post any questions and/or suggestions in the comments (now open to public guests). For those who cares, I didn’t finish this blog’s adoption yet.

Tags: , , , , , , , , ,
Posted in Tip | No Comments »

How to license your own images with Microformats and RDFa

Friday, February 5th, 2010

If you own the images used in your posts, you may want to license them with and notify it to : now you can do so via , instead waiting for auto-discovery.

First of all, I suggest you to have a look to my tip on get ready for , where you can find useful information on enabling them for your blog. Once you have changed your , you should go on reading.

This method is valid for : of course, you could specify other license types; Creative Commons is just an example (and it allows you to add a RDFa specification).

Below, I show the Google’s standard way to implement licenses — on blogs could be preferable to use an inline alternative I’ll explain after:

<div about"/path/to/image.ext">
<img src="/path/to/image.ext"/>
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" rel="license">Creative Commons Attribution - NonCommercial - No Derivatives Works 3.0</a>
</div>

This is what Peter Linsley explained on the official Google Webmaster Central’s blog: you can watch the related video on YouTube too. I’ve just moved the rel attribute in the end to fit the ’s standards.

Anyway, blog posts should contemplate paragraphs and this markup could break your layout. So I used these attributes on different elements to avoid issues.

<img about="/path/to/image.ext" src="/path/to/image.ext" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" rel="license"/>

The about attribute could be inserted in almost any element and the href attribute isn’t “clickable” so you may include the image in an anchor, if you want to.

My way applies especially if you use WordPress’ thumbnails: providing a working link to the license’s text isn’t mandatory (and search engines will do it for you).

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

A first look at Google’s Rich Snippets: People

Monday, February 1st, 2010

I spoke about the ’s twice in the past, although some of you could haven’t noticed: I mentioned them talking about — but are a form of snippet too.

If you got a multi-user blog powered by or WordPress MU (which will be integrated on the traditional WordPress’ core of the next 3.0 version) as well, I planned to release a plugin to automatically handle what I’m going to explain.

On the other hand, if you’re the only writer of your blog you could easily take advantages of the People’s snippet on : just remember to enable RDFa on your site, before.

It doesn’t matter how do you insert the needed information: for example, I used a normal page chapter instead a simple list of terms (that’s the suggested method for the posts’ footers).

I chose to use too, while helpers suggest to use it alternatively with RDFa: using both doesn’t break anything (Microformats reside in classes, RDFa relates to special attributes) — and ensures more compatibilities.

Below, the official Google’s way to embed People snippets on a page. The 1st piece of code stands for the Microformats’ method:

<div class="vcard">
<div class="fn">Federico Moretti</div>
<span class="nickname">fedmor</span>
<span class="url">http://federicomoretti.name/</span>
<span class="org">b:G | studio</span>
<span class="adr">
<span class="locality">Varese</span>
</span>
<span class="title">Publicist</span>
</div>

Of course, you could add other informations using the Microformats’ syntax — like additional-name and so on. Here’s how the same looks with RDFa:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span property="v:name">Federico Moretti</span>
<span property="v:nickname">fedmor</span>
<span property="v:url">http://federicomoretti.name/</span>
<span property="v:affiliation">b:G | studio</span>
<span rel="v:address">
<span property="v:locality">Varese</span>
</span>
<span property="v:title">Publicist</span>
</div>

As you may notice, the number of elements doesn’t change: my implementation includes other optional fields, but this is enough to get started.

Merging the two previous examples in a single portion of code is very simple and you could easily customize them to fit your needs:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person" class="vcard">
<span property="v:name" class="fn">Federico Moretti</span>
<span property="v:nickname" class="nickname">fedmor</span>
<span property="v:url" class="url">http://federicomoretti.name/</span>
<span property="v:affiliation" class="org">b:G | studio</span>
<span rel="v:address" class="adr">
<span property="v:locality" class="locality">Varese</span>
</span>
<span property="v:title" class="title">Publicist</span>
</div>

It isn’t important what kind of element are you using in the place of span: just remember to assign the proper values in a dedicated container.

Tags: , , , , , , , , ,
Posted in Tutorial | Comments Off

How to create a Wikipedia-like page/post index for anchors

Friday, January 29th, 2010

As you may know, often creates for domains: getting them for a site is not so easy, because it’s impossible to suggest them — you could only ask for a removal via .

I’ve recently noticed that Google allows in-page anchors as Site Links too, thanks to : they could be useful for pages and posts with multiple chapters.

Suppose to have a content with more per-page headings like Wikipedia’s entries: providing an index with specific IDs is quite easy (maybe via ). And they should be included as , as well.

I edited some of this blog’s posts to fit this method, but you can always look at to see a live example of what I mean. Let’s start with a quick tutorial.

I use different levels of headings: h2 stands for pages’ and posts’ titles, while h3 identifies in-page chapters. So h4 is the best for the index label — although it musts reside before chapters’ headings:

<div id="toc">
<h4 id="toc-label">Index </h4>
<ol id="toc-toggle">
<li><a href="#chapter-1">Chapter 1</a></li>
<li><a href="#chapter-2">Chapter 2</a></li>
<li><a href="#chapter-3">Chapter 3</a></li>
</ol>
</div>

Warning: you may use whatever you like for naming the IDs, but I suggest you to maintain toc for the main div (notice that I didn’t use foo as I use to): TOC stands for Table Of Contents and is a standard reference.

Of course, you must assign the same anchor’s ID to the linked heading like so:

<h3 id="chapter-1">Chapter 1</h3>
<h3 id="chapter-2">Chapter 2</h3>
<h3 id="chapter-3">Chapter 3</h3>

Above is just an example: you don’t have to limit your headings to just 3 — and they could have the titles you prefer. My own pages and posts markup is quite different, because I added a title to the anchors and so on.

I you noticed, I left a white space between Index and h4’s closing tag: it wasn’t an error. That’s necessary to use the .append(); function of jQuery to change the show/hide link’s label.

I used the Jeff Starr’s tip to save bandwidth for including the latest jQuery library in the head element. So, I modified the Andy Langton’s script to fit my needs. Here’s how:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$( document ).ready( function() {
var toggleHide = 'hide';
var toggleShow = 'show';
$( '#toc-label' ).append ( '[<a id="toc-hide" href="#">' + toggleHide + '</a>]' );
$( '#toc-hide' ).click( function() {
if ( $( '#toc-hide' ).text() == toggleHide) {
$( '#toc-hide' ).text( toggleShow );
} else {
$( '#toc-hide' ).text( toggleHide );
}
$( '#toc-toggle' ).slideToggle( 'slow' );
return false;
});
});
]]>//
</script>

Remember to change IDs accordingly. Now your index is very closed to Wikipedia’s: you may want to stylize it with — in my particular case, using .slideToggle(); or simply .toggle(); didn’t change anything.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off

How to get ready for RDFa on WordPress

Wednesday, January 27th, 2010

W3C Markup Validation ServiceIf you’d like to implement on your own -powered blog, you should know some at least : steps are not “so” difficult, but there are several prerequisites I’m going to explain.

To be sincere, these instructions aren’t WordPress-specific: they could be inserted in any existing web site with similar attributes. I’ll speak about those concerns later.

First of all, you absolutely need to change your site’s : RDFa data can be inserted almost anywhere, but to make them exportable you must give an appropriate declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Above is the valid DTD for RDFa in XHTML: it’s fully XHTML 1.0 Transitional-compliance — BTW, changing this is not enough. To fit our purposes, it’s necessary to add some references in the head element too.

None of them is mandatory: anyway, to enable ’s in a second time you’ll need to include at least 3 anchors out of 4 (Creative Commons’ RDFa is optional):

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" version="XHTML+RDFa 1.0">

By now you’re done: I suggest to use the W3C validator to check the markup for errors. The document type could remain text/html if your code is -compatible.

Tags: , , , , , , , , ,
Posted in Tip | Comments Off