×
App Sky Star

App Development Company

What is On Page SEO?  How to Optimize Web Page

Last updated on 23 Feb, 2024 by App Sky Star
What is On Page SEO?  How to Optimize Web Page

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.

On Page SEO Techniques

  • Meta Title
  • Meta Description
  • Meta Keywords
  • Favicon Icon
  • Social Meta Tag
  • Robots Meta Tag
  • CSS & Javascript File Minification
  • Mobile Friendliness/Responsiveness
  • Sitemaps Updates (XML, Text, HTML)
  • Content Optimization
  • SEO-Friendly URLs
  • Heading Tag Optimization
  • Image Optimization
  • Image Alt Text Optimization
  • Anchor Title Optimization
  • Internal Links optimization
  • Use Social Sharing Buttons
  • Call to Actions
  • Conversion Form

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>Page Title</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

<head>

<meta name=”description” content=”This is an example of a meta description. This will often show up in search results.”>

</head>

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

<meta name=”keywords” content=”On Page SEO, On Page SEO Optimization”/>

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 <a href=”https://www.youtube.com/watch?v=jK7IPbnmvVU” target=”_blank”>video</a> 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

<meta property=”og:url” content=”https://www.rgbwebtech.com/” />

<meta property=”og:type” content=”website” />

<meta property=”og:title” content=”Facebook – Social Meta Tag Optimization” />

<meta property=”og:description” content=”Facebook meta tags (Open Graph meta tags) are present, you determine what’s being displayed in the Facebook post.” />

<meta property=”og:image” content=”https://www.rgbwebtech.com/images/logo/logo.png”/>

Twitter Social Tag Example

<meta name=”twitter:card” content=”summary_large_image” />

<meta name=”twitter:site” content=”@rgbwebtech” />

<meta name=”twitter:creator” content=”@rgbwebtech” />

<meta name=”twitter:title” content=”Twitter – Social Meta Tag Optimization” />

<meta name=”twitter:description” content=”Twitter and other social media platforms get these parameters from your website” />

<meta name=”twitter:image” content=”https://www.rgbwebtech.com/images/logo/logo.png”/>

<meta name=”twitter:URL” content=”https://www.rgbwebtech.com/” />

6. Robots Meta Tag

A robots meta tag, also known as robots tags, is a piece of HTML code that’s placed in the <head></head> 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:

<meta name=”robots” content=”noindex” />

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:

<h1>What is a Header Tag?</h1>

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

  1. Image Compression
  2. Vector Images
  3. 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:

<img src=”image.jpg” alt=”image description” title=”image tooltip”>

Bad Image Alt Text

<img src=”image.jpg” alt=”Woman pointing to a person’s computer screen” title=”image tooltip”>

Good Image Alt Text

<img src=”image.jpg” alt=”Professor using education software to instruct a business school student” title=”image tooltip”>

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. 

To learn more practical tips of Off Page SEO, Technical SEO, Local SEO etc. to increase the valuable traffic to your website free of cost.