Toby's Technical Ramblings » html

Canonical and Base URLs

Toby — Wed, 25 Jan 2012 10:30:43 +0000

Canonical URLs

According to Wikipedia the word canonical in a Computer Science sense means “the usual or standard state or manner of something”, in terms of web development canonical URLs are the preferred URLs as picked by the web developer. So when a website has multiple URLs for the same content specifying a canonical URL tells search engines which link they should display to the public.

To use canonical URLs you should place something like the following in the head of your document;

Unfortunately this is only a signal, not a directive – so search engines don’t need to follow this, but from what I can see it appears to be a pretty strong signal.

What is cool is that the canonical link can point to another domain alltogther – this could be useful if you don’t have access to do other forms of redirection.

Base URLs

Base URLs let the web developer specify a documents base URI explicity, this ties in nicely with canonical links which can be relative if you wish and can help with duplicate content issues for linked content coming from your site.

To use base URLs you should place something like the following in the head of your document;

At the first pass you are probably thinking that this is the exact same as the canonical URL we wanted to include, the difference with this is that then we do something like;

And this would relate to http://example.com/img/myimg.png – pretty cool eh?

This will basically mean that your canonical URL can be replicated throughout relative links in your site, which improves the chances that search engines will index the URL you want them to index.

I don’t care about SEO – why should I do this?

Some people just don’t care about ranking well in search engines, and that is fine, but I still think you should look into implementing these tags were appropriate on your website – here is why.

I am currently working on a legacy project that is a site that accepts multiple domain names, it then uses some database magic to display different sites depending on the domain. Simple enough. The only issue is that the original developers didn’t think about the need to provide a canonical URL, so b.com/a/b/c and x.com/a/b/c show the same content across different domains and unfortunately somewhere along the line Google has indexed ‘b’ as sitting under x.com instead of b.com – which just looks wrong (even if you don’t care about rank)

Granted this is just an edge base, but it is one of many that can be solved by the correct application of both canonical and base urls.

The W3C have released Web Application Privacy Best Practices – What do we do with it?

Toby — Mon, 08 Aug 2011 19:24:17 +0000

So the W3C have recently released a document entitled Web Application Privacy Best Practices, which I have to say I am more than happy about.

I really think that with most things in life, if you can follow a best practice (and so long as that best practice is sound) then you won’t go far wrong.

So I guess the first question I have to ask is, is this document sound? Well, of course it is, it is written by some of the smartest people in our industry and a lot of thought has went into it.

As it is the first public working draft we cannot expect the content to stay nailed down exactly as it is but I don’t think it would be jumping the gun to begin implementing those best practices mentioned in it.

Having read through the document a couple of times I don’t think there is anything too ground breaking in it, if you are a thoughtful web developer who tries to keep the end user happy then you are probably doing most of these things anyway.

One of the items I personally need to put more thought into is…

Best Practice 9: Retain the minimum amount of data at the minimum level of detail for the minimum amount of time needed. Consider potential misuses of retained data and possible countermeasures.

I try and maintain the minimum amount of data, but I never really consider how long I need that data for, any tips you have on how to judge this type of thing I would love to hear about in the comments or on twitter.

One thing I think is maybe missing from this document is some clarification and extended examples on some of the points, a lot of the points are left fairly open ended and open to interpretation which sometimes they need to be but perhaps some more examples and use cases would be beneficial. I think currently the document is open enough that developers could be making decisions in the spirit of the document but missing the point on some of the practices.

I will be following the steps outlined in the document for commenting – I suggest if you have any comments on it you do the same.

To wrap up then, I am glad a document like this has surfaced, it will make my life easier when making decisions and if the majority of web owners followed them it might make the world a better place!

Edit an option of a select menu using jQuery

Toby — Mon, 21 Mar 2011 19:07:08 +0000

I have read many articles that cover how to use jQuery to add and remove options from a select box but I couldn’t find one that covered how to edit an individual option.

I knew there had to be a way and the good people of Stack Overflow were able to answer my question.

Essentially what you need to do is use the option selector in order to grab the element you want, then it is fairly trivial.

$('#selectID option[value="knownValue"]').text('New Option Text');

So what we are saying here is for every element with the ID of ‘selectID’ look for an option with the value of ‘knownValue’.

Change the text of that option to ‘New Option Text’.

A use case for this (and indeed the reason why I was looking it up) is that if you have a collection of objects and you want to edit them dynamically by selecting them via dropdown then edit the fields you will most likely want to edit the ‘name’ field or some other field that represents the unique name which appears in the dropdown list.

If this is the case when you edit your name and hit save, assuming it is all done using ajax the value in the dropdown will no longer equate to the value stored in the database. This is a usability concern so you should use the method above to ensure that the option text of the dropdown gets edited accordingly.

Acronym and Abbreviation Tags

Toby — Fri, 11 Sep 2009 06:53:49 +0000

I think these are two of the most under used tags in HTML, which is a shame because really quickly you can provide some excellent functionality and really help your users out with very little effort on your part.

So, what are they?

The Acronym tag or to it’s friends is a tag that should encapsulate all acronyms used on your website. If you don’t know what an acronym is I would have to lol at you and pass you across to this website.

The Abbreviation tag, which has been nicely shortened (I see what they did there!) to is a tag which should be used around any text that is an abbreviated form of a longer word. I can’t think of anything even slightly funny, so if you don’t know what an abbreviation is then go here.

w3.org have the following to say on the subject of acronyms and abbreviations.

The ABBR and ACRONYM elements allow authors to clearly indicate occurrences of abbreviations and acronyms. Western languages make extensive use of acronyms such as “GmbH”, “NATO”, and “F.B.I.”, as well as abbreviations like “M.”, “Inc.”, “et al.”, “etc.”. Both Chinese and Japanese use analogous abbreviation mechanisms, wherein a long name is referred to subsequently with a subset of the Han characters from the original occurrence. Marking up these constructs provides useful information to user agents and tools such as spell checkers, speech synthesizers, translation systems and search-engine indexers.
The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression.

So now you know what they are and when they should be used, I guess I should write about why you should use them.

First off you would be scoring a really quick win as far as WCAG is concerned, checkpoint 4.2 to be exact.

Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]

Secondly, it is semantic – You could argue that this is getting really pedantic in your markup, but it makes sense because the words we encapsulate with these tags are different from normal text.

My third and final point on why I think you should be using it is because it is useful to the end user, accessibility aside it is just nice to get a really quick definition of what an acronym on your site is.

In the past I have found a lot of websites that would use a fairly specific acronym to their area of interest and they would wrap an around it and link off to wikipedia, when I think along with the context the actual acronym is mentioned in would be more than enough for most users, and those that still don’t know – there is always google!

I guess it is time I actually mentioned how you use them, it is really straight forward.

TIMA

That is it, easy eh?

I would like to know people’s opinions on this, but my thoughts are that you shouldn’t do too much extra styling to these elements other than what you would normally do to the text on your site. Let the browser handle it the way it wants to, which is normally with a dashed line underneath which I think is fairly universal and looks pretty nice.