How to SEOin2024
With me, Tim Hill
So here it is, the monster infographic that shows you the anatomy of a search engine optimized content page. Note I say 'content'. A website usually has two parts - content and lists of that contents (such as a list of blog posts or products) - for now we're talking about a content page because a list page needs to be handled in a slightly different way.
If you're on a small screen click on the image to open it into a new tab where you can zoom in and out and pan around.
The aim when search enging optimizing a content page is not to try and game the system, not to try and fool a search engine into thinking a page is about something it is not, but to make real content crystal clear so they know where to rank it ... and for what.
For this to happen a page has to 'hang together'. There have to be multiple signals in the code and content that make search search engines say "Yeah, this page is definitely about red widgets and there is nothing suspicious about it" because search engines have had to contend with a long history of gamers and spammers.
Achieving clarity is the aim of on-page SEO. Those who don't do it give the search engines reasons to doubt the topic of their page and doubt is a reason not to rank a page as high as it deserves.
So let's break down this infographic!
What's in the code affects not only how your page is displayed to visitors but also has an impact on how it is presented in the Search Engine Results Page (SERP). Its important to be aware that a page can look like it is search engine optimized - it can look like it has a clear title, subheadings, images and so on - but it is the code that search engine bots crawl so it is this that has to be right.
You can view the code of your own site by opening it in Firefox or Chrome and then pressing Ctrl+U. Your actual code is likely to be way more complex than that which I've used in my graphic. No problem, as long as all the key parts are there ... somewhere ... in the right order!
If the sheer size of your code makes you dizzy use Ctrl+F to search down the tags you are looking for.
Right! Let's start from the top ...
We want the URL of the page to be descriptive. So not http://mysite.com/page.php?id=767 but http://mysite.com/red-widgets-all-shapes-sizes/ . That makes more sense to search engines because it is content (text that can be indexed) which means something and is a first clue as to what the page is about.
The Doctype is a technical necessity. It tells browsers like Firefox and Internet explorer what version of html your website is written in so they can read it correctly. Extend the same courtesy to search engines.
Your Doctype might not be the same as the one in my example so don't copy it blindly. here's a useful article at HTMLGoodies to help you choose yours.
Almost invisible to your visitors it is displayed in the tab of the browser and used when a visitor bookmarks your page. It should be identical, or nearly identical, to the contents of your h1 tag (see below). Why? Because otherwise a search engine is going to wonder why you are giving it one title and visitors another ... suspicious!
I sometimes add a couple of extra pieces here which I don't include in the h1 tags - say the price of a product or the name of the blog - but text identical to the h1 tag will always be included.
The title tag carries serious weight - what is in it matters so long as it is backed up by other content on the page. If it doesn't seem to match the page looks spammy. If it does search engines will pay attention to what you write here so making sure your keyword phrase is there, ideally close to the start, is essential.
If its done right search engines will use it in the SERPs so apart from making sure your keyword is there it should be attractive and persuasive so users will want to click through and less than 90 characters long so it does not get cut off.
This is almost universally ignored by search engines as a ranking factor so why have it? Like the title tag it is often used in the SERPs so it can have a crucial affect on your click through rate (CTR). To make sure it fits keep it to less than 190 characters and to make sure it works make it every bit as attractive and persuasive as the page title.
As always get your keyword phrase in there - once, maybe twice, but certainly no more as it starts to look spammy.
For the most part I usually use the first visible text of the content after the title. This makes sense because the initial text that follows after the visible title should be like the opening paragraph of a well written magazine article, it makes you want to stick around and know more. Both your early visible text and your meta description are trying to achieve the same goal so being identical is an obvious option.
It also reinforces the importance of this 190 or so characters making it more likely that this is the text that will show in the SERPs when your keyword phrase is searched.
This is a key part in making your website mobile friendly and with search engines often marking up mobile unfriendly pages in the SERPs you don't want to look like the dinosaur in the room. However this isn't the silver bullet for all mobile unfriendly ills, you will need to make sure that your content is really readable to someone proding away at a small screen.
Google provides its own guide to making your site work on mobile along with a handy testing tool so you can check your efforts.
Like the doctype browsers like to be pre-warned as to what type of lettering their dealing with, especially when we're talking about non-english languages. But even if you're using English its possible that a couple of foreign characters will slip in as you fulfil your raison d'être! UTF-8 is a pretty good universal character set for English language websites.
As with doctype we're doing this for the browser, pages that don't display their text correctly get higher bounce rates and are unlikely to earn links, both of which are important SEO factors. And hey ... it may just make like a little easier for a search engine crawler so help it along!
Most webmasters don't realise that a single page on their website can often be displayed using different URLs. mysite.com/post.php?id=678 can be the same as mysite.com/my-lovely-content/. Sometimes search engine crawlers end up indexing the wrong URL or worse ... both. This can happen when 'rewriting' is switched off - perhaps by a developer while they were working on the site or an accidental click in an admin screen.
Its also an issue in lists (lists of products, lists of articles, etc.) but we'll come to those when we cover that type of page.
Indexed twice? No big deal? Very big deal in a day and age where search engines like Google hand out penalties for duplicated content.
The contents of the canonical tag says "Whatever URL you used to find this page, if it isn't this one then whoops, my bad, please use this one and don't index duplicates."
Page loading times are becoming an ever more important factor for search engines. Pages that load fast offer users a better user experience (especially on mobile devices) and search engines like better user experiences.
Chances are your website will use a number of external files to look the way it does. The main styling of a page is handled by one or more cascading style sheet files (ending .css) which covers things like font colours and sizes, layout dimensions and so on. There are often javascript files (ending .js) and other resource calls.
Being in the head area of the code we are saying, load these files before you load the main content. That makes sense because you want your site to look tip top from the moment it opens but there is probably plenty of other stuff that you don't need up front.
A huge amount of your css is likely related to content lower down the page - what is known as 'below the fold'. It doesn't matter if that looks like the contents of a trash can on rubbish collection day when the page loads. You can sort that out later while your visitor is consuming the 'above the fold' content.
The same goes for most javascript. It will let your visitors do funky things but they will need a few seconds to look around first. Let them do that while the scripts load.
Note the css split isn't absolutely essential. It depends how fast your page loads versus those of your competition and you can check this out using the Pingdom Website Speed Test. One of my sites doesn't split the css because it loads at least twice as fast as its nearest rival anyway but certainly 99.9% of Javascript can be delayed so worth doing as best practice.
Well, we've finally reached the visible part of the page! Image alt tags are often talked about so I won't labour on this. Just make sure it is a truthful but concise explanation of the image. I find the best way to do this is imagining how I would explain the graphic to someone who can't see it (say by 'phone) in a way that doesn't bore them rigid but gives them a fair idea of what it looks like.
If possible I'll be looking to get my keyword in there but not in a spammy way. Note in this example I don't say "mysite.com logo - suppliers of red widgets" as this isn't an accurate description of the graphic.
Better to put a picture of a red widget somewhere on the page and give that the appropriate alt tag.
This is something that is going to be repeated on every single page and at the top of the page so search engines are going to give these links weight. If they are that important to me that I repeat them so often they must be important to the site.
Even their ordering tells search engines which pages I prioritise. If you have a full menu with all the sub pages you are essentially giving search engines an idea of how your site is structured and that's helpful.
I left out the coding in the example to maintain better clarity on the infographic so here it is:
A couple of takeaway points here. Firstly, I use the <ul> <li> html coding to tell search engines that this is a list. Otherwise they see it as just a jumble of non-sensical links rammed together and that looks spammy.
Secondly I use text, not graphics, in the menu. Search engines can read text and text in links carries weight, it is part of optimizing the page being linked to.
Your menu might have given search engines some clue as to what your site's structure looks like but breadcrumbs clarifies it when written correctly. Here's the code I left out of the infographic:
Note now I'm not using the <ul> <li> html coding here because I've added Structured Data Markup which literally spells out to search engines what this chain of links is. You can use the <ul> <li> html if you like ... it won't do any harm!
I've used » (») as the separator but it doesn't matter what you use. You can even not use it at all and rely on a background image. Structured Data Markup does all the work here.
Structured Data Markup is often used in the SERPs increasing your real estate space there and showing links to other parts of your content. Its all about increasing the click through rate.
This is the visible text that defines the title of the page ... and there can be only one. It's vital to use the <h1> </h1> coding to tell search engines this is the title of the page so make sure that is how your code is marked up.
From a purely common sense point of view you want your visitors to see the title, read the first line or two and want to stay around. But search engines also want to see proof that your content really is about all the things you've claimed so far in the URL, title tag and page title.
Including the keyword phrase in this initial content is key to this but search engines will also be using Latent Semantic Indexing (LSI) to make sure the keyword phrase you have so carefully sprinkled into the right places really does belong on the page.
So within the text of the page we'll need words that mean the same as 'red widget' and words related to red widgets. There is no art or science to this, naturally written pieces of text naturally do this.
Its actually hard to write about a topic and not include related words (although I sometimes unpick work where people have managed it!)
On this page I haven't regularly mentioned 'anatomy of a search engine optimized web page' but there are a vast amount of words here that relate to 'search engine optimized' (rankings, click through rate, etc.) and quite a few that relate to 'web page' (h1, html code, etc.)
Any subheadings on the page should also be marked up so they are clear and they should be kept in order. <h2> after <h1>, <h3> after <h2>, and so on.
If you are using a platform like WordPress check your code carefully. Developers often abuse the <h1> and subheading tags as a shortcut for styling text. As such you can often find them all over the place ... and certainly not where they should be!
Links within the text of the content are powerful. The closer to the top of the content they are the more weight they carry. Again, make sure they are descriptive of the page they are linking to, ideally using the keyword phrase you want to rank that page for.
OK - so what have we done? We've put in place some basics - explaining the code the site uses, the character set to read and the core url to index so duplicate content is avoided. We've set the page up ready to be mobile friendly and we've made sure it will load fast by placing stuff that is not needed immediately at the bottom of the page so it is loaded after the initial content is displayed.
We coded the menu so it was clear to search engines that this was a list, not content and reinforced its structure with breadcrumbs.
We made a text based url with the keyword phrase in it that we then reinforced with the title tag and page title. We've explained our image (but it would be even better to also have a picture of a red widget with an alt tag "Red Widget" - just didn't have the space in this example!). We got the keyword phrase in the early text and matched that initial content to the meta description.
We've done everything we can to make the page readable and clear to search engines and everything we can to make it present the way we want in the SERPs if someone searches 'red widgets'.
I'm Tim Hill, a Search Engine Optimization and Online Marketing specialist. I created this site to help others understand that SEO is not a mysterious black art!.
If your a newbie try the Getting Started in SEO page, otherwise feel free to dig around and learn more.
If you need help simply get in touch.
