For some reason when I started writing I thought it’d be a great idea to use rather abstract titles for all of my posts, something short and curiously inviting (hopefully) rather than the straightforward approach of actually describing what the post is about. I wanted to avoid long and boring titles like “Differences between Flash Player 10 and 10.1″ or “How to install.. blah blah”.

So although, as far as titles go, they could probably be more boring – they could definitely be more helpful. Most of them are obscure and aren’t really meaningful. They’re fine for human readers, especially after people have read the post, but they’re not so good for search engines or people searching for what I’ve written about.

I decided then to use Wordpress’ custom fields to add a descriptive ’subtitle’ to each post that should shed some light on what I’m actually writing about and hopefully the titles should start making sense.

I could have started anew and use descriptive titles from here on, but that would be inconsistent and make those old titles even more nonsensical. I could have renamed the lot, but the old URLs would then be meaningless (the name is in the permalink) or if I changed those URLs then previously incoming links would be broken.

Adding Custom Fields

Custom fields are essentially metadata for each post and can be pulled in by your theme.

I choose to display my subtitle under the each post title so humans, search engines and crawlers alike can read abstract title and the helpful subtitle description together.

Custom fields are added at the bottom of the ‘Add New Post’ page and can be any amount of value pairs that take a name and value.

These custom fields won’t automatically show in your post, you’ll need to edit your current theme’s PHP files to retrieve them.

The get_post_custom function will return a multidimensional array with all custom fields of a particular post or page, which you can traverse to find your custom value pair:

<?php get_post_custom($post_id); ?>

Otherwise you can use the get_post_custom_values function and send the field name to get an array of all the values with that particular key:

<?php get_post_custom_values($key); ?>

I’m using a field to add a subtitle, so I append the value onto the end of my title which you can see on the left (if you’re reading this on my site).

Semantically this is part of my title. As I stated above, for SEO purposes, I want this to be considered as a part of my title for all intents and purposes by search engines and spiders as well as humans. I only ever want them considered ’separately’ on an aesthetic level and in Wordpress’ forming of the permalink.

So I’ve styled up the subtitle to look complimentary to the ‘actual’ title with CSS, but injected it into the post’s h2 title tag in my mark-up so it stays semantically sound for machine readers and accessibility purposes.

So here’s the combined title mark-up (without style hooks):

<h2 class=”entry-title”>
<a href=”..”>Start Making Sense</a>:
<span class=”entry-subtitle”>Wordpress, SEO and pimping my blog</span>
</h2>

And the styled and un-styled versions look like this:

It’s subject to a conditional statement that checks whether the custom field has been populated, so I don’t have to rush through adding them to all my posts and those without subtitles yet won’t look broken.

This does mean however that it’s only implemented by the theme, not by the publishing platform. This means it will only be seen by visitors to the blog, it isn’t published to the RSS feed, for example, so syndicated readers won’t see it.

Sitemaps

Another improvement for SEO purposes was to add an XML sitemap.

I recently added a HTML sitemap in the form of my index page, but then saw Google’s Matt Cutts discussing HTML versus XML sitemaps who concludes that if you can have both, then do so.

It’s very easy to generate a sitemap and according to Matt’s video a simple list of URLs would suffice, but I looked up the Wordpress Plugin Directory for ready-to-roll solution and found the Google XML Sitemaps which does the job for me.

It’s fully automatic so it doesn’t need my attention once I’ve installed it. It generates an XML file based on my current posts and pages and automatically updates whenever I publish or modify anything new.

It also sends notifications of updates to the main search engines – Google, Bing, Ask.com and Yahoo! – and has a number of advanced options concerning prioritising pages and setting the frequency of how often certain pages should be checked again by crawlers for updates.

The XML file it generates sits at http://blog.marchibbins.com/sitemap.xml (for me) and there’s an option to attach an XSL file for styling, but I choose just to use plain XML.

Social Bookmarking

I got to browsing some of the other popular plugins and temporarily tried out Sociable which adds typical social bookmarking links to the bottom of each post.

It supports nearly 100 different APIs and the drag-and-drop interface and nice and easy to work with.

I chose not to use it in the end, I thought it was a bit over-the-top for my site.

There’s a lot more in the directory though, like Add to Any, SexyBookmarks and ShareThis – though they’re not hard to write anyway, if I eventually change my mind.

Tweaks

I made a few other minor changes here and there, some CSS changes and design tweaks.

I threw an RSS link into the header and dropped the amount of posts that show on my front page.

I realised my posts can tend to get pretty lengthy and often have embedded videos or Flash content, so showing ten of those (the default) made the page quite heavy.

I started using the ChaosTheory theme when my blog was freely hosted on Wordpress.com and I’ve stuck with it since, making odd modifications to both server-side code and the front-end as and when. To use it on a Wordpress.org blog I found a port hosted by Automattic but it’s never been quite right nor entirely compliant with mark-up or CSS standards, I’ve only really maintained it for consistency.

Recently though I found the Unicorn ‘Universal Conformance Checker’ from the W3C which combines all the common validation checks and also has a MobileOK Checker which looks at the ‘mobile-friendliness’ of a site.

Shamefully my blog scores an awful 0/100, due to links with “_blank” targets, the amount of images embedded, the presence of Flash and Javascript and a ton of other things.

Over time it’ll be my aim to get all that sorted. Hopefully without having to start my own theme completely from scratch.

Reading through Mark’s articles at webBackplane, I noticed he has a very simple tutorial on how to create a basic FOAF profile. Being so straightforward, as RDFa is meant to be, and seeing how I wrote about FOAF in my dissertation almost three years ago now, as well as now having full control of my blog (now that it’s a Wordpress.org installation rather than the free option) – I’ve no excuse.

In my last post I discussed RDF vocabularies, sets of agreed-upon and unambiguous terms that allow developers to structure otherwise ‘mundane’ structureless content by inserting definitions and making references to which machines and applications can follow to infer meaning and understand topics of any kind. There I gave an example that pointed to a specification used to structure book reviews.

FOAF is the Friend of a Friend vocabulary, an RDF and OWL ontology, used in the same way, but specificially to describe people, their activities, interests and their relationships to other people.

Created around mid-2000, it is now maintained by The FOAF Project, which is considered to be one of the earliest – if not the first – Semantic Web application.

The idea is that given that anyone can put RDF(a) on their Web site, equally, anyone can describe themselves using FOAF. By doing this they are creating themselves a FOAF profile, thus have joined the linked network of people who have already done the same. These people can then begin to create links to each others FOAF profiles and start to create a social network of friends, without the need for a centralised database or website to do it for them.

Then here’s where RDFa steps in, which now allows developers to implement structured data straight into their HTML mark-up, wrapping existing or new content with an extended set of attributes, meaning they no longer have to host a separate RDF file and rely on either applications indexing that file or creating a link to it from another page to point to it.

Creating a FOAF profile

I already have an ‘About’ page on this blog – a bit of blurb about who I am and what I do. So it’s here that I’m implementing my FOAF information.

As said, there’s no need to link to a separate RDF file if you use RDFa, so really you can add the metadata anywhere, in your headers or footers for example, but that About page is the most relevant place for me and already contains the information and links I want to share anyway.

Firstly I wrap the text in a div tag that defines the FOAF namespace and declares that this div is a ‘Person object’, that the contents of this div describes a person. This is done by referring to the foaf:Person type of the FOAF vocabulary:

<div xmlns:foaf=”http://xmlns.com/foaf/0.1/” about=”#me”
typeof=”foaf:Person”>
<p>Hello.</p>
<p>My name is Marc Hibbins.</p>
…
</div>

I also use the about attribute with the value #me which is a useful convention to easily enable people to create links to me, more on this later.

The FOAF Person object contains a lot of properties to describe you personally, what kinds of activities you are involved in and terms that create connections to sites or documents relating to you.

Now that my object is created I can start annotating the text with some of these terms, for example my name:

<div xmlns:foaf=”http://xmlns.com/foaf/0.1/” about=”#me”
typeof=”foaf:Person”>
<p>Hello.</p>
<p>My name is <span property=”foaf:name”>Marc Hibbins</span>.</p>
…
</div>

And then some links, FOAF has terms for to define your blog and homepage URLs:

<a rel=”foaf:weblog” href=”http://blog.marchibbins.com/”>My blog</a>
<a rel=”foaf:homepage” href=”http://www.marchibbins.com”>My site</a>

It’s also common to have an image, so likewise if I had I would attach the foaf:img term. The full A-Z index of terms can be found on the specification: http://xmlns.com/foaf/spec/.

FOAF allows you to connect to other online accounts that you own. Mark’s tutorial has the following example to attach his Twitter account to his person object:

<span rel=”foaf:holdsAccount”>
<span typeof=”foaf:OnlineAccount”>
<a rel=”foaf:accountServiceHomepage”
href=”http://twitter.com/”>Twitter</a>
<span property=”foaf:accountName” >markbirbeck</span>
</span>
</span>

The foaf:holdsAccount definition creates a relationship between the typeof=”foaf:Person” object and the typeof=”foaf:OnlineAccount” object that follows (the above mark-up would be contained within said Person object). Note the foaf:holdsAccount span allows for multiple foaf:OnlineAccount objects inside. The foaf:accountServiceHomepage term defines the service homepage, Twitter’s home page in this case and the foaf:accountName property declares Mark’s username.

As you’ll notice (as he does, too) although its machine-readable it isn’t particularly human-readable. Well it is, but it’s not all that nice. So instead he uses this formatting:

His inane comments are available on his
<span rel=”foaf:holdsAccount”>
<span typeof=”foaf:OnlineAccount”>
<a rel=”foaf:accountServiceHomepage”
href=”http://twitter.com/”>Twitter</a>
account. His ID is ‘
<span property=”foaf:accountName”>markbirbeck</span>
‘.
</span>
</span>

This is better for human reading, though I still think a little convoluted. All I want is a single link, just like I already have. As I’ve said, RDFa should have no effect on my content – its workings should be hidden to the reader.

So in my mark-up, rather than the rel attribute on a tags and using in-line values (values found immediately between the a tags), I use the property and content attributes on spans:

<span rel=”foaf:holdsAccount”>
<span typeof=”foaf:OnlineAccount”
property=”foaf:accountServiceHomepage”
content=”http://delicious.com/”>
<span property=”foaf:accountName” content=”marchibbins”>
<a href=”http://delicious.com/marchibbins”>View my Delicious
bookmarks</a> – most things are about the Semantic Web…
</span>
</span>
</span>

This allows me to keep my existing prose and is still machine-accessible.

I mentioned being able to connect to other people’s FOAF profiles, this is done by attaching the foaf:knows term to a link to someone’s similar such page:

<a rel=”foaf:knows” href=”http://www.w3.org/People/Ivan/#me“>Ivan Herman</a>

Note here that Ivan Herman has employed the #me mechanism in his FOAF URI to connect directly to his profile information, rather than to the whole page which contains that information.

I’ve decided not to connect to friends or colleagues here in this way, again it wasn’t in my original content and also I use a similar technology instead, called XFN, in the footer of my blog pages. XFN deserves a blog post to itself (that hopefully I’ll get time for), have a look a the source and you’ll see similar rel attributes there for now.

My FOAF profile

So here it is, abridged but with all the RDFa shown:

<div xmlns:foaf=”http://xmlns.com/foaf/0.1/” about=”#me”
typeof=”foaf:Person”>

<p>Hello.</p>
<p>My name is <span property=”foaf:name”>Marc Hibbins</span>.</p>
<p>I’m an interactive and digital media developer, I build Web applications and
RIAs primarily with tools like Flash, Flex and AIR.</p>

<p>
<span rel=”foaf:holdsAccount”>
<span typeof=”foaf:OnlineAccount”
property=”foaf:accountServiceHomepage”
content=”http://delicious.com/”>
<span property=”foaf:accountName”
content=”marchibbins”>
<a href=”http://delicious.com/marchibbins”>View my Delicious
bookmarks</a> – most things are about the Semantic Web,
gathered as dissertation research…
</span>
</span>
</span>
</p>

<p>
<span rel=”foaf:holdsAccount”>
<span typeof=”foaf:OnlineAccount”
property=”foaf:accountServiceHomepage”
content=”http://friendfeed.com/”>
<span property=”foaf:accountName” content=”hibbins”>
I use <a href=”http://friendfeed.com/hibbins”>FriendFeed</a>
</span>
</span>,

<span typeof=”foaf:OnlineAccount”
property=”foaf:accountServiceHomepage”
content=”http://twitter.com/”>
<span property=”foaf:accountName”
content=”marchibbins”>
<a href=”http://twitter.com/marchibbins”>Twitter</a>
</span>
</span> and

<span typeof=”foaf:OnlineAccount”
property=”foaf:accountServiceHomepage”
content=”http://last.fm/”>
<span property=”foaf:accountName”
content=”marchibbins”>
<a href=”http://www.last.fm/user/marchibbins”>Last.fm</a>
</span>
</span> etc etc..
</span>
</p>

<p>
<a rel=”foaf:homepage”
href=”http://www.marchibbins.com”>www.marchibbins.com</a>
</p>
</div>

Notice that I’m actually using two foaf:holdsAccount blocks – you can, of course, contain all foaf:OnlineAccount objects within a single relation, but it seems that Wordpress won’t allow me to do so. When I hit return to start a new paragraph it automatically closes the wrapping span and p and starts a new paragraph – so I’ve had to use two. Otherwise the p tags would be inside the span (rather than the other way round) but again, the MCE doesn’t show p tags in order for me to edit them in that way.

Similarly, Wordpress will wipe clean all your span tags if you switch from HTML to Visual mode – so watch out for that. It also doesn’t output nice, clean indented HTML in the final page, which is a shame.

Find the full version here.

Validating RDFa

How do you know that any of your metadata is correct – that it is machine-readable?

I took Mark Birbeck’s recommendation and used the Ubiquity parser bookmarklet to validate my RDFa. Simply publish your mark-up and hit the button and you’ll see what an RDFa parser sees.

Hopefully it is in fact all correct. I wasn’t too sure if multiple foaf:holdsAccount blocks would be acceptable, but the Ubiquity parser shows the same results nethertheless – likewise with my use of property and content spans over rel attributes. That said, if anyone has opinions otherwise – let me know!

The free blogs are great for getting started – and that’s not to say only for ‘getting started’, I used their solution for two years without a single problem. I upgraded to have more control, with regards to embedding media, handling uploaded files and because I’m keen to get something on my http://www.marchibbins.com/ domain soon – previously it redirected to my Wordpress.com by web forwarding.

I obtained my hosting from WebFaction and without too much of a sell, they’re pretty awesome. They offer an unlimited number of sites, databases and email accounts, SSL support, SFTP, SSH and full shell access – you can literally install any applications you want on there.

As well as that they have a good number of applications ready to go via their control panel. One of these is Wordpress.

I didn’t want to start this new blog from scratch and I didn’t want posts duplicated on the new domain and still existing on my free blog – this is a bad thing. I also didn’t want to delete the old posts and leave an ‘I have moved’ notice, because I’m aware of incoming links that would return HTTP 404 (file not found) errors. I wanted to keep all of my posts, preferably hosted now on my new hosting, maintain the old links even though the web address would be different – and do all of this seamlessly so no-one would really realise. My solution was in two parts.

Domain Mapping

One of the great things Wordpress offer is Domain Mapping, which basically means your blog can be at Wordpress.com but it looks like it is somewhere else – on another domain (support page here). It’s a paid upgrade and requires you having a domain registered first, of course.

It makes use of the ‘Domains’ feature, you can access it from the Dashboard, which can be set to forward all requests to your blog to the equivalent URLs on a new domain. For example, visitors to http://yourname.wordpress.com/about/ would be automatically redirected to http://yourname.com/about/, same as visiting http://yourname.wordpress.com/2009/04/29/post would take you to http://yourname.com/2009/04/29/post.

To do this (as the support guides you) you need to first update the nameservers with your domain registrar, which means the domain name will point to Wordpress’ nameservers instead of theirs. The Wordpress nameservers are as follows:

ns1.wordpress.com
ns2.wordpress.com
ns3.wordpress.com

And the if the registrar needs the IP addresses:

72.232.101.25
76.74.159.137
64.34.177.159

Changing the DNS settings can take up to 72 hours to propagate, so don’t expect to see results immediately – but it’s often less.

Once this is done, you should be seeing Wordpress.com at your domain name. Then in the Domains section of your blog Dashboard (under Settings), add your new domain. Here you will be asked to purchase the Domain Mapping upgrade here if you haven’t already. Then set that new domain as your primary URL and from then on, all requests should be forwarded!

Subdomains

For my blog though, I wanted to map to a subdomain, specifically http://blog.marchibbins.com/ rather than the http://marchibbins.com/ top-level domain. To do this you don’t change nameservers, instead add a DNS CNAME at your DNS provider (this is on the support page, too).

Doing this manually will look something like this:

subdomain.yourname.com. IN CNAME yourname.wordpress.com.

In my case, I implemented a DNS override with my WebFaction hosting (a feature that they offer) and after 24 hours I could see Wordpress.com, so upgraded and added my domain name in the same way. That’s the first part – and this meant any old links (and links within posts to other posts) would be still find their destination.

Switching to Wordpress.org

As I said though, this simply forwards your free Wordpress.com to your new domain. This doesn’t even require any hosting, just a domain registration. But I wanted the features and control that Wordpress.org offers.

Now that the domain mapping was in place, I removed the DNS override, meaning that the ‘blog.’ subdomain no longer pointed to Word press. Instead, I installed the full version of Wordpress 2.7.1 there.

Then I exported all my blog posts, comments, categories, authors – everything – from my old blog (this is done through the Dashboard with a single XML file) and imported it into my new blog. I also found my old theme and updated all my links etc – basically rebuilt my old blog on the new platform. This is super-easy and easily accomplished before the DNS has updated.

This means that all requests are still forwarded as before, but instead land at my newly installed Wordpress.org blog and the relevant post there!

Doing this does have some dependencies – the posts need to have been imported, they cannot be republished, because this would give them new unique identifiers and the forwarding wouldn’t find them as a result.

Similarly, the the structure of your permalinks must be consistent – requests are forwarded without regard for what is at the destination, the URL string is appended verbatim. This means if you used something like http://yourname.wordpress.com/2009/04/29/post you can’t then use http://yourname.com/?p=50.

It also means the previous blog is now hidden, done and dusted.

New comments to your new domain won’t be added to your old blog, though that shouldn’t really matter as it’s inaccessible now – so the posts aren’t ever seen to be ‘out-of-date’. The stats will also cease, as no-one is visiting that blog anymore, they’re visiting the Wordpress.org installation – so install a stats package there!

Another handy outcome of the mapping means that RSS subscribers should still receive updates. Even though the Wordpress.com blog feed is no longer being updated, the request for http://yourname.wordpress.com/feed/ is forwarded to your new blog’s feed – and that’s how they’ll be seeing updates, hopefully including this post!

As far as I’m aware, I’ve successfully mapped my Wordpress.com blog to my new domain. This means that any visits to my old blog will redirect you to my new domain automatically. This also means that any linking to those old posts, any bookmarks and (hopefully) RSS subscriptions should all still be OK – they too should ultimately get to their intended destinations.

Having said that, I’m not sure if all RSS readers will be happy with it, so if you do subscribe please update the feed to http://blog.marchibbins.com/feed/.

See you there!