On-page SEO

In this lesson

Write a title element and a meta description that make people click, and know when Google replaces them.
Make a short, readable URL slug and a clear heading structure.
Put the target keyword in the right places, and recognize keyword stuffing.
Format a page for scanning, and write descriptive anchor text for internal links.
Optimize images so that people, search engines and screen readers understand them, and so that they load fast.

Day 04 ended with a plan: a keyword, an intent and a format for each page. This lesson turns that plan into a page.

What on-page SEO is

On-page SEO is the work on one page that helps search engines understand it and helps people choose it. It covers the content and the HTML of the page: the title, the description, the URL, the headings, the text, the links and the images. Day 03 covered the technical work for the whole site. Days 05 and 06 cover content quality and links from other sites.

Before the details, know what matters most. Google’s SEO Starter Guide says that compelling and useful content “will likely influence your website’s presence in search results more than any of the other suggestions in this guide.” So on-page SEO does not make a weak page strong. It helps a good page get understood and clicked.

The items in this lesson are not equal:

Item	Effect	Why
Title element	High	Google uses it for the title link in most results. People use the title link to decide which result to click.
Text that answers the intent	High	Google’s language systems match the text to many queries.
Internal anchor text	Medium	It tells people and Google what the linked page is about.
Images: alt text and `<img>`	Medium	Google uses alt text to understand images. Image search can bring traffic.
Meta description	Medium, for clicks only	Google does not use it for ranking. It can be the snippet.
Headings	Low to medium	They help readers and can be the source of the title link. Their order does not matter to Google.
URL slug	Low	Keywords in the URL “have hardly any effect”, Google says. A readable URL helps people.

Title tags

The title element (often called the title tag) is the <title> element in the HTML <head>. Browsers show it in the tab. Google uses it as the main source of the title link: the clickable headline of a search result.

Google’s title link is automatic. Google lists nine sources, for example the <title> element, the main visual title, <h1> elements, og:title and the anchor text of links to the page. In 2021 Google changed this system. After feedback, Google said that it used the title element “around 87% of the time”. In the other cases, the title element had a problem, so Google used other text.

Google names the common problems:

Half-empty titles, such as <title>| Site Name</title>.
Obsolete titles, such as “2020 admissions criteria” on a page that shows 2021.
Inaccurate titles that do not describe the page.
Boilerplate titles: the same long text on many pages, with one word changed.

Google’s rules for a good title:

Give every page a <title> element.
Write descriptive and concise text. Do not use vague words like “Home” or “Profile”.
Do not repeat keywords. Google calls “Foobar, foo bar, foobars, foo bars” keyword stuffing.
Make each title distinct. Do not put the same title on all pages.
Brand concisely. Put the site name at the start or the end, after a hyphen, colon or pipe.
Make the main heading match the title, and make it the most prominent text on the page.

How long can a title be? Google says that there is no limit, but it cuts the title link “to fit the device width”. Semrush recommends 550 pixels or fewer, “typically 50–60 characters”. That is Semrush advice, not a Google rule. Put the important words first, so that a cut does not remove them.

Meta descriptions

The meta description is a <meta name="description" content="…"> element in the <head>. It is a short summary of the page. People do not see it on the page itself.

The snippet is the description text under the title link in a search result. Google says that snippets are “primarily created from the page content itself”. Google uses the meta description only if it describes the page better. So a page can show different snippets for different queries.

How often does Google use the meta description? Semrush checked the top 10 results for 10 keywords in April 2025. In its sample, Google used the meta description, or a short version of it, about 28% of the time. This is a very small sample, so treat the number as a rough sign, not a rule.

Google does not use the meta description for ranking. Google said this in 2009, and Semrush says the same today. But a good description can get more clicks. Google’s advice:

Write a unique description for each page. Start with the home page and the popular pages.
Include facts that help people decide, such as the author and date, or the price and the maker.
On a large site, generate descriptions from page data. Google says this is “appropriate”.
Do not write a list of keywords. Such descriptions “are less likely to be displayed as a snippet”.

Google also says that there is no length limit. It cuts the snippet to fit the device. Semrush measured an average snippet of about 146 characters on desktop and 136 on phones, in the same small sample.

The old keywords meta tag (<meta name="keywords">) has no effect. Google does not use it.

Start from an exampleTarget keywordTitle element (<title>)Meta description

Device Desktop Phone

Example pages, not real results. The cut-off points are rough estimates from Semrush data, not Google limits. Pick each example, then edit the title. Notice how a half-empty title makes Google use the main heading, and how stuffed keywords look in the result.

URL slugs

A URL slug is the last part of a URL that names one page. In https://example.com/blog/what-is-a-url-slug/, the slug is what-is-a-url-slug.

Google’s URL rules:

Use readable words, not long ID numbers. /pets/cats.html is better than /2/6772756D707920636174.
Use hyphens (-) to separate words. Google does not recommend underscores (_) or joined words.
Use the words of your audience’s language.
Keep the case the same. Google treats /APPLE and /apple as two different URLs.

Semrush adds two tips: use fewer than five words, and include the target keyword. But Google says that keywords in the URL path “have hardly any effect beyond appearing in breadcrumbs”. So write slugs for people. Do not change the slug of a page that already ranks only to add a keyword. If you must change a URL, add a 301 redirect, as day 03 showed.

Heading structure

Headings are the <h1> to <h6> elements. They divide a page into sections. The heading structure is the outline that these headings make.

Here, Google and the accessibility guidance give different answers:

Google Search: “it doesn’t matter if you’re using them out of order.” There is also “no magical, ideal amount of headings”.
MDN (accessibility): use one <h1> for each page. Do not skip levels, for example from <h2> to <h4>. People who use a screen reader jump from heading to heading, and a skipped level confuses them.

So follow the MDN rules, because they help people. They do not hurt in search. A good heading structure also helps Google in one clear way: the <h1> is a source for the title link.

Write headings that say what the section contains. “How to roast coffee in a pan” is better than “Method 1”. A reader who only scans the headings must understand the page.

Keyword placement

Keyword placement is where and how often the target keyword appears on the page. Semrush recommends these places: the title, the URL slug, the <h1>, the first paragraph and some <h2> subheadings. Use them where they sound natural.

Two facts from Google limit how much this matters:

Google’s language systems “can understand how your page relates to many queries, even if you don’t explicitly use the exact terms in them.” So use the words that your readers use. One exact phrase is not necessary.
Google says that length alone does not matter: there is “no magical word count target”. Writing naturally, with varied words, gives you more chances to match queries.

Keyword stuffing is the opposite of good placement. Google’s spam policies define it as filling a page with keywords “in an attempt to manipulate rankings”. Examples are lists of cities that a page wants to rank for, and phrases repeated “so often that it sounds unnatural”. Day 02 showed what spam policies can cost. Stuffing also makes a page worse for readers.

Google gives no keyword density number, and no tool score is a Google rule. Test the text instead: read it aloud. If a phrase repeats in a way that a person would not say, rewrite it.

Extra repeats of the exact keyword in the body text:

Example page and text, not a rule. Turn on the places one at a time, then move the slider. Notice that the important places are few, and that extra repeats in the body make the text worse, not better.

Formatting and readability

Readability is how easy a text is to read and understand. Formatting is the structure that helps people scan it: short paragraphs, lists, tables and headings.

Google’s Starter Guide asks for text that is “easy-to-read and well organized”. It says to break long content “into paragraphs and sections” and to use headings. Use these tools:

Put the answer first. Then give the details.
Keep one topic in each paragraph.
Use a numbered list for steps, a bullet list for options, and a table for comparisons.
Define technical terms the first time.
Correct spelling and grammar mistakes. Google names them in its guide.

Is a readability score a ranking factor? There is no evidence for this. Ahrefs checked 15,000 keywords in 2021. It found “virtually zero correlation” between rankings and Flesch Reading Ease scores. Ahrefs and other sites report that John Mueller of Google said in 2018 that he knew of no algorithm that uses basic readability scores. I did not find the original statement, so that part is not confirmed. Some SEO blogs say that readability helps rankings directly; they give no data from Google.

So write for readers, not for a score. Clear text keeps readers on the page. It also makes it easier for search features and AI systems to take one passage as an answer. Day 07 covers that.

Internal anchor text

Anchor text (or link text) is the visible, clickable text of a link. Internal anchor text is the anchor text of links between pages of one site. Day 03 showed why internal links matter for crawling. This section is about the words in them.

Google says that anchor text “tells people and Google something about the page you’re linking to.” Google’s rules:

Make it descriptive. “Click here”, “Read more” and “website” tell nothing.
Make it concise. Do not put a full sentence in a link.
Do not cram keywords into it. Google calls this keyword stuffing again.
Give it context. The words before and after the link also matter.
Do not put links next to each other with no text between them.
If an image is the link, Google uses its alt text as the anchor text. So never leave that alt text empty.

Google gives one test: read only the anchor text. If you cannot tell what the linked page is about, write better text.

Semrush names types of anchor text: exact match (the target keyword), partial match, branded, naked (the URL itself) and generic (“click here”). For internal links, descriptive text that is close to the target keyword is normal. Day 06 covers anchor text in links from other sites, where too many exact-match anchors can be a risk.

Image optimization

Image optimization prepares images so that people and search engines understand them, and so that they load fast. Day 04 showed that image packs can bring traffic. This section covers the page.

Help Google find and understand the image:

Use an <img> element with a src. Google does not index images in CSS, such as background-image.
Put the image near text about it. Google uses the text near the image, captions and image titles.
Use a short, descriptive file name: my-new-black-kitten.jpg, not IMG00023.JPG. Google says that file names give only “very light clues”.
Use a supported format: BMP, GIF, JPEG, PNG, WebP, SVG or AVIF.

Write alt text. Alt text is the text in the alt attribute of an <img>. It describes the image. Screen readers read it aloud, and browsers show it if the image does not load. Google calls it “the most important attribute” for image metadata. Google gives this example:

Alt text	Rating
(missing)	Bad
`puppy dog baby dog pup pups puppies doggies…`	Bad: keyword stuffing
`puppy`	Better
`Dalmatian puppy playing fetch`	Best

MDN says that an empty alt="" marks an image that is “not a key part of the content”, such as decoration. Then screen readers can skip it. Do not use empty alt text on an image that is a link.

Make images fast. Google says that images are “often the largest contributor” to page size. Day 03b taught Core Web Vitals. For images:

Use WebP or AVIF. web.dev says that they “generally provide better compression” than JPEG and PNG.
Give responsive sizes with srcset or <picture>.
Set width and height, so that the page does not jump when the image loads.
Use loading="lazy" for images below the first screen. “Never lazy-load your LCP image,” says web.dev. That image must load first.

Key terms

On-page SEO: the work on one page that helps search engines understand it and helps people choose it.
Title element (title tag): the <title> element in the HTML head, shown in the browser tab.
Title link: the clickable headline of a search result.
Meta description: a <meta name="description"> element with a short summary of the page.
Snippet: the description text under the title link in a search result.
URL slug: the last part of a URL that names one page.
Heading structure: the outline that the <h1> to <h6> headings of a page make.
Keyword placement: where and how often the target keyword appears on a page.
Keyword stuffing: filling a page with keywords to manipulate rankings; a Google spam policy violation.
Readability: how easy a text is to read and understand.
Anchor text: the visible, clickable text of a link.
Alt text: the text in the alt attribute of an image, which describes the image.
Lazy loading: loading an image only when the reader scrolls near it.

Exercise

Exercise · about 15 min

Audit the on-page SEO of one page

Pick an article on a site that you know, or use the MDN page https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img.

Open the page. Right-click and choose “View page source”. Find <title> and <meta name="description". Copy both.
Search Google for the main topic of the page with site: and the domain, for example site:developer.mozilla.org img element. Compare the title link and the snippet with what you copied. Did Google use them?
Look at the URL. Is the slug readable? Does it use hyphens and lowercase?
Open the browser developer tools (F12). In the console, run [...document.querySelectorAll('h1,h2,h3')].map(h => h.tagName + ' ' + h.textContent.trim()). Is there one h1? Are levels skipped?
Run [...document.images].filter(i => !i.alt).length to count images with no alt text.
Find three internal links in the text. Read only their anchor text. Can you tell what each linked page is about?
Write three changes that would improve the page, in order of importance.

Show a possible solution

Results change over time, and this run did not check the live page. The notes below say what to look for.

Title: a good title names the topic first and the site last, for example “<img>: The Image Embed element - HTML | MDN”. Check that it is unique and not stuffed.
Title link and snippet: Google often uses the title element. The snippet is often text from the page, not the meta description. Both are normal.
Slug: MDN slugs use readable words, such as Reference/Elements/img. They use capital letters, which is fine if the site uses them in the same way everywhere.
Headings: expect one h1 and h2 sections. A skipped level is an accessibility issue, not a ranking problem.
Alt text: decorative images can have alt="". The console command counts them too, so check each one before you call it a problem.
Anchor text: descriptive anchors name the target, such as “the <picture> element”. “Learn more” fails the test.

A good order of changes: first anything that breaks the title or the main content, then missing alt text on content images and vague anchor text, then the meta description, and last the slug.

Check yourself

Your page's title element is '| BeanLab'. The h1 says 'How to roast coffee beans at home'. What will Google probably show as the title link?| BeanLab, exactly as writtenText built from the h1 or other prominent text, because the title is half-emptyNo result, because the page has no valid titleThe meta description

A team spends a week rewriting every meta description to improve rankings. What is wrong with this plan?Nothing, meta descriptions are a strong ranking factorGoogle does not use the meta description for ranking; it can only help clicks when Google shows itGoogle ignores meta descriptions completelyMeta descriptions must be under 50 characters

A page has an h1, then jumps straight to h4 headings. What is the main problem?Google will demote the page for invalid heading orderPeople who use screen readers can be confused; Google Search says the order does not matter to itThe page cannot have a title linkThere is no problem for anyone

Which internal link follows Google's anchor text advice best?To learn how to roast beans, <a>click here</a>.See our <a>guide to roast levels</a> before you start.<a>roast levels coffee roast levels light roast dark roast medium roast</a>A link whose text is the full URL of the page

The main hero image at the top of a page loads slowly. Which change is wrong?Convert it to WebP or AVIFAdd width and height attributesAdd loading="lazy" to itGive it a descriptive alt text

Sources

SEO Starter Guide (Google Search Central)
Influencing your title links in search results (Google Search Central)
An update to how we generate web page titles (Google Search Central Blog, August 2021)
More info about titles in Google Search (Google Search Central Blog, September 2021)
Control your snippets in search results (Google Search Central)
Google does not use the keywords meta tag in web ranking (Google Search Central Blog, September 2009)
URL structure best practices for Google (Google Search Central)
Link best practices for Google (Google Search Central)
Spam policies for Google web search: keyword stuffing (Google Search Central)
Google image SEO best practices (Google Search Central)
<h1>–<h6>: The HTML Section Heading elements (MDN)
<img>: The Image Embed element (MDN)
Choose the right image format (web.dev)
Browser-level image lazy loading for the web (web.dev)
Optimize Largest Contentful Paint (web.dev)
What Is On-Page SEO? And How to Do It (Semrush)
What Is a Title Tag? How to Optimize Your SEO Titles (Semrush)
What Is a Meta Description? (Semrush)
What Is a Slug? URL Slugs and Why They Matter for SEO (Semrush)
What Is Anchor Text? An Overview + Best Practices (Semrush)
Flesch Reading Ease: Does It Matter for SEO? (Ahrefs, July 2021)
roadmap.sh SEO roadmap: On-Page SEO (roadmap.sh)

Day 05 goes from one page to the quality of all your content: E-E-A-T, original data, content decay, entities and structured data.