Topic 4: On-page & Technical SEO

📖 7 min read · 🎯 beginner · 🧭 Prerequisites: competitive-research, link-building-strategies

Why this matters

Here's the thing — you could write the most useful article on the internet and still watch it sit on page 5 of Google, getting zero clicks. That's not bad luck. That's a signal problem. Search engines can't reward content they struggle to read, index, or trust. On-page SEO is how you shape each page so Google understands exactly what it's about. Technical SEO is the behind-the-scenes work — site speed, crawlability, structure — that determines whether your pages even show up in the race. Get both right, and you stop hoping for traffic and start earning it.

What You'll Learn

• How to perform keyword research and embed keywords strategically across titles, headings, URLs, meta tags, and body content
• Best practices for writing high-quality content, optimizing meta tags, and structuring internal links
• How to improve site speed, mobile-friendliness, and SSL security
• How to configure XML sitemaps, robots.txt, and structured data schema markup for maximum crawlability and rich snippets

The Analogy

Think of your website as a library. On-page SEO is the librarian who labels every book with a clear title, summary, and subject tags so patrons can find exactly what they need. Technical SEO is the building itself — the well-lit aisles, the functioning elevator, the fire-safe exits — infrastructure that determines whether the library is open and navigable at all. A beautifully labeled book in a dark, crumbling building goes unread; a pristine building stocked with unlabeled volumes is equally useless. You need both the librarian's craft and the architect's rigour to run a library people actually visit.

Chapter 1: Keyword Research and Optimization

Every on-page optimization campaign starts with understanding what words your audience actually types into search engines.

Step 1 — Identify Target Keywords

Use dedicated tools to surface relevant, high-intent keywords:

• Google Keyword Planner — free, tied directly to Google's index, great for volume estimates
• SEMrush — competitive gap analysis, keyword difficulty scores
• Ahrefs — backlink-aware keyword research, content gap reports

Step 2 — Strategic Keyword Placement

Once you have your target keywords, place them in these specific locations:

Example: For a fitness blog post titled "10 Best Home Workouts," use the keyword home workouts in the title tag, H1 heading, URL slug (/home-workouts), meta description, and woven naturally throughout the body text.

Chapter 2: High-Quality Content

Search engines rank pages that genuinely serve users. No amount of keyword placement rescues thin, generic content.

Best Practices:

• Original and Valuable: Create content that provides real value — answer questions your audience is actually asking.
• Length and Depth: Longer, in-depth content tends to rank better because it covers a topic comprehensively.
• Readability: Use short paragraphs, bullet points, and subheadings so readers can scan efficiently.
• Multimedia: Include images, videos, and infographics to boost engagement and dwell time.

Example: Instead of a 300-word summary, write a comprehensive guide — "The Ultimate Home Workout Routine" — with detailed exercises, step-by-step instructions with numbered lists, embedded instructional images, and embedded video demonstrations.

Chapter 3: Internal Linking

Internal links are the connective tissue of your site. They guide both users and crawlers through your content graph.

Benefits:

• Improves Navigation: Helps users find related content without leaving your site.
• Distributes Link Equity: Passes authority from high-ranking pages to newer or lower-authority ones.
• Boosts Indexing: Helps search engines discover and index pages that might otherwise be missed.

Best Practices:

• Relevant Links: Only link to articles and resources that are genuinely related to the source page.
• Anchor Text: Use descriptive anchor text that includes keywords — never "click here."
• Link Structure: Maintain a logical hierarchy and avoid excessive linking that dilutes value.

Example: In a blog post about "Cardio Exercises," include internal links to "Benefits of Running" and "How to Choose the Right Running Shoes" using those phrases as anchor text.

Chapter 4: Meta Tags Optimization

Meta tags are the signage on your library books — they tell both users and search engines what each page is about before anyone opens it.

Title Tag

• Include Keywords: Place the main keyword near the beginning of the title.
• Character Limit: Keep it under 60 characters to avoid truncation in SERPs.

Meta Description

• Summarize Content: Provide a concise, accurate summary of what the page covers.
• Include Keywords: Naturally weave in target keywords — they bold in search results when they match the query.
• Character Limit: Keep it under 160 characters.

Example — Healthy Eating Tips page:

<title>Healthy Eating Tips for a Balanced Diet | YourSite</title>
<meta name="description" content="Discover practical healthy eating tips to maintain a balanced diet. Learn more about nutritious foods and healthy habits.">

Chapter 5: URL Structure

Clean URLs are readable by humans and search engines alike.

Best Practices:

• Descriptive and Short: Use concise, meaningful slugs.
• Include Keywords: Incorporate the target keyword.
• Avoid Special Characters: Use hyphens (-) to separate words; avoid underscores, query strings, or encoded characters.

Example:

# Good
https://www.yoursite.com/healthy-eating-tips

# Bad
https://www.yoursite.com/p=123
https://www.yoursite.com/page?id=456&cat=health

Chapter 6: Site Speed and Performance

Technical SEO begins with performance. A slow site loses both users and rankings.

Why It Matters:

• User Experience: Faster sites keep users engaged and reduce bounce rates.
• Search Rankings: Page speed is a confirmed ranking factor in Google's algorithm.

Optimization Techniques:

• Image Compression: Use tools like TinyPNG to compress images without visible quality loss.
• Browser Caching: Configure cache headers so returning visitors load static files from local storage.
• Minify CSS and JavaScript: Strip whitespace and comments to reduce file sizes.
• Content Delivery Network (CDN): Distribute static assets across global edge servers so users fetch from the nearest node.

Workflow Example:

# Run Google PageSpeed Insights (CLI via Lighthouse)
npx lighthouse https://yoursite.com --output html --output-path ./report.html

# Then address the top opportunities:
# - Compress images flagged as oversized
# - Defer non-critical JavaScript
# - Enable GZIP/Brotli compression on the server

Tool: Use Google PageSpeed Insights to identify specific bottlenecks and get prioritized recommendations.

Chapter 7: Mobile-Friendliness

More than half of global web traffic originates from mobile devices. Google's mobile-first indexing means the mobile version of your site is the primary version Google evaluates.

Optimization Tips:

• Responsive Design: Ensure your layout adapts fluidly to all screen sizes using CSS media queries or a responsive framework.
• Viewport Configuration: Include the viewport meta tag so mobile browsers render correctly.
• Mobile Usability: Ensure buttons, links, and forms have adequate tap targets and are easy to interact with on small screens.

Example — Viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tool: Use Google's Mobile-Friendly Test to audit your site and receive specific usability fixes.

Chapter 8: Secure Sockets Layer (SSL)

HTTPS is no longer optional — it is a baseline requirement for trust, security, and search rankings.

Why It Matters:

• Data Security: SSL encrypts data in transit, protecting user credentials and personal information.
• Trust and Credibility: Browsers label HTTP sites as "Not Secure," which erodes user confidence.
• Search Rankings: HTTPS is a confirmed ranking signal in Google's algorithm.

Optimization Steps:

• SSL Certificate: Obtain and install an SSL certificate on your server.
• 301 Redirects: Set up server-level redirects from all http:// URLs to https://.
• Mixed Content: Audit all page assets (images, scripts, stylesheets) to ensure everything is served over HTTPS — a single HTTP asset triggers browser warnings.

Example — Apache redirect in .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Free SSL: Use Let's Encrypt to obtain a free, auto-renewing SSL certificate via Certbot.

Chapter 9: XML Sitemaps and Robots.txt

These two files are your direct communication channel with search engine crawlers.

XML Sitemaps

• Purpose: An XML sitemap lists every important URL on your site, helping crawlers discover and index pages — especially new or deep-linked ones.
• Best Practices: Include all important pages, exclude thin or duplicate content, update regularly when new pages are published, and submit to Google Search Console.

Example — minimal XML sitemap structure:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.yoursite.com/</loc>
    <lastmod>2026-05-01</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.yoursite.com/healthy-eating-tips</loc>
    <lastmod>2026-04-15</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

Robots.txt

• Purpose: Controls which parts of your site crawlers are allowed to access.
• Best Practices: Allow crawlers access to all important pages; block admin panels, internal search results, and duplicate or staging content.

Example — robots.txt:

User-agent: *
Disallow: /admin/
Disallow: /search?
Allow: /

Sitemap: https://www.yoursite.com/sitemap.xml

Tool: Use Yoast SEO (WordPress) to auto-generate and maintain both your XML sitemap and robots.txt without manual editing.

Chapter 10: Structured Data and Schema Markup

Schema markup is metadata you embed in your HTML that teaches search engines exactly what your content means — enabling rich snippets in SERPs.

Why It Matters:

• Enhanced SERP Features: Rich snippets (star ratings, FAQs, product prices) stand out visually in search results.
• Improved CTR: Pages with rich snippets typically earn higher click-through rates than plain blue links.

Common Schema Types:

Example — FAQ schema in JSON-LD:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the best time to work out?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The best time is whenever you can be consistent — morning workouts improve adherence for most people."
      }
    }
  ]
}

Embed this inside a <script type="application/ld+json"> tag in your page <head>.

Tool: Use Google's Structured Data Markup Helper to generate schema markup visually, then validate it with Google's Rich Results Test.

flowchart TD
    A[Page Published] --> B[On-Page SEO]
    B --> B1[Keyword Placement]
    B --> B2[Meta Tags]
    B --> B3[Internal Links]
    B --> B4[URL Structure]
    A --> C[Technical SEO]
    C --> C1[Site Speed]
    C --> C2[Mobile-Friendly]
    C --> C3[SSL / HTTPS]
    C --> C4[Sitemap + Robots.txt]
    C --> C5[Schema Markup]
    B1 & B2 & B3 & B4 --> D[Better Rankings]
    C1 & C2 & C3 & C4 & C5 --> D
    D --> E[More Organic Traffic]

🧪 Try It Yourself

Task: Audit a single page on your site (or a demo page) using Google's free tools and fix at least two issues.

Steps:

1. Open Google PageSpeed Insights and enter your URL. Note any images flagged as uncompressed or scripts flagged as render-blocking.
2. Open Google's Mobile-Friendly Test with the same URL. Note any viewport or tap-target warnings.
3. Add this snippet to the <head> of your page if the viewport tag is missing:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Add a basic FAQ schema block to the <head> using the JSON-LD example above, substituting your own question and answer.

Success Criteria: PageSpeed Insights shows a green score (90+) for mobile, the Mobile-Friendly Test returns "Page is mobile friendly," and Google's Rich Results Test validates your FAQ schema without errors.

🔍 Checkpoint Quiz

Q1. What is the character limit for a meta description before it risks being truncated in search results?

A) 60 characters B) 120 characters C) 160 characters D) 200 characters

Q2. A developer sets up their site with the following robots.txt. Which pages will Google be blocked from crawling?

User-agent: *
Disallow: /admin/
Disallow: /search?
Allow: /

A) All pages except /admin/ and URLs containing /search? B) All pages on the site C) Only the homepage D) Only pages under /admin/ — the Allow: / overrides everything else

Q3. Given this <head> snippet, what SEO problem does it have?

<title>Tips</title>
<meta name="description" content="We have tips for everything you could possibly want to know about all kinds of topics including health, fitness, nutrition, travel, finance, and relationships.">

A) The title tag is too long B) The meta description is too long and the title is too short and keyword-free C) The meta description is missing D) There is no problem — this is valid SEO markup

Q4. Your e-commerce product page sells running shoes. Which schema type would you add to enable star ratings and price information to appear directly in Google search results?

A) Article B) FAQPage C) Product D) BreadcrumbList

A1. C) 160 characters — title tags should stay under 60 characters; meta descriptions under 160. Beyond those limits, Google truncates with an ellipsis.

A2. A) Crawlers are blocked from /admin/ paths and any URL containing search? as a query string. All other pages remain accessible via Allow: /.

A3. B) The title "Tips" contains no keywords and gives zero context to search engines or users. The meta description at well over 160 characters will be truncated. Both should be rewritten: a keyword-rich title under 60 characters and a tight, keyword-included description under 160 characters.

A4. C) Product schema enables rich snippet features including price, availability, and aggregate star ratings in Google SERPs.

🪞 Recap

• On-page SEO requires placing target keywords in six key locations: title tag, headings, URL, meta description, body content, and image alt text.
• Meta titles stay under 60 characters; meta descriptions stay under 160 — both should naturally include target keywords.
• Technical SEO addresses crawlability and performance: compress images with TinyPNG, add the viewport meta tag for mobile, enforce HTTPS with 301 redirects, and submit an XML sitemap to Google Search Console.
• A robots.txt file tells crawlers what to skip; an XML sitemap tells them what to find.
• JSON-LD schema markup (Article, Product, Review, FAQPage) enables rich snippets that increase click-through rates from search results.

📚 Further Reading

• Google Search Central — On-page SEO guide — the source of truth on what Google actually measures
• Google PageSpeed Insights — real-time performance scoring with fix recommendations
• Schema.org Full Type Hierarchy — every structured data type available for markup
• Let's Encrypt Getting Started — free SSL certificates with automated renewal
• Yoast SEO Documentation — sitemap and robots.txt automation for WordPress
• ⬅️ Previous: Link Building Strategies
• ➡️ Next: Advanced Targeting and Retargeting Techniques