In the previous post, we discussed the 5 elements of on-page SEO. Today we are going to dissect a web page breaking down the front and back end and what it all means.

The Anatomy of a Web Page Has Two Sides

The visual side is what we see when we visit the web page in a browser. The code side is what makes up that visual version. The code side is what the search engines use to determine what your web page is about. As we continue to discuss the anatomy of a web page we’ll be looking at both the visual makeup and the code. We will also be showing you where to find the elements within WordPress, a commonly used content management system for websites.

The visual side
The header and footer sections of a web page are the areas that are found at the top and bottom and are usually the same across multiple pages on a website. Often you find things such as a logo, menu navigation, contact information in the header and the copyright, privacy, terms, address and other miscellaneous links located in the footer. The area between these makes up the body section of our web page.


web page header grand rapids mi 42.976041, -85.736591

web page footer grand rapids mi 42.976041, -85.736591


We are not going to spend much time on them just simply need you to be aware of the header footer embody as we reference the locations in later sections.

The code side
Now we are going to discuss what the search engines see when looking at a web page in order to determine its ranking. Keep in mind Google does not rank websites they rank web pages. However, Google needs to trust a website that it is about what it is ranking for.

Your URL structure

A URL is basically the address of the web page and one of the key components of on-page SEO that is often overlooked.  The URL not only helps Google understand your architecture but it will also help the user. It should be kept short and include your keywords.

Consider the URL’s below for New Braunfels Water Softeners. The first one is very long. It is descriptive of what your web page is about, but no one is going to take the time to type that into their browser. The second bad example doesn’t tell us really what the page is about.

anatomy of a web page grand rapids mi 42.976041, -85.736591

If our page is about reverse osmosis units a good example would be the one we have displayed.

Meta Tags

meta Tags grand rapids mi 42.976041, -85.736591

Meta tags are fields that are not usually displayed on the screen to a visitor but are used by the search engines. The graphic above shows you a variety of meta tags. Don’t let that overwhelm you as they are just examples. We will go into greater detail later.  For now, I’d like to concentrate on just a couple of key elements.

Title Tag
The title in description tags has a large impact on how your web page ranks as it tells both the user and search engines what the topic of your web page is. The title tag needs to be between 50 and 60 characters. Even though some search engines allow longer you don’t want it getting cut off.

Your title tag needs to be unique from all of the other pages on your web site. You should lead your title tag with a keyword and location and if there is room, your company name. I like to add a phone number. This helps it stand out visually.


title-tag-grand-rapids-mi-42.976041,--85.736591


This is not the end all be all. This is just a suggestion. Be sure not to repeat any words. Each part should be separated by a divider. You can use things like dashes pipes under squaws or commas. I personally choose pipes because it takes up less space. I tend to avoid using commas and underscores in the titles whenever possible.

Description Tag
A description tag or meta description has one simple purpose, to get someone searching to click your link. This is found under the title tag and the web page link. While the description does not directly affect search rankings it indirectly does based on the click-through rate.  Click-through rate is a ranking factor without a meta description defined and can be tracked through Google Analytics.

It is important that YOU determine what the meta description is. If you do not, Google will pull various info from the webpage based on what it thinks the web page is about. You are letting Google and other search engines know what to display to the searcher. As you can see by the example above, the meta description has a clear call to action. It is “learn how to use it to your advantage”.

Your description tag should be:

  • Up to 155 characters in length
  • Unique from other pages on your website
  • Actionable, active voice
  • Focus Keyword
  • Call to action

How to edit and customize the title tag and meta descriptions.

Within an HTML built site, this is done in the HTML code on the code side of your web page. This can be tricky if you do not know how to manage HTML code. Check with your webmaster as to how to do this.

We are concerned here with WordPress. This is my web page builder of choice and used by a majority of web developers.

Typically you will install a WordPress plugin that will help manage your SEO. Through this plugin, you can customize and edit both the title tag and meta description. I prefer the SEO plugin SEOPress. This is simple and intuitive to use. There are several other SEO plug-ins available like Yoast SEO and All In One SEO.

Using a plug-in like SEOPress, you have control right within the web page settings to set what you would like as your title tag and meta description.

seo-press-grand-rapids-mi-42.976041,--85.736591

Heading Tags
Headings tags are a piece of HTML code that allows you to make certain words stand out on a page and tell Google what the page is about. To help you understand how headings work on a web page, let’s consider an article in a magazine or newspaper. The title of the article is usually bigger and more pronounced than the other words and each Heading Tag is similar. It tells both the user and the search engine what your page is about. These are categorized as H1, H2, H3 and so on through H6.

The H1 should contain your primary keyword. The H1 tag is the most important heading because it is at the highest level. Search engines give it more weight. Incidentally, it should only be used once on your web page and should match the title tag you have chosen.

So what about H2 H3 H for H5 and H6? These are all subheadings or ways to organize your content into sections. Each subheading should also be relevant to your keywords.

Let’s take a look at our examples below. We have an H1 which is our main title called SEO optimization.

heading-tags-grand-rapids-mi-42.976041,--85.736591

We next have a subsection or an H2 called On-Page. If you look at our next subsection or H2  it’s Off-Page. Underneath each of our H2s, we have another subsection or H3 tags which are content and performance. In the Off-Page sub-section, the H3 are backlinks and social sharing. Underneath the H3 we have another subsection or an H4 tag.

Site Map
A site map acts as a roadmap for your website outlining the hierarchy of your pages and information. A site map gets submitted via the Google Search Console and the Bing Webmaster Tools.

Robot.txt
Robot.txt is a file that gives instructions about the website to web robots also known as spiders or bots. This file tells them what is OK and what is not. Fortunately for WordPress users, the SEOPress or other SEO plugins assist you in dealing with these.

Schema Markup
Schema markup is code that you put on your website to help search engines return more informative results to a user. One of the key areas schema can help is using local business markup. You can pass the phone number address the G.P.S. coordinates, the hours a service, payment information and tons more. Learn more about schema at schema dot org. Again those of you using WordPress. There are several free plugins that can manage this for you.