Designing a web page is the chemistry of combining aesthetic beauty and the punch of your marketing message, which takes the right mix of art and science. The secret lies in giving yourself a little creative freedom while sticking to a proven structure.
According to Google webspam leader, Matt Cutts, there are more than 200 ranking factors Google uses when determining which pages should appear on search engine results pages (SERPs). Some of these ranking factors include the HTML elements that make up a web page, while others are the type of content on the web page.
SEO depends on the search engines’ understanding of your content so they can determine where and how it should rank. While they’re constantly improving, they are still not human, and they rely on specific algorithms. It’s our job, as marketers, to help them better understand precisely what our content is so that it will rank better and receive more organic traffic.
Below breaks down and explains essential HTML elements of a web page and how you can start to optimize your content to drive high-quality traffic to your website.
URL
The URL is unique and acts as the address of each page. A URL (Uniform Resource Locator), more commonly known as a “web address,” indicates the location of a resource (such as a web page) on the internet.
Key recommendations:
- To include keyword targeted product/category name
- To utilize hyphens (-) instead of underscores (_) when separating words
- To use human-readable, semantically accurate URL that can provide a clear idea of what the web page is about to improve user experience
- To use lowercase letters. In some cases, uppercase letters can cause issues with duplicate pages or tracking issues
<TITLE> tag
The <TITLE> tag is one of the most important on-page SEO factors. It offers valuable context to help search engines understand what the web page is about, but it’s also usually what is displayed in the search results. That’s why it’s crucial to write your <TITLE> tags for visitors, not just purely for search engines.
Google will display up to the first 70 characters of a <TITLE> tag; therefore, it’s essential to try and stay within that range. It’s also important to include keyword phrases to rank for in a way that sounds both natural and engaging.
Key recommendations:
- To make sure that tags should not be more than 70 characters
- To append the brand name to the end (e.g. | Tech Edt)
- To only optimize for up to three keyword phrases
- To avoid keyword stuffing
META description
The META description has no algorithmic value, but they can affect click-through rates and have an exponential effect on your efforts. The META description will be displayed in search results. Same as the title, if a description is boring, confusing, or spammy, visitors will usually avoid clicking into your website.
Google will usually show up to about 160 characters of the META description tag.
Key recommendations:
- To use no more than 155 characters (spaces included)
- To use an active copy
- To include keyword phrases
- To use copy that sounds both natural and engaging
- To avoid keyword stuffing
Breadcrumbs
Breadcrumbs are simple text links that allow visitors to retrace their path on the web page back to your home page. They are recommended to be placed at the top of your web page and reflect the URL structure of your website.
Breadcrumbs serve to enhance user experience as well as to help search engines to better understand your content from a hierarchical perspective. By demonstrating how each web pages relate to each other, you can help to ensure that the correct web pages rank for the correct topics.
Key recommendations:
- To reflect the URL structure of your website
- To be placed on the top of the web page
<H1> & <H2> tags
Heading tags are tags that supplement the <TITLE> tag. They break your content on your web pages into smaller, logical sections.
The heading tags help the search engines to understand your content by demonstrating a hierarchy of the information published on that web page. It helps by using the heading tags appropriately, starting with <H1> to <H6>. In most cases, you will use up to <H4>.
Using heading tags to break up your content also helps to create a better user experience.
Key recommendations:
- To be keyword-focused
- To target secondary/tertiary keyword phrases
Images or Videos
Images and videos can help provide additional information and context that plain texts can’t. They also help to make your web page more interesting. Eye-catching visuals captivate visitors, then that focus helps them to get a better idea of what a message truly is trying to say. Visuals also give visitors a better understanding of not just the message, but what’s behind the message by allowing them to understand easier, faster, and clearer than just a cluster of written texts.
It also aids in keeping visitors on your website longer, reducing your bounce rate and increasing the likelihood that they’ll become a customer.
Key recommendations:
- To compress images for faster loading
- To avoid uploading videos that are huge in file size
ALT attribute tags
An ALT attribute tag describes the image it’s referencing. An ALT tag, also commonly known as “ALT attribute” or “ALT description,” is an HTML attribute placed on image tags to provide a text alternative for search engines.
Search engines cannot interpret images, but images play a crucial part in how visitors understand a particular web page. Therefore, ALT tags solve this by providing a text which can be read by the search engines.
Key recommendations:
- To be keyword-focused
- To optimize images for image searches
Body Copy
The body copy of a web page explicitly describes the content of the page. In some cases, you might want to explore using lists, ordered or unordered, to help people scan and read content more easily. In fact, data organized in a list often draws attention.
Key recommendations:
- To use targeted keywords at 3 to 5 percent of the copy
- To implement internal linking structure
- To leverage on lists for easy content presentation
Schema
Schema is a semantic vocabulary of tags that you can implement to your HTML to improve how search engines read and represent your web page in search results. Adding Schema markup to your HTML enhances the way your web page is displayed in SERPs by adding the rich snippets that are displayed beneath the page title.
If you’ve seen before featured images, reviews, or event dates in the search results, then this is the result of implementing schema. Research proves that websites using schema will receive an increase in organic search traffic when they have rich snippets.