On-page SEO

Write a title tag and meta description for a web page

Description: Your page is “Best running shoes for women”. Write a title tag and a meta description. The title should be 50 to 60 characters and the description 120 to 155 characters. Use the keyword “running shoes for women”.

Hint:

  • Put the keyword near the start of the title.
  • Say what the visitor gets in the description, and end with a small call to action.

Solution

<title>Best Running Shoes for Women: Top 10 Picks of 2026</title>
<meta name="description" content="Compare the best running shoes for women, with comfort, grip and price reviewed. See our top 10 picks and choose the right pair today.">
Example of a search result
https://example.com › running-shoes-for-women
Best Running Shoes for Women: Top 10 Picks of 2026
Compare the best running shoes for women, with comfort, grip and price reviewed. See our top 10 picks and choose the right pair today.
Title: 50 characters. Description: 134 characters.

How it works

  • The title is inside the recommended range, and the keyword is at the start.
  • The description uses the keyword once, tells the benefit and has a call to action.

Read Title Tag and Meta Description.

Create SEO friendly URLs from page titles

Description: Convert these page titles into SEO friendly URL slugs: “10 Tips to Write Better Titles!”, “SEO & Content: A Beginner’s Guide”, “Best Running Shoes (2026 List)”.

Hint:

  • Use lowercase, replace spaces with hyphens, and remove special characters. You can also remove small words like “to” and “a” to make it shorter.

Solution

Result

10 Tips to Write Better Titles! => /10-tips-to-write-better-titles/
SEO & Content: A Beginner's Guide => /seo-and-content-a-beginners-guide/
Best Running Shoes (2026 List) => /best-running-shoes-2026-list/

We can make them even shorter by hand, for example /write-better-titles/, /seo-content-beginners-guide/ and /best-running-shoes/.

How it works

  • The script changes everything to lowercase, makes & into “and”, removes the special characters and joins the words with hyphens.
  • A shorter URL is easier to read, share and remember. Avoid the year in the URL if you plan to update the page later.

Read URLs and File Names.

Fix the heading structure of a page

Description: This page has a poor heading structure. Fix it.

<h1>Welcome to our shop</h1>
<h1>Running shoes</h1>
<h4>Men's shoes</h4>
<h4>Women's shoes</h4>
<h2>Shipping</h2>
<h5>Free delivery</h5>

Hint:

  • Keep one H1, then H2 for main sections and H3 for parts of a section.

Solution

<h1>Running Shoes Shop</h1>
  <h2>Running shoes</h2>
    <h3>Men's shoes</h3>
    <h3>Women's shoes</h3>
  <h2>Shipping</h2>
    <h3>Free delivery</h3>

How it works

  • There is only one H1 which says the main topic of the page.
  • No level is skipped (no jump from H2 to H5), so the page reads like an outline.

Read Headings.

Add alt text and size attributes to an image

Description: Improve this image tag. The picture shows a blue backpack on a table.

<img src="IMG_0023.JPG">

Hint:

  • Rename the file, add alt, width and height. Add lazy loading if the image is not at the top of the page.

Solution

<img src="blue-backpack-on-table.webp" alt="Blue backpack on a wooden table" width="800" height="600" loading="lazy">

How it works

  • The file name describes the picture, in lowercase with hyphens.
  • The alt text describes it in a short natural sentence, without keyword stuffing.
  • Width and height reserve the space, so the layout does not jump (CLS).
  • loading="lazy" delays the loading until the user scrolls near it. Do not use it for the main image at the top.

Read Images.

Rewrite weak anchor texts

Description: Rewrite these links to use better anchor texts.

<a href="/seo-title-tag/">Click here</a> to learn about titles.
For meta tags, <a href="/seo-meta-description/">read more</a>.

Hint:

  • The anchor text should say what the next page is about, and still read naturally.

Solution

Learn <a href="/seo-title-tag/">how to write a good title tag</a>.
Also see our guide on the <a href="/seo-meta-description/">meta description</a>.

How it works

  • Search engines and screen reader users get the meaning of the link from its text.
  • Different pages get different anchor texts, which looks natural.

Read Anchor Tag and Links.