Learning The Anatomy of a Web Page – Part 1

hand drawn html script

This article is written for beginners of SEO. It is for those who know bits and bobs about SEO and how Websites work but want to learn more. This will be the first in a series of posts covering the basics of SEO, today we are covering the Anatomy of a Web Page.

First we need to understand that the internet is made up of websites, websites are made of web pages and web pages have various elements – it is these elements we are studying today.

What is a Web Page?

A web page has two key features, the Header area and the Body area.

The Header Area contains things like your Page Title, Meta Description and other “meta data”. Meta data is data which the user does not see but the machine viewing the website (including search engine spiders) can see, this data is very useful for search ranking and social marketing.

The Body Area include all of your content, your sidebars and your footer. It also includes the code used to hold your content, though the styling is usually taken from an external source (another file within the website).

The Header Area

In the header area there are several key blocks of information you will need to know about. Knowing about this information, called Meta Data, can help you to optimise web pages across your website and make the most of them by leveraging this data. The header area will look something like this, but with much more information and “messyness”:

<head>
<title> Your Page Title </title>
<meta name="description" content="your meta description"/>
<link rel="canonical" href="http://example.url" />
</head>

Note: Not all Content Management Systems (CMS’s) will allow you to edit all of the data below, some will require seo plugins to do so, others will take a “best guess” that you can sometimes override. In some cases though you will just have to put up with what the system outputs. For websites you’ve built yourself with no CMS (your brave person) you can no doubt use all of the below.

Page Title

The page title is the short snippet of text, no more than 60 characters, that sits within the <title> tags.
This should be seen as your 5 second pitch, if it takes longer than that to read think again my friend. It should be a catchy sentence or question to entice users to view the page. For example the title of this page is “what is a web page?” this is then ended with the website name, though in most cases on this website that is not included.

You can read more about creating a page title in this post.

Meta Description

The Meta Description is something I’ve talked about many times before. Think of this as a 30 second pitch, or even better a twitter pitch where you have a single tweet (140 characters) to convince someone to visit your page. It should contain the essence of what the page is about but also where possible explain why someone should visit. The meta description for this post is “novice to seo and want to learn about what a web page is made of? read this post today.” – this both grabs the attention and gives someone a reason to click through (to learn about this).

You can read more about creating the perfect meta description here.

Rel=”Canonical” – Canonicalisation

The idea of a Canonical is fairly simple, you are saying this is where the original content is. It is used to limit the chances of duplicate content penalisation for Google and Bing. Now this should be used on every page, so this blog post’s url is its canonical, but if I had a duplicate of this post the canonical would still be this post and not the canonical. In general this isn’t something to worry about as most CMS’s will take care of this in one form or another. But if you are unsure if your pages are canonicalised just look in your header for rel=”canonical”.

Just as a side note, you can also have cross-domain canonicals, so if you have two sites with the same content you could claim one as the original source content.

Meta Keywords – Unused

Keywords and Keyphrases in themselves are useful to concentrate your focus within content, however the Meta Tag “keywords” in practice is ignored by Google and Bing. Therefore where possible I do not include it for SEO purposes, though it will not harm your page in anyway.

Page URL

Whilst not strictly in the header the Page URL is important and should be considered as such. As its not “within the page” I wont spend time explaining why but here is a link on creating a great seo page url.

In the next post in the series we will take a look at the Body Area, including textual and graphical content, plus your sidebars and footers and how you can optimise them best.

  • Rob

    Since Google and Bing stopped using Keywords tag I removed it, as it can give your competitors a clue to what keywords your page is targetting!

    • http://andykinsey.co.uk admin

      Thats a very good point Rob. This said if they’ve an SEO on board you can in most cases guess what keywords are being targeted fairly well.

  • Rob

    That may be the case, but by filling in the meta keywords you’re basically giving them that information on a plate. No sense in doing their work for them, especially when the big search engines no longer use the meta keywords!

    • http://andykinsey.co.uk admin

      Good Point