Unit 6: SEO campaigns

The Basics of SEO Web Design

SEO web design is the practice of designing and developing websites to make them accessible, indexable, and understandable to search engine crawlers while simultaneously providing an excellent User Experience (UX). It bridges the gap between aesthetics and technical performance.

Core Principles of SEO Web Design

• Accessibility: Search engines must be able to crawl the site easily. If a search engine cannot access a page, it cannot rank it.
• User Experience (UX): Google’s algorithm heavily favors sites that provide a good UX. Metrics like bounce rate, dwell time, and click-through rate (CTR) indirectly influence rankings.
• Core Web Vitals: A set of specific factors that Google considers important in a webpage's overall user experience.
  • Largest Contentful Paint (LCP): Measures loading performance. Ideal LCP is 2.5 seconds or faster.
  • First Input Delay (FID) / Interaction to Next Paint (INP): Measures interactivity and responsiveness.
  • Cumulative Layout Shift (CLS): Measures visual stability (preventing unexpected layout shifts).
• Visual Hierarchy and Readability: Content should be structured using typography, whitespace, and layout blocks to guide the user's eye naturally, keeping them engaged and reducing bounce rates.

Building an SEO-Friendly Site

An SEO-friendly website is built from the ground up to allow search engines to explore and understand the site’s content seamlessly.

1. Site Architecture

A logical site structure helps search engines understand the relationship between pages.

• Flat Architecture: A structure where any page on a site can be reached in 3 to 4 clicks from the homepage. This ensures "link equity" (ranking power) flows efficiently throughout the site.
• Siloing: Grouping related content into distinct categories or directories to establish topical authority.

2. URL Structure

URLs should be readable by both humans and search engines.

• Best Practices: Use lowercase letters, separate words with hyphens (not underscores), keep them concise, and include primary keywords.
• Good: www.example.com/running-shoes/mens-nike-pegasus
• Bad: www.example.com/store/item12345?color=blue

3. XML Sitemaps and Robots.txt

• XML Sitemap: A file that lists a website's essential pages, making sure Google can find and crawl them all.
• Robots.txt: A text file instructing search engine bots on which pages to crawl and which to ignore.
  
  TEXT

  # Example of a robots.txt file
  User-agent: *
  Disallow: /admin-panel/
  Disallow: /checkout/
  Allow: /
  Sitemap: https://www.example.com/sitemap_index.xml
  

4. Security (HTTPS)

SSL (Secure Sockets Layer) is a verified ranking signal. Websites must use HTTPS to encrypt data between the browser and the server, ensuring user trust and meeting search engine security standards.

Building a Mobile-Friendly Site

With Mobile-First Indexing, Google predominantly uses the mobile version of the content for indexing and ranking. A mobile-friendly site is no longer optional; it is mandatory for SEO success.

Mobile Configuration Methods

1. Responsive Web Design (Recommended): The server sends the same HTML code to all devices, and CSS is used to alter the rendering of the page on the device.
2. Dynamic Serving: The server responds with different HTML/CSS on the same URL depending on the user agent requesting the page.
3. Separate URLs: Different code is served to each device, and on separate URLs (e.g., m.example.com).

Essential Mobile SEO Practices

• Viewport Configuration: Ensure the meta viewport tag is included in the head of the document so browsers know how to adjust the page's dimensions and scaling.
  
  HTML

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

• Touch Targets: Buttons and links must be large enough and spaced far enough apart to be easily tapped with a finger (minimum 48x48 pixels recommended by Google).
• Eliminate Intrusive Interstitials: Avoid pop-ups that cover the main content upon page load on mobile devices, as Google penalizes this poor UX.
• Readability: Text should be readable without requiring users to pinch or zoom. Use a base font size of at least 16px.

Making Your Page Search Engine Compatible

For a page to rank well, its content and underlying code must speak the language of search engines.

On-Page Elements

• Title Tags: The most critical on-page SEO element. Keep it under 60 characters, place the primary keyword near the beginning, and make it compelling.
• Meta Descriptions: Summarizes the page content. While not a direct ranking factor, a well-written description (under 160 characters) increases CTR.
• Header Tags (H1-H6): Use headers to structure content.
  • Only use one H1 tag per page (typically the page title).
  • Use H2s for main sections, and H3s/H4s for sub-sections.
  • Include keywords naturally within headers.

Image Optimization

Search engines cannot "see" images; they read the code associated with them.

• Alt Text (Alternative Text): Describe the image accurately for visually impaired users and search engine bots. Include keywords if relevant.
  
  HTML

      <img src="nike-running-shoes.jpg" alt="Men's Blue Nike Pegasus Running Shoes">
      

• File Formats and Compression: Use next-gen formats like WebP or AVIF. Compress images to ensure they do not slow down page load times.

Schema Markup (Structured Data)

Adding schema markup (using JSON-LD) helps search engines understand the context of your content, enabling Rich Snippets (e.g., star ratings, recipe times, event dates) in the search results.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Nike Pegasus",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "89"
  }
}
</script>

Canonicalization

When duplicate content exists across multiple URLs, search engines get confused about which one to rank. A canonical tag tells the search engine which version is the "master" copy.

<link rel="canonical" href="https://www.example.com/primary-page/" />

Perfecting Navigation and Linking Techniques

Links are the pathways that search engine spiders use to discover content and evaluate the authority of pages.

Internal Linking Strategies

Internal links connect pages on the same domain. They pass link equity and establish a hierarchy.

• Hub and Spoke (Cluster) Model: Create a main "hub" page targeting a broad topic (e.g., "SEO Guide"), and link out to "spoke" pages detailing subtopics (e.g., "On-Page SEO", "Link Building"). Spoke pages must link back to the hub.
• Contextual Linking: Place internal links within the body of your text where it provides value to the reader, rather than just in sidebars or footers.

Anchor Text Best Practices

Anchor text is the visible, clickable text in a hyperlink.

• Descriptive: Anchor text should clearly indicate what the linked page is about.
• Varied: Avoid using the exact same keyword-rich anchor text for every link (over-optimization). Mix in exact match, partial match, branded, and natural phrases (e.g., "click here", "read more").

Navigation Elements

• Breadcrumbs: A secondary navigation scheme that reveals the user's location in a website or web application (e.g., Home > Shoes > Men's Shoes > Running). Breadcrumbs improve UX and help search engines understand site structure. They should be marked up with structured data.
• Header and Footer Menus: Keep main navigation menus uncluttered. Link to the most important categories in the header. Use the footer for secondary links (privacy policy, terms, contact).

Managing Link Health

• Fixing Broken Links (404 Errors): Broken links create dead ends for both users and crawlers. Regularly audit your site to fix or remove broken internal and external links.
• Proper Use of Redirects: When a page is deleted or moved, use a 301 Permanent Redirect to send users and bots to the new, relevant URL. This preserves the SEO value (link equity) of the old page. Avoid 302 (temporary) redirects unless the move is genuinely temporary.