SEO Isn't Just the Marketer's Job

Many web designers treat SEO as someone else's problem — something marketers or developers bolt on after the site is built. This is a costly mistake. Decisions made during the design phase directly affect how well a site ranks, how fast it loads, and how easily search engines can understand its content. Building SEO into your workflow from day one is far more efficient than retrofitting it later.

Page Structure: The Foundation

Heading Hierarchy

Every page should have exactly one <h1> tag containing the primary keyword for that page. Subheadings should follow a logical h2 → h3 → h4 hierarchy. Don't choose heading levels based on font size — that's a CSS concern. Search engines use heading structure to understand content organization.

Semantic HTML

Use the right HTML element for the job. <nav> for navigation, <main> for primary content, <article> for standalone content pieces, <aside> for sidebars. Semantic markup gives search engines clear signals about your content structure and improves accessibility as a bonus.

Performance Signals

Core Web Vitals

Google uses Core Web Vitals as ranking signals. The three key metrics are:

  • LCP (Largest Contentful Paint): How quickly the main content loads. Aim for under 2.5 seconds.
  • CLS (Cumulative Layout Shift): How much the page jumps around during load. Keep it under 0.1.
  • INP (Interaction to Next Paint): How responsive the page is to user input. Aim for under 200ms.

Image Optimization

Always include descriptive alt attributes on images — this helps both SEO and screen reader users. Use modern formats like WebP or AVIF where possible. Specify width and height attributes on images to prevent layout shift during load.

Meta Tags & Open Graph

Each page needs a unique, descriptive <title> tag (50–60 characters) and a <meta name="description"> (up to 160 characters). While meta descriptions don't directly affect rankings, they influence click-through rates in search results.

Also implement Open Graph tags (og:title, og:description, og:image) so your pages look great when shared on social media — this drives indirect traffic that supports SEO.

URL Structure

Clean, readable URLs perform better in search results and are easier to share. Follow these rules:

  1. Use hyphens to separate words, not underscores
  2. Keep URLs short and descriptive
  3. Include the primary keyword when natural
  4. Avoid parameters and numbers where possible (e.g., /blog/seo-tips beats /blog?id=47)

Mobile & Crawlability

Google primarily indexes the mobile version of your site. Ensure your responsive design doesn't hide important content on mobile (avoid display: none on key content that only appears on desktop). Also make sure your navigation is crawlable — pure JavaScript menus that don't render without JS can prevent search engines from discovering pages.

An SEO Design Checklist

  • ✓ One H1 per page with target keyword
  • ✓ Logical heading hierarchy throughout
  • ✓ Semantic HTML landmarks used
  • ✓ All images have descriptive alt text
  • ✓ Pages pass Core Web Vitals thresholds
  • ✓ Unique title and meta description per page
  • ✓ Open Graph tags implemented
  • ✓ Clean, keyword-rich URL structure
  • ✓ Site is fully functional without JavaScript

Designers who understand SEO deliver better results for clients and are more valuable on any team. These aren't complex requirements — they're habits that become second nature with practice.