Design & SEO

I build websites that look sharp and actually get found. That means technical SEO baked into the architecture from day one, Core Web Vitals scores that pass every audit, structured data that helps search engines understand your content, and design workflows rooted in Figma so nothing gets lost between concept and code. Every project I deliver at 137Foundry is built to rank, load fast, and convert visitors into customers.

Industry Insights
68%
of all online experiences begin with a search engine, making technical SEO the foundation of digital visibility
53%
of mobile visitors abandon a site that takes longer than 3 seconds to load, directly impacting revenue
200%
average increase in design-to-development efficiency when using a structured Figma workflow

Technical SEO: The Foundation That Gets You Found

Technical SEO is the invisible architecture behind every high-ranking website. It has nothing to do with keyword stuffing or writing blog posts for the sake of word count. It is the structural work that determines whether search engines can crawl, index, and understand your site in the first place. I treat technical SEO as a first-class engineering concern, not an afterthought bolted on after launch.

Crawlability and Indexation

If Googlebot cannot crawl your pages efficiently, nothing else matters. I audit and configure robots.txt directives, ensure clean URL structures with no duplicate content traps, and set up proper canonical tags so search engines know exactly which version of a page to index. Every site I build gets an XML sitemap that is automatically generated and submitted to Google Search Console and Bing Webmaster Tools. I also handle pagination signals, hreflang tags for multilingual sites, and crawl budget optimization for larger sites where unnecessary pages can dilute indexing priority.

Meta Tags and On-Page Signals

Every page gets a unique, descriptive title tag and meta description written to communicate value to both search engines and the humans reading them in search results. I configure Open Graph and Twitter Card meta tags so your content looks polished when shared on social media. Heading hierarchy is structured logically — a single H1 per page, with H2s and H3s that break content into scannable, semantically meaningful sections. I also ensure image alt attributes are descriptive and contextual, not just filed with generic placeholder text.

Sitemaps, Robots, and Internal Linking

A well-structured internal linking strategy does more for your rankings than most people realize. I build navigation and content structures that distribute link equity effectively across your site. Breadcrumb navigation, contextual links within body content, and footer links all play a role. I configure XML sitemaps with proper priority and change frequency hints, and I set up robots.txt files that allow crawlers to reach important pages while blocking thin or duplicate content from wasting crawl budget.

Core Web Vitals: Speed as a Ranking Factor

Google uses Core Web Vitals as a direct ranking signal. These are not abstract metrics — they measure real user experience. I optimize every project to pass all three thresholds, and I monitor them in production to catch regressions before they affect your rankings or your users.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the page to finish rendering. The target is under 2.5 seconds. I achieve this by optimizing critical rendering paths, implementing responsive image formats like WebP and AVIF with proper srcset attributes, lazy-loading offscreen images, preloading hero images and above-the-fold fonts, and minimizing render-blocking CSS and JavaScript. Server-side rendering and efficient caching strategies also play a major role. Every millisecond matters, and I measure the impact of each change with Lighthouse, PageSpeed Insights, and real-user monitoring data from Chrome User Experience Report (CrUX).

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts while content is loading. Nothing frustrates users more than clicking a button only to have it jump out from under their finger because an ad or image loaded late. I prevent layout shift by explicitly setting width and height attributes on all images and video elements, reserving space for dynamically loaded content, using CSS contain where appropriate, and ensuring web fonts load without causing invisible or swapped text that reflowed the layout. The target is a CLS score below 0.1, and I consistently deliver scores well under that.

Interaction to Next Paint (INP)

INP replaced First Input Delay in 2024 and measures the responsiveness of a page to user interactions throughout the entire session, not just the first click. The target is under 200 milliseconds. I keep INP low by minimizing long tasks on the main thread, breaking up expensive JavaScript operations with requestIdleCallback and yielding strategies, using web workers for heavy computation, debouncing event handlers where appropriate, and keeping DOM sizes reasonable. Heavy client-side frameworks can destroy INP scores if not managed carefully, which is why I favor lean, server-rendered architectures supplemented with targeted JavaScript only where interactivity is genuinely needed.

Structured Data and Schema Markup

Structured data is how you communicate directly with search engines in their own language. By adding JSON-LD schema markup to your pages, you give Google and Bing explicit signals about what your content represents — whether it is a local business, a product, a FAQ, a review, an event, or an article. This is what powers rich results: those enhanced search listings with star ratings, pricing, FAQ dropdowns, breadcrumb trails, and business information that take up more visual space in search results and drive higher click-through rates.

I implement schema markup on every project as standard practice. For local businesses, that means LocalBusiness or ProfessionalService schema with accurate NAP (name, address, phone) data, opening hours, and service areas. For e-commerce sites, I add Product schema with pricing, availability, and review aggregation. I use BreadcrumbList schema to generate breadcrumb trails in search results, FAQPage schema for frequently asked questions, and Article or BlogPosting schema for content-driven sites. Every implementation is validated against Google's Rich Results Test and Schema.org documentation to ensure there are no errors or warnings that would prevent rich results from appearing.

I also monitor structured data performance in Google Search Console to track which rich results are being generated, which pages have errors, and where there are opportunities to add new schema types that could improve visibility.

Figma: Design-to-Code Without the Guesswork

I use Figma as my primary design tool because it eliminates the gaps that traditionally plague the handoff between design and development. Since I handle both sides of the process, Figma serves as a single source of truth where every spacing value, color token, font size, and component variant is defined precisely and translates directly into code.

Component-Based Design Workflow

Every project starts with a component library in Figma. Buttons, form fields, cards, navigation elements, modals — all of these are built as reusable components with clearly defined variants for different states (default, hover, active, disabled, error). This mirrors the component architecture I use in code, whether the front end is built with React, Vue, or plain HTML and CSS. The result is pixel-perfect implementation with no ambiguity about how something should look or behave.

Design Tokens and Consistency

I define design tokens in Figma for colors, typography scales, spacing units, border radii, and shadow values. These tokens map directly to CSS custom properties or Tailwind configuration values in the codebase. When a client requests a brand color change or a typography update, I change the token in one place and it propagates everywhere — in both the Figma file and the code. This approach eliminates the drift between design files and live code that plagues so many projects.

Responsive Design and Prototyping

Every Figma project includes layouts for mobile, tablet, and desktop breakpoints. I use auto layout and constraints to demonstrate how components flex, wrap, and stack at different viewport widths. Interactive prototypes let clients experience navigation flows, form interactions, and page transitions before a single line of code is written. This catches usability issues early, reduces revision cycles, and gives clients confidence in the direction before development begins.

Design Systems That Scale

For businesses that are going to grow — adding new pages, new features, new product lines — a design system is not a luxury. It is an investment that pays for itself within the first few months. I build design systems that include a documented component library, a defined set of patterns for layout and interaction, and clear guidelines for extending the system without breaking consistency.

A well-built design system means new pages can be assembled from existing components in hours instead of days. It means every developer who touches the codebase produces work that looks and feels consistent. And it means design reviews become faster because the foundational decisions have already been made and documented.

I deliver design systems as both Figma libraries and code component libraries, depending on the tech stack. The two stay in sync because they are built from the same token definitions, and I document every component with usage guidelines, accessibility notes, and example implementations.

SEO and Design: How They Work Together

Discipline What It Solves Impact on Business
Technical SEO Crawlability, indexation, meta tags, sitemaps, internal linking Search engines can find and rank your pages correctly
Core Web Vitals Page speed, visual stability, interaction responsiveness Better rankings, lower bounce rates, higher conversions
Structured Data Rich results, knowledge panels, enhanced search listings Higher click-through rates and more qualified traffic
Figma Workflow Design-to-code accuracy, component consistency, faster iteration Reduced development time, fewer revisions, pixel-perfect results
Design Systems Reusable components, design tokens, scalable patterns Faster feature delivery, consistent brand experience across pages

These disciplines are not separate line items on a proposal. They are interconnected layers of the same build process. A fast site with broken crawlability will not rank. A beautifully designed site with a 6-second load time will hemorrhage visitors. I deliver both because the whole point is to build something that works — not just something that looks good in a screenshot or passes a single audit.

My Approach to Every Project

I start every engagement with a technical audit. If the site already exists, I run it through Lighthouse, Screaming Frog, Google Search Console, and PageSpeed Insights to identify the biggest issues and the fastest wins. If it is a new build, I establish the SEO architecture, design system, and performance budget before writing any code.

Throughout the build, I test against real Core Web Vitals data, validate structured data with Google's testing tools, and review every page against the design files in Figma to ensure nothing drifted. Before launch, I run a full pre-launch SEO checklist covering redirects, canonical tags, sitemap submission, analytics configuration, and Search Console verification.

After launch, I monitor performance and search visibility to catch regressions and identify new opportunities. SEO and performance optimization are not one-time tasks. They are ongoing disciplines that require attention as content changes, traffic patterns shift, and search engine algorithms evolve.

AI Search Optimization (AEO & GEO)

Search behavior has changed. A growing share of questions never reach a list of blue links at all — they get answered directly by an AI assistant or an AI overview at the top of the results. If your business is invisible to those systems, you lose the customer before the click was ever available to win.

This discipline goes by several names — Answer Engine Optimization, Generative Engine Optimization, or simply AI search visibility. The goal is different from classic SEO: instead of ranking a page, you are trying to be the source an AI system retrieves, trusts, and cites when it composes an answer.

A lot of what works is familiar. Clean semantic HTML, fast pages, and structured data matter more than ever, because a machine assembling an answer needs to parse your content unambiguously. Content organized around real questions with direct answers gets extracted; marketing copy that takes four paragraphs to say what you do gets skipped. Consistent facts across your site, your sameAs profiles, and third-party listings are what let a system resolve you as a specific entity rather than a name it cannot verify.

Some of it is genuinely new. llms.txt is an emerging convention — a plain-language file that tells AI systems who you are, what you do, and which pages matter, in a format built for machine consumption rather than crawling guesswork. AI crawler access is now a deliberate decision: GPTBot, ClaudeBot, PerplexityBot, and Google-Extended each read your robots rules, and blocking them is a legitimate choice that also removes you from those answers. I make sure that is a decision you made on purpose rather than a default someone inherited.

This is not theory here. This site publishes its own llms.txt and full AI reference, and I built the free tools that audit this exact thing — an AI discoverability checker, an agent-readiness audit, and an AI permissions auditor. You can run them against your own site right now, for free, before you talk to me about anything.

What I Do for AI Visibility

  • Entity-grade structured data with a complete, verifiable sameAs profile set
  • An llms.txt and machine-readable reference describing your business
  • Deliberate AI crawler policy in robots.txt, per bot, decided rather than inherited
  • Content restructured into question-and-answer form that extracts cleanly
  • Consistent business facts across your site, listings, and social profiles

Analytics & Conversion Tracking

Optimization without measurement is decoration. Before I change anything on a site, I make sure we can tell whether it worked — and that means four tools doing four different jobs.

Google Analytics 4 tracks behavior on the site: which pages people land on, where they leave, which paths lead to a conversion. GA4 is event-based rather than pageview-based, which is more powerful and also why so many installations are configured badly. I set up the events that map to your actual business outcomes — form starts, form submissions, calls tapped, bookings completed — rather than accepting defaults that measure nothing you care about.

Google Search Console answers the question GA4 cannot: what people searched before they arrived, which queries you appear for, where you rank, and which pages Google has indexed or refused to. It is also where indexing problems surface, and it is free, which makes not having it configured properly indefensible.

Google Tag Manager is the layer that keeps all of this maintainable. Tags, triggers, and variables live in one place with version history and rollback, so adding or changing tracking does not require a code deploy — and a marketing consultant can be given access without being handed your codebase.

Meta Pixel and the Conversions API matter the moment you spend money on ads. Browser-based tracking alone loses a meaningful share of conversions to ad blockers, browser privacy features, and consent choices, and under-reported conversions mean the ad platform optimizes against bad data and wastes your budget. Sending events server-side through the Conversions API recovers that signal, with proper deduplication so a conversion is counted once rather than twice. This site runs exactly that setup, so it is a pattern I maintain in production rather than a recommendation from a blog post.

Accessibility & WCAG 2.2

Roughly one in four adults in the United States lives with a disability. An inaccessible site turns that away silently — no complaint, no bounce report you would recognize, just revenue that never happened. WCAG 2.2 Level AA is the standard I build to, and it is the benchmark courts and procurement departments reference.

There is a legal dimension worth naming plainly: web accessibility lawsuits are filed by the thousands every year, they overwhelmingly target small and mid-sized businesses, and settling one costs far more than building the site correctly in the first place. But the honest reason to do it is that it is the difference between a customer being able to buy from you and not.

In practice this means semantic HTML that assistive technology can navigate, every interactive element reachable and operable by keyboard alone, visible focus indicators that survive the design review, color contrast that meets the ratio rather than approximately meeting it, real labels on every form field, error messages that are announced rather than only shown in red, alt text that conveys meaning instead of restating the filename, and ARIA used only where semantic HTML genuinely cannot express the pattern.

I test with actual keyboard navigation and a screen reader, not just an automated scan. Automated tools catch perhaps a third of real issues — they will tell you a button has no accessible name, but not that your tab order jumps around the page or that a modal traps a keyboard user with no way out. I use them as a first pass, not as a verdict.

The overlap with SEO is not a coincidence, either. Proper heading hierarchy, descriptive link text, semantic landmarks, and alt attributes make a page more legible to a search crawler and an AI system for exactly the same reasons they make it usable with a screen reader.

Local SEO

If your customers are within driving distance, local SEO is probably the highest-return work available to you. A large share of searches carry local intent, "near me" searches convert at a far higher rate than general queries, and the top three map results absorb most of the clicks. For a service business, ranking in that map pack usually matters more than ranking for any national keyword.

Google Business Profile is the foundation, and it is the single most under-maintained asset most local businesses own. Complete every field. Choose the primary category precisely, because it drives a surprising amount of ranking. Add real photos, keep hours accurate including holidays, use the products and services sections, and post occasionally so the profile reads as active rather than abandoned.

NAP consistency — name, address, phone — is unglamorous and decisive. Those three facts must match exactly across your website, your structured data, your Business Profile, and every directory that lists you. One stale phone number on an old listing genuinely undermines your local rankings, because search engines treat conflicting data as a signal they cannot verify you.

Reviews influence both ranking and whether someone chooses you once they see you. Volume, average rating, recency, and whether the owner responds all factor in. What works is a simple, systematic ask at the moment a customer is happiest, not a campaign every eighteen months.

On the site itself: location-specific pages with genuinely distinct content rather than the same paragraph with the city swapped, LocalBusiness schema with accurate service areas and hours, embedded maps, and directions. Google can tell the difference between a real service-area page and a template mail-merged across forty towns, and it treats them very differently.

Want Better Rankings and Design?

Book a free discovery call to discuss your SEO and design needs.

Book a Call