What Is SEO? A Practical On-Page SEO Guide for Developers

SEO is the set of technical and strategic work that makes a website more visible in search engines. This article is the first part of an SEO series I wrote for developers: it briefly summarizes the building blocks of SEO, then walks through the on-page SEO topics that are directly in a developer's hands (title, meta description, headings, content structure and URLs) with code examples.

Next in the series: Technical SEO: robots.txt, sitemap.xml and Canonical Tags.

What Is SEO and Why Does It Matter?

SEO (Search Engine Optimization) is the work of helping a website rank higher in organic (unpaid) search results. The higher a page ranks, the more visible it becomes, and the more visible it is, the more visitors it receives.

SEO has five core components:

1. Keyword research: Finding out which terms people use when they search.
2. On-page SEO: Optimizing the content and HTML of the page itself.
3. Off-page SEO: External factors such as backlinks from other sites, brand awareness and reputation. Social media shares are not a direct ranking factor, but they can increase a content's visibility and its chances of earning links.
4. Technical SEO: Making the structure and code of the site friendly to search engine crawlers (speed, mobile friendliness, sitemaps, structured data).
5. Content creation: Producing valuable, engaging content that matches what people are searching for.

The Developer's Part in SEO

Most of these components belong to content and marketing. The developer's part falls under two headings: on-page SEO and technical SEO. The real job is to write validations that stop the mistakes a content editor could make, and to prevent the ones that do not come from the editor at all (such as broken HTML structure) in code. Where you leave the decision to the editor, the best solution is to guide them in the admin panel with warnings and clear help text.

Keyword research relies on tools such as Google Keyword Planner, Ahrefs and SEMrush; analyzing the target audience, competitors and long-tail phrases is usually the content side's job. As a developer, your part is to provide the fields where the outcome of that work is stored: focus keyword, title, meta description and so on.

The Title Tag

The page's <title> tag appears as the clickable headline in search results. Things to watch:

• Length: Keep it between 50 and 60 characters. (Google actually measures about 600 pixels of width rather than characters; this range is a safe rule of thumb.)
• Uniqueness: Every page needs its own title. When saving, the CMS should check whether the same title is already used on another page and, where possible, enforce uniqueness in the database as well.
• Keyword: It should contain the page's main keyword and describe the content accurately. The CMS should warn the user about this.

The Meta Description Tag

The meta description is the summary shown under the title in a search result. It is not a direct ranking factor, but it matters because it influences the click-through rate (CTR).

• Keep it between 150 and 160 characters.
• Write a natural sentence that summarizes the page clearly and encourages the click; avoid keyword stuffing.
• Make it unique whenever possible, but this is not a hard requirement. For pages without a description, define a standard default description that can be used site-wide.

Heading Tags (H1, H2, H3)

Heading tags show both users and search engines the skeleton of a page.

• H1: Each page should have exactly one H1, it should be unique and contain the main keyword. Keep it short enough to say what the page is about at a glance, and place it near the top of the page: visitors should understand what the page is about the moment they arrive.
• H2, H3…: Respect the hierarchy. On a news listing, for example, the page title is the H1, the news headlines are H2, and subheadings inside a story are H3. Keywords and length still matter, but you do not need to be as strict as with the H1.
• Semantic hierarchy: Headings exist to show the structure of the content, not just to make text bigger. Avoid skipping levels, such as jumping from H2 straight to H4.

An example heading hierarchy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SEO Optimization: Best Practices and Tips</title>
  <meta name="description" content="What is SEO and how do you use heading tags? Practical on-page SEO tips.">
</head>
<body>
  <h1>SEO Optimization: Best Practices and Tips</h1>

  <h2>What Is SEO?</h2>
  <p>SEO stands for Search Engine Optimization and means…</p>

  <h2>How Should Heading Tags Be Used?</h2>
  <h3>Why Heading Tags Matter</h3>
  <p>Heading tags organize the structure of a page and…</p>
  <h3>Using Heading Tags</h3>
  <p>H1 is the main heading of the page, H2 marks the main sections…</p>

  <h2>SEO Techniques</h2>
  <h3>On-Page SEO</h3>
  <p>Meta tags tell search engines what a page is about…</p>
</body>
</html>

Content and Semantic HTML

Most of the content is the site administrator's responsibility, but as developers we can still improve the user experience and the quality of the HTML:

• Design interactive areas (buttons, links, forms) so users can use them as easily as possible. For example, add a "back to top" button at the end of a long article.
• Give videos and images explicit dimensions (width / height) so the layout does not shift while the page loads. Load images and videos further down the page on demand with loading="lazy", but not the main image that is visible as soon as the page opens.
• When an image or video link is broken, show a default image or hide the element entirely.
• Wherever possible, use meaningful elements instead of <div>: <main>, <article>, <section>, <nav>, <header>, <footer>.

<main>
  <article>
    <header>
      <h1>Article Title</h1>
    </header>
    <section>
      <h2>Section Heading</h2>
      <p>Section content…</p>
    </section>
  </article>
</main>

URL Structure and Slugs

A URI (Uniform Resource Identifier) is the general term for something that identifies a resource on the internet. A URL (Uniform Resource Locator) tells you where the resource is and how to reach it, while a URN (Uniform Resource Name) identifies a resource by a location-independent name (for example urn:isbn:0451450523). In everyday use, it is the URL we usually mean. A URL is usually made up of these parts:

1. Protocol (scheme): Which protocol is used. Example: https://
2. Domain name: The name of the server hosting the resource. Example: www.example.com. Using "www" is not mandatory; what matters is picking one form and redirecting the other to it with a 301, so the site is not indexed at two addresses. A subdomain lets you run a different project at its own address, for example app.example.com.
3. Path: Points to a specific resource on the server. Example: /articles/what-is-seo. With ASP.NET routing we can build this structure however we like; the part that needs attention is the slug.
4. Port (optional): Usually omitted because the default ports for HTTP and HTTPS are 80 and 443. Example: :8080
5. Query parameters (optional): Provide extra information about the resource and start with "?". Example: ?id=123&name=example
6. Fragment (optional): Points to a specific section of the page and starts with "#". Example: #section2

What Is a Slug?

A slug is the readable, user-friendly part of a URL. It is usually a short string of text that reflects the title or content of the page and sits at the end of the URL. It helps both search engines and users understand what the page is about. A good slug is:

• Readable: it gives clear information about the page content.
• Short and to the point: unnecessary words are avoided.
• Keyword-rich: it contains the relevant keywords.
• Separated with hyphens (-): no spaces or underscores.

Examples: for a blog post titled "Best Practices for SEO Optimization" the slug is best-practices-for-seo-optimization and the full address is https://www.example.com/blog/best-practices-for-seo-optimization. For a product called "Blue Denim Jeans" the slug is blue-denim-jeans and the address is https://www.example.com/products/blue-denim-jeans.

What Developers Should Do

1. The CMS must let the user enter a purposeful slug.
2. Slugs must not contain non-ASCII characters (for Turkish content: ç, ğ, ı, ö, ş, ü) or spaces. If a user enters such a slug, warn them, or save it after replacing the special characters with their ASCII equivalents and the spaces with hyphens.
3. Keep slugs as short as possible and shorten them when needed.
4. Slugs must be unique; the same slug must not be entered twice under the same parent page (a unique index in the database is recommended).

A simple C# helper that converts Turkish characters:

using System.Text;
using System.Text.RegularExpressions;

public static class SlugHelper
{
    // Maps Turkish characters to their ASCII equivalents
    private static readonly Dictionary<char, char> TrMap = new()
    {
        ['ç'] = 'c', ['ğ'] = 'g', ['ı'] = 'i', ['ö'] = 'o', ['ş'] = 's', ['ü'] = 'u',
        ['Ç'] = 'c', ['Ğ'] = 'g', ['İ'] = 'i', ['I'] = 'i', ['Ö'] = 'o', ['Ş'] = 's', ['Ü'] = 'u'
    };

    public static string ToSlug(string text)
    {
        var sb = new StringBuilder();
        foreach (var ch in text.Trim())
            sb.Append(TrMap.TryGetValue(ch, out var mapped) ? mapped : char.ToLowerInvariant(ch));

        var slug = Regex.Replace(sb.ToString(), @"[^a-z0-9\s-]", "");
        return Regex.Replace(slug, @"[\s-]+", "-").Trim('-');
    }
}
// ToSlug("SEO Optimizasyonu İçin En İyi Uygulamalar")
// => "seo-optimizasyonu-icin-en-iyi-uygulamalar"

An ideal URL is as short as possible, understandable to the visitor, contains the keyword, is unique and reflects the site hierarchy.

On-Page SEO Checklist

• Is the title 50–60 characters, unique and does it include the keyword?
• Is the meta description 150–160 characters, natural and inviting? Is there a default description for pages that leave it empty?
• Is there exactly one H1 per page, and is the H2–H3 hierarchy intact?
• Are meaningful elements such as main, article, section and nav used wherever possible?
• Is the slug short, free of special characters, hyphen-separated and unique?
• Do images have dimensions and alt text?