Technical Brief for SEO Compatible Website (To the Designer)
Solving the Design and SEO Conflict
The biggest pain in modern web projects is the production of sites that are "visually magnificent but completely unreadable for Google". While designers generally focus on UX (User Experience) and UI, in the production of an SEO compatible website, the code structure must be easily consumed (rendered/crawled) by search engine bots.
"Hard" Brief Checklist to Send to the Designer and Developer
The PDF or Word document you need to present to the team before starting the project should contain these strict rules:
- Image Usage (Optimization):
- Heavy .PNG and .JPG can never be used within the site. All assets must be served as WebP or AVIF.
- Each image must have `loading="lazy"` support (except banners) and the
alt=""tag must be left editable via CMS (Admin Panel).
- Heading (H1-H6) Hierarchy:
- For CSS styling purposes, it is not possible to say "Let's make this a giant font size H1". There should be only one H1 on a page, and the content should be placed in the design in a logical order as H2, H3.
- HTTP Header and Dynamic Metas:
- Design affects CMS. The URL (clean, parameter-free, e.g. site.com/kategori/product), Meta Title and Meta Description of each page should be written flexibly from the admin panel. OG (Open Graph) data must be printed compatible with the OG Preview interface.
- JS/Split Loading (Hydration):
- Menu, category links, etc. in React/Vue based (SPA) projects. It should not be left entirely as Client-Side Render (CSR). Server-Side Rendering (SSR) is mandatory for Googlebot to follow links (href).
IA (Information Architecture) and Navigation Rules
The designer should pay attention to the following when drawing the hamburger menu or main Header area: "Can the user reach important pages in 3 clicks at most?". In mobile and desktop navigation, full-screen iframe pop-ups that will interfere with rich snippets (as can be reviewed on Meta Analyzer) should be avoided.
As you share this checklist, you can audit your site yourself after the launch from the P0/P1 SEO Priority Guide to check whether the team is successful or not.