On Page SEO Beginner Guide

What is On-Page SEO

On-page SEO or On-Site SEO focuses on the modification, addition, or rewriting of HTML elements to help search engines better comprehend your website’s content. If search engines can understand your website’s content better, they may be more likely to rank it higher on SERPs (Search Engine Results Pages). 

Additionally, On-site SEO aims to make your webpages’ HTML elements more beneficial for both humans and search engines by filling the elements in with “keywords” or phrases relevant to searchers. This way, the HTML tags are more semantic or have meaning to searchers, and the information can be found quickly.

Also worth noting is that On-Page SEO is different from Technical SEO which focuses on repairing your website’s backend components, and Link-Building (Off-Page SEO) which is about building connections with other websites.

Why Does On-Page SEO Matter

There are a lot of reasons why a website owner would want to improve their on-page SEO. However, the overarching reason for improving on-page SEO is to improve the user experience of your website.

On-page SEO is all about making sure that the elements of your website are easy to find and easy to understand. Additionally, search engines may reward your website with a higher ranking if you have properly optimized your on-page SEO elements.

Essentially, by having a strong on-page SEO score you are better able to help search engines understand the intent, relevancy, and context of your web page’s content. By having a better understanding of the content on your web page they may be more likely to serve your page to users who are searching for information on that topic.

Title Tags

Title Tags, also known as Meta Titles or Title Links, serve the dual purpose of catching the attention of users and search engines. These tags function similarly to the title of a book or movie, as the tag provides a quick insight into the content and relevance of the webpage to a user’s query.

The title text is essential in enticing users to click on a result and providing them with valuable information.

We included an example of what a title tag might look like on search results:

Example of a title tag

The topmost piece of text: “What is Off-Site SEO and Why Does it Matter? – Bounce Rank” is the title tag. As you can see, the tag is highlighted with clickable “purple text.”

Generally, you are not able to see a title tag on the visual front end of a website – to see it, you must view the website’s HTML code. Search engines, on the other hand, are able to easily see the tag and display it to searchers in the SERPs. Which is why it is worth writing a good one. 

Meta Descriptions

The Meta Description, also referred to as a Snippet, is the second piece of text a user encounters in each search result. Much like the title tag, its purpose is to captivate and persuade readers to visit your webpage. 

Also, according to Google, search engines can utilize the meta description to convey the webpage’s content to users. 

Here is an example of a meta description:

Example of a meta description

Similar to the title tag, you generally are not able to see the meta tag on the website. Instead, you have to view the website’s HTML code to see it. But, again, search engines are able to see the tag and display it to searchers in the SERPs. So again, we recommend optimizing this.

Image Alt Text

According to Harvard University, Image Alt Text serves as a crucial descriptor for both users and search engines to help understand the image content. Although the text is typically invisible to users, it is displayed in place of the image if it cannot be loaded. 

Additionally, visually impaired users relying on screen reading devices can vocalize the alt text, allowing them to experience the meaning and context of the image.

Here is an example of what alt text looks like on a browser:

Example of image alt text

The icon shows that the image could not be “loaded,” and next to the icon is the alt text that describes what the image is about or represents. 

Out of all the on-site factors, the most commonly overlooked one is the alt text of an image. Many website owners tend to overlook the importance of providing a meaningful description for the image in the alt text. 

However, leaving the alt text empty or using inaccurate descriptions may hinder the accessibility of the website to users with visual impairments.


Headers, also called HTML Headings, are comparable to chapters found in a novel or book. Headers are used to help separate and identify ideas and paragraphs in web content. The usage of headers allows the writer to show readers that they are going into more detail about a specific topic. 

Also according to Google Search Central, Headers play a relevant role in search engines, as they assist them in better understanding the organization of the text on the page and evaluating its convenience for any searcher.

Below is an image of what heading elements can look like on the front end of a website’s design. The first arrow points to the  <h1> tag, and the second points to the  <h2> tag. 

Examples of HTML headings

As you can see in the photo, the <h1> tag is generally the largest heading and appears at the top of the webpage. 

Whereas the <h2>  tag typically appears after it and is much smaller. Although it is not shown in the image, there are additional headers you can add to a page ( e.g., <h3>, <h4>, <h5>, and <h6> ). Each header is subsequently smaller than the previous one.

Headings are an excellent way to divide large amounts of content into smaller, more digestible pieces. Both users and search engines benefit greatly from the presence of headers.

Imagine attempting to read through a lengthy document without any section breaks or headings. It would be an overwhelming and confusing experience, and you might even decide not to read it at all. 


Hyperlinks are connections between webpages on and off your website. They are used by searchers to navigate the internet and by search engine crawlers to find new web pages to crawl and potentially index. 

Here’s what a hyperlink looks like on the front-end of a website:

Example of a hyperlink

As you can see in the image, the “anchor tag” or hyperlink is underlined and stands out from the rest of the text. The tag is clickable and will navigate to the destination URL.

Hyperlinks are not only great for usability, but also for demonstrating authority on a topic.

Last Words About On-Page SEO

On-Page SEO aims to entice users and search engines alike by optimizing a website’s HTML code, specifically, its content.

Making improvements to the on-page factors ultimately results in a web page that’s more comprehensible and accessible to both people and search engines.

Scroll to Top