mathayward.com blog

How do I get to the top of Google?

admin — Mon, 31 Jan 2011 15:53:09 +0000

As a Web Developer and Designer, the one question I am guaranteed to be asked on a daily basis is “How do I get to the top of Google?”.

Even though this is a completely different skill set to what I usually offer, I do have some experience of SEO (Search Engine Optimisation) and so, in an attempt to prevent me repeating the same answer over and over, here it is for you all to see.

No guarantees

Google’s page ranking formula is, as it should be, a big secret. On top of that it changes regularly, to prevent people from working it out and manipulating it. This means that there is actually no way of guaranteeing that you will get to the top of Google’s search results and even if you do, you are not guaranteed to stay there!

The best thing you can do is to create a well-built and informative website that web users will be pleased to find. Google loves this kind of website, well at least Google’s search formula does.

So basically, optimising your site for Search Engines is less a case of finding out some quick tricks and more a case of building a good website!

I’m a Developer, what can I do?

Any developer worth their salt will already do a lot of things that Google likes, without even thinking about it, but here’s a list anyway. (Apologies if you know all of this already)

Start with the header

Your website’s header isn’t just a load of code added in by Dreamweaver (which you probably shouldn’t be using anyway, but that’s a whole new argument), it holds some very important information, a) for the web browser and b) for search engine robots.

You should always include a DocType, Title, Meta Description, Author, Keywords, Language and Content-Type.

You should also ensure that all CSS styling, Javascript etc. is in external files that are referenced in the document header.

Use positional elements and CSS

There is only one excuse for using the

tag in a website, and that is this: “My content is in tabular form”, if you openly admitted to coding with tables at a Web Development conference or in the offices of a reputable Digital Agency, the least you should expect is a verbal slap in the face!

On a similar note, it’s 2011, so you shouldn’t be using , , , or tags either!

Images should be images!

That means if you’ve got a navigation that uses a beautiful font, you have the following choices:

Use CSS to replace the textual element of the link with an image

Use font-replacement (such as Cufon or Typeface-JS)

Use the @font-face CSS rule

All of these are fine from an SEO standpoint, but really you should now be using @font-face, as it’s supported by over 90% of user’s browsers (including IE6!)

Obviously you will most likely have some images on your site, but unfortunately a search engine robot won’t be able to see it and understand what it is. For this reason, and to allow sight-impaired users to use your website properly, you should ALWAYS include the “alt” and “title” attributes in your tags. These should fully describe the image and, if possible, include keyword phrases.

Get it in order

The order in which you put a web page together is also important. As a search engine robot will use it to find other pages on your site, make sure the navigation is the first, or almost the first thing that appears after the tag.

As well as that you should ensure that your important content appears in your code as early as possible.

Always use header tags (

,
etc.) and paragraph tags for your website copy, and ensure these cascade properly.

A good way to test if you have everything in order is to turn off CSS and reload the page. When the page reloads, it should read like a simple document, with all content in order and all headings making sense and in the right places.

Write valid code

This one should go without saying, but it’s amazing how often I see websites that don’t pass simple validation. Google likes valid code, it’s easier for its robots to read, and therefore easier for Google to index your website properly. You can test the validity of the pages of your website using W3C’s validator tool.

Your website should also meet at least Level A of WCAG 2.0 (The Web Accessibility Initiative’s guidelines for making the web accessible to people with disabilities) , not only because it’s best practice (and, at least in the UK, the law), but also because meeting these guidelines means that all the important information in your site will be readable by search engine robots too.

Avoid Flash

Flash is the nemesis of SEO experts. Although there are ways around it, the biggest problem is that Flash content is not indexable, and will usually all be contained in one page of a site.

If you absolutely must use Flash, then also build HTML-based alternative content which will be served to search engine robots and users without Flash installed.

Never used a “Flash intro page”, as a search engine robot will not navigate past it to read your actual content.

Friendly URLs

URLs are also important to Google and it prefers URLs which are made up of real words, rather than a random string of characters. For instance, it’s obvious what “http://www.cheese.com/cheddar” is about but not as obvious what “http://www.cheese.com/index.php?p=1263s” is about.

If you are using a system that will only allow no friendly URLs, it is possible to use an .htaccess file to rewrite the URL in the browser. More information URL Rewriting

I’m a Copywriter, what can I do?

Writing the copy for a website is a tough enough job as it is, so adding in SEO objectives will only make it more difficult. The least you should do, is make all forms of content relevant to each other. For instance, a heading should reflect the content of the entire page and a subheading should reflect the content of the paragraph(s) below.

If you want to take it to the next level, here are some things to consider during the copywriting process:

Keyword Density

Choose no more than 3 keyword phrases to optimise each page for and try to include these in your copy. Don’t make the mistake of packing your copy with these phrases, Google will spot this and ignore it, or in the worst case, ignore your entire website!

A good benchmark to work to is 7-10% of your copy being keyword phrases.

Keyword Distribution

Don’t put all your eggs in one basket. You chosen keyword phrases should be distributed throughout the content of your website. Make sure they appear in headers, subheaders, links, paragraphs etc.

Try to get your keyword phrases at the beginning of paragraphs, especially the paragraphs at the top of the page.

This table shows the relevancy of different types of content/code to search engines. The relevancy improves as keywords are found in a larger variety of these places.

Content Type	Relevancy to Search Engines
title	Very High
h1	Very High
h2	Medium
h3	Medium-Low
Links	Very High
Emphasis (bold, italic etc.)	Medium-Low
Keywords at the beginning of paragraphs	High
Keywords Meta tag	Medium-Low
Alt Tags	Medium-Low

Content Quality

As inbound links are so important to SEO, your content should inspire other website owners to link to it. If Google’s search engine robots find your website through a link on one other website, that’s quite nice, but if it finds your website 30 times from 30 other websites, that’s even better!

As a rule, your copy should contain a minimum of 250-300 words to ensure it is a) worth reading and b) large enough to contain a good quantity of keyword phrases.

Emphasis

Another nice thing to do is to emphasise a couple of instances of a keyword phrase within a page’s content, using bold or italic text. Don’t emphasise every instance, and try to give a reason for emphasising the phrase, you could even emphasise the entire sentence that the phrase appears in.

Internal linking

Consider linking to other pages on your site through links in the body copy. If you do this, you should link to pages that share a keyword phrase or two, to improve page ranking for both pages.

Keep it fresh

Update your content regularly; there is nothing worse than a website that is stale. This can be achieved by having a news section or a blog.

Help Google find you

All of this stuff will help, but it doesn’t hurt to give Google a bit of a nudge. You can help Google find you in a few ways…

Trusted sites and directories

Although there are over 20 billion websites, Google only trusts two of them; dmoz.org and yell.com. So you should definitely get your site listed on these.

And, while Google doesn’t “trust” them, it is also practical to add your site to some other online directories, if only to improve the number of inbound links to your site.

XML Sitemap

Google Webmaster Tools allows you to upload an XML sitemap, which Google will use to help index your site. The sitemap consists of a list of all the pages on your site, when they were modified, how often they are updated and how important the page is to the site.

Create an XML sitemap and submit it to Google. You can also submit one to the other major search engines.

Get some friends

Inbound links make a massive difference to your website’s ranking, so encouraging people to link to your content is a good idea. You can do these either by exchanging links with other websites, or, even better, creating content that people will instinctively link to.

A Conclusion

Although it’s never guaranteed, there are a lot of things you can do to “Get to the top of Google”, but there’s no quick fix.

If you’re really serious about your website and it’s search ranking, don’t just do the odd thing, do everything you possibly can. Using a combination of all the ideas in this article will help you to reach your ultimate goal… Be top of Google

NB Although this article refers to Google throughout, most, if not all, search engines use similar models to Google and therefore will present similar results.

Reply to your own Tweets

admin — Thu, 09 Sep 2010 17:28:20 +0000

If you’re a Twitter user you’ll know that every Tweet you read has a reply link on hover. (Like this tweet from @smashingmag)

But what if you wanted to reply to your own tweet, for whatever reason? For example, you wanted to add to a tweet you’d previously posted. Hovering over the tweet does not give you this option, either in your feed or in your profile.

So I made my own bookmarklet to do the job. Saving the link at the bottom of the page as a bookmark (by dragging it onto your Bookmarks Toolbar) means that you can easily reply to your own tweets, following these simple instructions:

1. Find the tweet you want to reply to and click the relative posting date (e.g. about 2 hours ago):

2. You’ll be navigated to the individual page for that tweet. Simply click the “Reply to Own Tweet” bookmark in your Bookmarks Toolbar and you’ll be redirected to the twitter homepage, with the “What’s happening?” field ready to go.

3. Write what you need to and click “Tweet” and you’re done!

(Now if you click “in reply to mathaywarduk” you’ll see the tweet that you’ve replied too.)

Here’s the link

Reply to Own Tweet »
(drag it to your Bookmarks Toolbar)

Position Fixed Tutorial

mathayward — Mon, 19 Apr 2010 10:25:09 +0000

If you’ve read my Position Fixed Showcase blog post, you’ll know that I’ve noticed a recent trend for fixed position elements and background image in website design. Here’s a tutorial on how to achieve this effect yourself.

Fixed Background

This is the easiest fixed position effect to achieve.

1. We’ll start by building a basic webpage in XHTML and CSS. The webpage has a floated two div layout (navigation and content).

XHTML

<div id="nav">
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Link 1</a><li>
<li><a href="#">Link 2</a><li>
</ul>
</div>
<div id="content">
<p>A lot of content that would cause the page to scroll…</p>
</div>

CSS

body {
background: url("bg.jpg") no-repeat;
}

#nav {
background: #FFFFFF;
width: 300px;
margin: 10px 0px 0px 10px;
float: left;
}

#content {
background: #FFFFFF;
width: 450px;
float: left;
padding: 10px 10px 10px 10px;
margin: 10px 0px 10px 20px;
}

This will give us something like this:

But you’ll notice that, when you scroll through the content, the background image ends, leaving a lovely white space!

2. So the solution? Fix the position of background image. And this is really simple. Simpy change the line of CSS that adds the background image to the body.

CSS

body {
background: url("bg.jpg") no-repeat fixed;
}

Now, as you scroll through the content, the background image does not move!

View a demo

Fixed Elements

Unfortunately, at the moment, when scrolling through the content, the navigation disappears, and to use it, you’ll have to scroll all the way back up. So let’s fix it to the browser window.

1. Using what you already have from before, add “position: fixed” to the navigation and position it at the top left of the browser window.

CSS

#nav {
background: #FFFFFF;
width: 300px;
margin: 10px 0px 0px 10px;
float: left;
position: fixed;
top: 0px;
left: 0px;
}

2. Oops! The nav is definitely fixed to the top left of the browser window, but it’s also obscuring the content!

No problem, add some left margin to the content and you’re sorted.

CSS

#content {
background: #FFFFFF;
width: 450px;
float: left;
padding: 10px 10px 10px 10px;
margin: 10px 0px 10px 320px;
}

View a demo

Position Fixed Showcase

mathayward — Thu, 08 Apr 2010 21:00:45 +0000

A recent trend I’ve noticed in website design is the use of fixed position elements and backgrounds. Fixing the position of an element within a browser window adds emphasis to it and draws the users attention. With backgrounds, using the CSS attribute, position: fixed, means that for large scrolling websites, background will not have to be repeated.

Here are a few of the sites I’ve noticed that use this attribute, and, if you’re interested, here’s a tutorial for doing it yourself.

Fixed Elements

Crush + Lovely

A fixed navigation means the user will never lose their way.

FRESH01

Another fixed navigation, but also check out the blue circles as your scroll, very clever.

Information Highwayman

Simply fixing the logo to where you are, means you won’t forget what site you’re on if you find something interesting.

James Charlick

James Charlick uses fixed positioning to achieve a layered effect.

Keithar

Making a CV link the most prominent thing on the site is never a bad idea…

Proclaim

Main menu and recent tweets are always in the users eyeline.

Silly Poems

Main menu follows the user as they scroll through this one page website.

Fixed Background

Nomad Festival

A small fixed background, only at the top of the page, sets of the otherwise drab background colour.

Forme Bikes

Using a fixed background, means this huge background doesn’t need to be even bigger…

English Squash and Racketball

This site has won a lot of awards and it’s easy to see why. Attention to detail means you’re not staring at someones crotch while you read the latest news!

Meninos

Main menu and recent tweets are always in the users eyeline.

My Brain Art

A well-designed site, using a fixed background means that the content is always well framed.

Preloaded

Using a tiling and fixed background for an even quicker download time!

Running in Pants for Haiti

mathayward — Mon, 18 Jan 2010 15:52:08 +0000

On 15th January 2010 Tim Beaver ran through Old Market Square, Nottingham in his pants to raise money for Haiti’s Earthquake survivors.

After raising a thousand pounds in just 24 hours, Tim’s efforts managed to get featured in the Nottingham Evening Post, on BBC Radio Nottingham and on the One Show.

If you would like to donate go to: www.justgiving.com/Slim-Beaver

Jack Peñate in Nottingham

mathayward — Tue, 27 Oct 2009 15:52:55 +0000

On Sunday night I was invited to photograph Jack Peñate at Nottingham Trent University, part of his UK tour.
Jack was awesome, as is his new album, “Everything is New” and the support act, Theophilus London was crazy…in a good way.

Hayley and Dean’s Wedding

mathayward — Sat, 18 Jul 2009 15:55:18 +0000

Last week I set off to Beverley in East Yorkshire to photograph Hayley and Dean’s wedding. Although this was a registry office affair, the local authorities had chosen an elegant 18th century house as the place to carry out civil ceremonies, so I managed to get some nice shots with a bit of character.

The reception took place at Beverley Rugby Club where, I think, the best photos were taken round the back of the clubhouse, amongst the bins and empty gas tanks.

Oliver! by Stage Productions

mathayward — Fri, 27 Feb 2009 15:56:28 +0000

Earlier this month I left work early to travel to the Regent’s Theatre in Stoke-on-Trent where I photographed the final dress rehearsal of Oliver!, by Stage Productions.

For an “amateur” company the quality of acting and production was excellent, so much so that I went back to sit in the audience for the Saturday performance.

Much searching and finally a result

mathayward — Fri, 23 Jan 2009 15:57:42 +0000

After much searching on my old computer I finally found my Graphic Design work. For some reason I had saved it onto the drive I had partitioned specifically for Program Files.
Anyway within a couple of hours of finding them I have now added a graphic design section to the website.
I also spent some time updating the web design section.
This weekend I’m hoping to add some new features to the site, including a comments function for each page and make the whole site database driven to save me time in future.
Keep ‘em peeled!

Cat & Geoff’s wedding

mathayward — Mon, 27 Oct 2008 15:58:28 +0000

At the weekend I was honoured to photograph my friends’ Cat and Geoff’s wedding at the Derby Conference Centre, a Grade II listed, 1930’s Art Deco building.

Unfortunately we were hit with wet weather so couldn’t take any outdoor photographs, but the indoor ones turned out quite well anyway.

Besides the best shots were to come later on at the reception when the Groom and his band, formed just the wedding, played a small set to get everyone dancing. Not to mention some members of High Peak Samba who turned up with their plethora of percussion instruments to wake us all up.

Stacey and Jason’s wedding

mathayward — Fri, 05 Sep 2008 16:00:09 +0000

Last weekend I shot my first wedding. Stacey and Jason are relatives of friends of mine and I was honoured to be asked to take their wedding photographs.
Being my first attempt at the job I was quite nervous in the run up to the day, but having my Brother as “assistant” really helped me to overcome that, and I think my shots came out quite well.
The wedding venue was the Corus Hotel in Elstree, a Tudor-style building, full of character and set in 10 acres of natural woodland, so locations for shots weren’t hard to come by.
I have another wedding to shoot in October for some very good friends of mine, then hopefully I should get some more work off the back of these.
Update: I have 4 more weddings booked in to shoot for 2009/2010!

Cotswold wildlife park

mathayward — Fri, 08 Aug 2008 16:00:39 +0000

For the firs time in what feels like an eternity I had nothing to do at the weekend, so I decided to pop to Cotswold Wildlife Park with my girlfriend.
The park had an abundance of species of wildlife set in some fantastic gardens, meaning photo opportunities were rife.
After many attempts I managed to get a decent photograph of a Squirrel Monkey which just didn’t seem to want to sit still!
But even more pleasing were the pictures of the Burrowing Owl and Eagle Owl.

A weekend in Dublin

mathayward — Sat, 02 Aug 2008 15:59:14 +0000

I’ve just got back from Dublin where I spent last weekend. Not being a fan of stout I was very lucky to find a pub that served something other than Guinness, I nice pint of Bass, very tasty.
We managed to visit the Guinness Storehouse, Dublin Castle, Christchurch Cathedral in the weekend as well as the pubs of Temple Bar which I found much more interesting. Here are a few shots I took in Ireland’s capital.

Holiday in the Algarve

mathayward — Fri, 25 Jul 2008 21:19:42 +0000

Being invited to Portugal by the girlfriends parents when you haven’t met them yet can be quite daunting, but the prospect of a bit of sunshine helped me to say yes. I managed to meet them before going which, thankfully, put my mind to rest.
We stayed in a villa outside Portimão, which luckily had a pool, because the 36°C temperatures were often unbearable. Unfortunately with the villa being in the middle of nowhere, opportunities to whip out my trusty Canon were few and far between, but I managed a few, including quite an impressive one of the villa’s chimney!

A tartan spring

admin — Thu, 24 Apr 2008 16:02:56 +0000

The Highlands of Scotland is perhaps the most breathtaking place I have ever visited.
With wilderness around ever corner, beautiful old buildings and horned beasts, plenty of photo opportunities arouse.
We stayed in an old Lock Keepers cottage on the Caledonian Canal, which left us within easy reach of Loch Ness, Inverness, Ben Nevis, Fort Augustus and Fort William.
On the way home I managed to snap some pictures at Fort George before the weather changed and we were caught in a spring snowstorm, which left the poor baby lambs feeling a bit nippy!