Anatomy of a Webpage From an SEO Perspective

What started as a simple project to help our internet marketing clients understand what we (SEOs) see when we look at the source code of their website/page, turned into an infographic that does just that, plus includes some helpful and useful SEO tips. Please enjoy, share and comment….

Click here for full size.

Anatomy of a webpage from an SEO

Want this infographic on your site? Just copy and paste this code:

The Anatomy Of A Web Page From An SEO Perspective

A web page is more than just a way to tell potential customers about your products or services – it’s a carefully structured ecosystem to inform search engines about your business. Every layer of the page is important and needs to include each of these items:


Search engines read pages from top to bottom just like we do. The header contains some of the most important information for search engines, which human viewers sometimes don’t even see:

  • The title tag should be unique, descriptive and brief. Stay under 70 characters and use your most important keywords at the beginning of the title. The title must be relevant to the rest of the content on the page;
  • The meta description is your “ad copy”. It is the description that appears under the page title in search results, but is no longer a ranking factor. Stay under 160 characters long, and lure searchers to click while using relevant keywords.
  • Open Graph or “OG” tags are used for creating rich objects on social media like page previews on Facebook and Twitter that show a picture. If you’re missing these, your posts will be less enticing to click on.


The body is the main part of a web page that contains the majority of the content that human viewers see, but you still need to include specific items for search engines as well:

  • Format your page using H tags. The top of the page should have one, and ONLY one, “H1” tag that contains an important keyword;
  • Your content needs to be easy to read and focused around one product or service. Don’t try to fit too many different things on one page otherwise search engines will get confused as to what the page is about and what keywords to rank it for;
  • Break up the content with relevant headers for each section. These headers must follow proper header tag hierarchy and should include variations of your main keyword;
  • List items can also be used to break up content and should use proper “ol” or “ul” tag structure;
  • No keyword stuffing! Include your main keyword and variations naturally within the content of the page;
  • Leverage semantic distance (aka co-citations) to place related concepts close to each other;
  • Images should use alt and title tags that are descriptive, but not overly optimized. If images don’t load, users will still see the text alt description in its place;
  • When relevant, the text on each page should have a few internal links to other pages on the website;
  • Text links, in addition to having relevant anchor texts, should have title attributes that include a relevant keyword describing the link;
  • Page content should be optimized for fast loading speeds as not to interfere with the user’s experience;
  • Avoid duplicate content, which is a portion of text that exactly matches a portion of text on another URL. This could be on different pages on your website or on other websites.


Websites that use CMS systems like WordPress often incorporate sidebars for extra relevant content:

  • Include a call to action that encourages users to take the next step in acquiring your product or service.
  • Include newsletter signups or relevant content on other pages if you have them;
  • Avoid putting too many sidebar links in. This can make your web page appear “spammy.”


Each web page will have a footer section located at the bottom:

  • Businesses and organizations should include their full contact details (address, phone numbers, email addresses);
  • Use schema microdata wherever possible, but especially for addresses and for authors of blog posts or other content;
  • A clear copyright statement shows visitors (and search engines) who the page content was written by.
  • You should include a link to a human-readable sitemap. Search engines use this, as well as XML sitemaps to index your website;
  • Links to social media profiles (like Facebook and Twitter) should be available for users to connect with you, but placed out of the way enough so that they do not interfere with your conversions;

Arsen R

Founder and Managing Partner

Founder @ TopHatRank, Digital Marketer, SEO, International Speaker, Husband & Father!

Read more about Arsen

Get Started With TopHatRank

Get Started

Calls Work Too: 1-800-475-2545

Back to top