What is On Page SEO? How to Optimize Web Page

Last updated on April 15, 2024 by RGB Web Tech

On Page SEO involves the actions that you take on your web pages to gain higher page rank through search engine results. The main technique of On Page SEO is creating high-quality content that online visitors will find useful. On top of it, adding meta tags will enable google bots to identify your content for ranking. Also, make sure to use HTML tags for headings and other elements so that there are no duplicate pages or broken links.

In addition, choose images that are not too large, and add alt tags to all of them. These are some of the On Page SEO techniques. The agency you hire will provide you more details.

If you want your site to rank on Google and increase your brand's organic traffic, you’ll need to look at Off Page SEO, Technical SEO and Local SEO also.

But before you starting SEO also learn techniques of SEO ( White Hat SEO, Black Hat SEO, Gray Hat SEO and Negative SEO )

On Page SEO Techniques

1. Meta Title

A meta title (also called title tag) is an element in the head section of an HTML document that defines the title of each page of a website. It is retrieved by web browsers and also used by search engines such as Google to display a webpage in search results (SERPs). Often the meta title is mistakenly categorized as a meta tag. However, this is not correct since it is a unique HTML element.

Meta Title Examples

<head> <title>What is On Page SEO? How to Optimize Web Page</title> </head>

Characteristics of a good Meta Title

Below we have summarized the most important points to consider when optimizing your meta titles:

Optimal length between 55 and 65 characters (maximum 70)
Combine important keywords to a meaningful sentence
Most important keyword should come first
Avoid word repetitions and spelling errors
Provide a concise and understandable description of the page content
Use a call-to-action if necessary
Use individual titles for each page of a website

2. Meta Description

A meta description is an HTML element that provides a brief summary of a web page. A page’s meta description tag is displayed as part of the search snippet in a search engine results page (SERP) and is meant to give the user an idea of the content that exists within the page and how it relates to their search query.

Meta Description Examples

Characteristics of a good meta description

Based on the research we did on this topic, as well as our own experience, we came up with this list of elements you need to write a good meta description:

Keep it up to 155 characters
Use active voice and make it actionable
Include a call-to-action
Use your focus keyword
Show specifications, where possible
Make sure it matches the content of the page
Make it unique

3. Meta Keywords

Meta keywords are meta tags that you can use to give search engines more information about a page’s content. They’re found in a webpage’s HTML source code, and are not visible to visitors.

Meta Keywords Examples

Do you still need to use meta keywords?

Google hasn’t used the meta keywords tag to help rank web pages for at least a decade. We know this because Matt Cutts, Google’s former Head of the Webspam Team, released a video in 2009 where he said - we don’t use the keywords meta tag in our search ranking.

However, it’s important to remember that there’s more to SEO than Google, so there are a couple of reasons why you might still want to use the keywords meta tag.

It may still be used by Yandex
It’s used for some internal site searches
Create an internal tagging system

4. Favicon Icon

A favicon is a small 16×16 pixel icon that serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open. Due to their tiny size, favicons work best as simple images or one-to-three characters of text. Favicons are not to be confused with logos but are sometimes the same. Due to its small size and resolution, the favicon may need to be an even smaller size or part of a company’s original logo.

What sizes are needed for a Favicon on each Browser?

As stated above, 16px is generally recommended because it can be used across all browsers, but if you would like to create a favicon for every possible use, then follow the guide below:

16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views
24px: Pinned Site in Internet Explorer 9
32px: New tab page in Internet Explorer, taskbar button in Windows 7+ and Safari ”Read Later” sidebar
57px: Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
72px: iPad home screen icon
96px: Favicon used by the Google TV platform
114px: iPhone 4+ home screen icon (twice the standard size for the retina display)
128px: Chrome Web Store
195px: Opera Speed Dial

5. Social Meta Tag

When sharing an article link, you want your post to look nicely when published on social media. You’d like it to contain a quality image, correct name, description, and URL. Facebook, Twitter and other social media platforms get these parameters from your website. You can control what they pull from the post by including social media meta tags (for example open graph tags) in the html code of your posts.

If the Facebook meta tags (Open Graph meta tags) are present, you determine what’s being displayed in the Facebook post. If you do not include these Open Graph (og) meta properties, Facebook will still display the information about your blog post but probably not in the way you’d want it to. This works analogically with Twitter meta tags, too.

Facebook Social Tag Example

Twitter Social Tag Example

6. Robots Meta Tag

A robots meta tag, also known as robots tags, is a piece of HTML code that's placed in the section of a web page and is used to control how search engines crawl and index the URL.

This is what a robots meta tag looks like in the source code of a page:

Robots tags are page-specific and allow you to instruct search engines on how you want them to handle the page and whether or not to include it in the index.

Indexation-controlling parameters:

Noindex: Tells a search engine not to index a page.
Index: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.
Follow: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.
Nofollow: Tells a crawler not to follow any links on a page or pass along any link equity.
Noimageindex: Tells a crawler not to index any images on a page.
None: Equivalent to using both the noindex and nofollow tags simultaneously.
Noarchive: Search engines should not show a cached link to this page on a SERP.
Nocache: Same as noarchive, but only used by Internet Explorer and Firefox.
Nosnippet: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.
Noodp/noydir [OBSOLETE]: Prevents search engines from using a page’s DMOZ description as the SERP snippet for this page. However, DMOZ was retired in early 2017, making this tag obsolete.
Unavailable_after: Search engines should no longer index this page after a particular date.

7. CSS & Javascript File Minification

CSS & Javascript minification is the process of removing unneeded code from CSS & Javascript source files, with the goal of reducing file size without changing how the CSS & Javascript file executes in the browser. By stripping unnecessary data from the CSS & Javascript code, minification helps the browser download and process these files faster, increasing page performance and improving user experience.

You can minifier CSS & JavaScript here

Free Formatter - https://www.freeformatter.com

8. Mobile Friendliness/Responsiveness

Mobile is changing the world. Today, everyone has smartphones with them, constantly communicating and looking for information. In many countries, the number of smartphones has surpassed the number of personal computers; having a mobile-friendly website has become a critical part of having an online presence.

The web is being accessed more and more on mobile devices. Designing your websites to be mobile friendly ensures that your pages perform well on all devices.

You can test here mobile friendliness

Mobile-Friendly Test - https://search.google.com/test/mobile-friendly

Media Genesis - https://responsivedesignchecker.com

9. Sitemaps Updates (XML, Text, HTML)

A sitemap helps search engines discover URLs on your site, but it doesn't guarantee that all the items in your sitemap will be crawled and indexed. However, in most cases, your site will benefit from having a sitemap.

It is also essential to know there are two different types of sitemaps.

XML sitemaps
HTML sitemaps

You can Generator Sitemaps for your website here

XML-Sitemaps - https://www.xml-sitemaps.com
Small SEO Tools - https://smallseotools.com/xml-sitemap-generator/

10. Content Optimization

Content optimization is the practice of ensuring that your content has the best possible chance of achieving its intended goal, whether that’s to rank in a search engine or to turn leads into conversions.

You can implement a number of basic, time-tested methods to achieve these goals, but it’s not just about performing technical tasks and ticking boxes. Significant marketing and editorial elements to web content optimization need to be covered, too.

Let’s say that you’ve written a great top-of-the-funnel (TOFU) blog that’s related to your core product, and you want to get as many eyes on it as possible. Two to three months after publishing, you check the performance of the post only to find that nobody has seen it.

Why? Well, maybe:

The keywords you have used have little to no search volume
You haven’t covered the topic in any real level of detail
You haven’t used a coherent heading structure, so Google’s bots have had a hard time making sense of your article
Your title tag doesn’t accurately reflect what the article is about

11. SEO-Friendly URLs

SEO friendly URLs are URLs that are designed to meet the needs of users and searchers. Specifically, URLs optimized for SEO tend to be short and keyword-rich.

Along with your title tag, link anchor text, and the content itself, search engines use your webpage’s URL to understand what your content is all about.

Best practices for creating SEO-friendly URLs.

Describe your Content
Include Keywords in URLs
Use Hyphens to Separate Words
Use Lowercase Letters in URLs
Keep URLs Short
Use Static URLs
Be Careful with Subdomains
Limit Folders in URL Structure

12. Heading Tag Optimization

Header tags are HTML tags that tell a browser what styling it should use to display a piece of text on a webpage.

If we looked up the HTML for the heading above, it’d look something like this:

What is a Header Tag?

Like headings in print content, header tags are used to title or introduce the content below them. HTML header tags follow a hierarchy, from h1 to h6.

H1 tags are used to denote the most important text, such as the main theme or title of a content.
H2 and H3 tags are commonly used as subheadings.
Finally, H4, H5, and H6 tags may be used to provide further structure within those subsections.

13. Image Optimization

The majority of a website’s data is typically comprise of images. Website image optimization refines images so as to lighten pages, reduce load times and lessen the burden of network resources, including data usage in the case of mobile data plans.

Image optimization can also increase your search engine optimization (SEO) rankings, as search engines factor in page load speed when ranking sites. The result is significant load savings, an improved user experience and increased site visibility.

Image Optimization Methods

Image Compression
Vector Images
Image Caching

14. Image Alt Text Optimization

Adding images to your posts and product pages encourages people to read them, and well-chosen images can also back up your message and get you a good ranking in image search results. But you should always remember to provide your images with good alt attributes. Because alt text strengthens the message of your pages with search engine spiders and it improves the accessibility of your website.

This is a complete HTML image tag:

Bad Image Alt Text

Good Image Alt Text

Image Alt Text Best Practices

Ultimately, image alt text needs to be specific but also representative of the topic of the webpage it's supporting. Get the idea so far? Here are a few important keys to writing effective image alt text:

Describe the image, and be specific: Use both the image's subject and context to guide you.
Add context that relates to the topic of the page : If the image doesn't feature a recognizable place or person, then add context based on the content of the page. For example, the alt text for a stock image of a person typing on a computer could be "Woman optimizing WordPress website for SEO" or "Woman researching free blogging platforms," depending on the topic of the webpage.
Keep your alt text to fewer than 125 characters : Screen-reading tools typically stop reading alt text at this point, cutting off long-winded alt text at awkward moments when verbalizing this description for the visually impaired.
Don't start with an alt text of picture : Do not write an alt text of image, write alt text article specific.
Use your keywords, but sparingly : Only include your article's target keyword if it's easily included in your alt text. If not, consider semantic keywords, or just the most important terms within a longtail keyword. For example, if your article's head keyword is "how to generate leads," you might use "lead generation" in your alt text, since "how to" might be difficult to include in image alt text naturally.
Don't cram your keyword into every single image's alt text : If your blog post contains a series of body images, include your keyword in at least one of those images. Identify the image you think is most representative of your topic, and assign it your keyword. Stick to more aesthetic descriptions in the surrounding media.
Review for spelling errors : Misspelled words in image alt text could hurt the user experience or confuse search engines crawling your site. You should review alt text like you would any other content on the page.

15. Anchor Title Optimization

Anchor text is the clickable text that appears in a hyperlink.

It's designed to stand out from the rest of the text so that users know it can be clicked on. So it should have a different color than regular text. (Often, it’s blue.) Other stylistic elements, like an underline, can be added.

Anchor text should indicate to users what kind of page they’ll be taken to if they click the link.

These are most common types of anchor text you can use on your site:

Branded
Brand + Keyword
Exact Match
Partial Match Keywords
Related Keywords
Naked Link
Generic

16. Internal Links optimization

An internal link is any link from one page on your website to another page on your website. Both your users and search engines use links to find content on your website. Your users use links to navigate through your site and to find the content they want to find. Search engines also use links to navigate your site. They won’t see a page if there are no links to it.

It’s crucial for your site’s SEO to evaluate and improve internal linking strategy regularly. It’s one of the ways to improve the fitness of your website. By adding the right internal links, you make sure Google understands:

The relevance of pages
The relationship between pages
The value of pages

17. Use Social Sharing Buttons

Social share buttons give customers the ability to display their ecommerce purchases on Facebook, Twitter, Pinterest or other platforms. The majority of online shoppers also use at least one form of social media, so these buttons create free promotion for an online store. Include this feature on individual product pages to call attention to particular items. Social share buttons also add convenience for users who want to post a particular product by removing the extra steps of copying, pasting and posting to a separate website.

18. Call to Actions

A call-to-action, also known as a CTA, is a clickable button or link on your site or in your email, or on your ad. You want people to click your CTA. You call them to action. Typically, these actions look like this:

Download
Submit
Subscribe
Sign up
Purchase

19. Conversion Form

Form conversion is when a website visitor completes and successfully submits an online form from a homepage, landing page, or any other page on a website. Form conversion is a micro-conversion, which leads to a macro-conversion such as a newsletter sign-up or a purchase.

Why is form conversion important?

Creating straightforward, easy-to-complete forms is key to a successful conversion rate optimization (CRO) strategy, and form submissions are usually the final hurdle in the conversion process.

It’s easy to overlook the value of a well-designed form. It’s not nearly as exciting as choosing bold imagery or writing persuasive copy, but it’s just as important to the user experience.

If a visitor starts to fill out your form, you’ve already sold them on the idea of converting—you’ve successfully countered their objections, and they’re willing to give you their personal information. Having to enter their data (name, email address, phone number, credit card info, etc.) requires trust and effort though, so if the form isn’t straightforward and easy to fill out, your visitor might move on to the next website.

FAQs - On Page SEO

1. What is On Page SEO?

On Page SEO (also known as on-site SEO) refers to the practice of optimizing web pages to improve a website's search engine rankings and earn organic traffic. In addition to publishing relevant, high-quality content, On Page SEO includes optimizing your headlines, HTML tags (title, meta, and header), and images.

2. What are the benefits of On Page SEO?

On Page SEO helps search engines analyze your website and the content connected to it so that it can identify if a searcher's query is relevant to your site. Google is constantly updating their algorithm so that it can better understand a searcher's intent and deliver search results that meet that user's needs.

3. Is On Page SEO different from technical SEO?

On Page SEO optimizes at the page level, while technical SEO deals with sitewide issues such as crawlability, overall site speed, information architecture, sitewide internal linking, etc.

Final Thoughts

Now that you have a better idea of On Page SEO signals, make sure you keep them in mind with every page you create.

Using the On Page SEO Checker, you can also find plenty of On Page Optimization ideas for potential quick wins.

That being said, the most important part of any SEO strategy is patience. Great results take time, effort, and some trial and error to get right.

On Page SEO may seem overwhelming, but our digital marketing service and experts are here to help you with anything you need to know more about Off Page SEO, Technical SEO and Local SEO.

If you find our article valuable, please think about sharing it on your social media platforms, as your single share can inspire us to continue creating informative and valuable content for you.

Written by RGB WEB TECH

Popular, up-to-date, and trending blogs

We are committed to delivering ongoing, informative, and valuable content across emerging technologies, the latest digital marketing trends, cutting-edge tools, and software. Stay tuned for our updates!