221: Machine-First Architecture: The Framework for Building Websites That Work for AI and Humans

In 2009, Luke Wroblewski's "mobile first" changed how every website gets built. Start with the harder constraint, and the rest gets better. Now the harder constraint is not a small screen. It's no screen at all. Sani introduces Machine First Architecture, a four-pillar framework covering everything from how you define your business to how machines interact with your website. Identity, structure, content, interaction. In that order.

Chapters

• 00:00 - Introduction: The Mobile First Parallel
• 01:24 - Why Machine First Follows the Same Pattern
• 05:09 - Pillar 1: Identity
• 08:05 - Pillar 2: Structure
• 12:34 - Pillar 3: Content
• 15:20 - Pillar 4: Interaction
• 19:29 - Why This Matters Now
• 22:30 - One Action Per Pillar
• 24:30 - Closing

Key Stats

• Brands on 4+ platforms are 2.8x more likely to appear in ChatGPT responses, but only with consistent identity (Digital Bloom)
• 70%+ of Google's first page results use schema markup
• Pages with 19+ verifiable data points averaged 5.4 AI citations vs 2.8 for pages with minimal data (SE Ranking, ~130K domains)
• 96% of AI Overview content comes from sources with verified E-E-A-T signals
• AI browser traffic to US retail sites increased 4,700% YoY in July 2025 (Adobe Analytics)

Key Takeaways

1. Machine first is the new mobile first. What works for a parser works for humans. The reverse is never true.
2. Identity comes before optimization. You need a canonical, structured definition of your business before you touch anything else.
3. Your website is a data model, not a wireframe. The page is a rendering of structured data. Machine-critical info goes at the top.
4. Content must be answer-first and verifiable. Machines evaluate the first few hundred words. Vague marketing copy is invisible.
5. Machines are not just reading your site, they're using it. Agents shop, book, and fill out forms. Visual-only confirmations and modal pop-ups break them silently.
6. Every agent failure is invisible. The agent moves to a competitor. You never see the lost transaction.

What to Do (One Action Per Pillar)

• Identity: Write your canonical definition as fields. Google your business name. Fix every platform that tells a different story.
• Structure: Disable JavaScript and visit your site. If content disappears, you're invisible to most AI crawlers.
• Content: Read the first paragraph of your key pages. If it doesn't state what the page is about, rewrite it.
• Interaction: Complete a core action on your site using only a screen reader. If you can't finish the flow, an agent can't either.

Links

• Machine First Architecture: machinefirstarchitecture.com
• Subscribe: nohacks.co/subscribe

No Hacks is a podcast about web performance, technical SEO, and the agentic web. Hosted by Slobodan "Sani" Manic.

Transcript

Machine First Architecture: Identity to Interaction
===

[00:00:00] in 2009, a guy named Luke Robowski wrote a blog post that eventually changed how every single website on Earth gets built. Two words. Mobile first. His argument was simple. Do not design for a big screen and then squeeZ it down.

[00:00:16] Start with a small screen, the harder constraint, the one that forces you to figure out what actually matters. Because if it works on the phone, it's going to work everywhere. That idea took years to fully play out by 2016. Mobile traffic had finally overtaken desktop. By 2024, Google had finished migrating every single website on the internet to Mobile First Index Inc.

[00:00:41] That's a 15 year journey from a blog post to fully adopted industry standard, and I'd argue that now we are standing on the same inflection point again except. This time, the harder constraint is not a small screen. It's no screen at all. It's a machine. So today I would like to introduce a framework I've been working on.

[00:01:04] I call it Machine first architecture. It has four pillars in a very specific order that cover everything from how you define yourself to how machines interact with your website. It's not a checklist, it's a process. It's a way of thinking, a way of working, and it goes further than geo, SEO, and any other o.

[00:01:24] I'm your host, sunny, and this is no hacks.

[00:01:37] Let me stay with the mobile first story for a second, because the parallels are just too clean to ignore. Rob's original argument came down to one sentence. Embracing constraints rather than fighting them will ultimately get you to better designs. Swallowed the frogs swallowed the bigger frog, all that stuff.

[00:02:00] Mobile had three constraints. That desktops did not have. A tiny screen, an unreliable connection, and a user who was probably doing something else at the time, walking, standing in line half paying attention. Those constraints, force designers to make hard choices. What actually matters on this page? What can we cut?

[00:02:20] What needs to be front and center? And the thing that. Surprised everyone and I think still surprises everyone. Once you made those decisions for mobile, your desktop website got better too. You had leaner code, you had faster load times, you had clearer content hierarchy. The constraint did not limit the website to product to page.

[00:02:43] It improved it across the board.

[00:02:48] By February, 2010, Google, CEO, Eric Schmidt was on stage at at a conference in Mobile World Congress declaring that Google strategy. This was next year. Google strategy was mobile first in everything. When he said that mobile was just a tiny little fraction of web traffic, desktop dominated, but a signal sent by Google was very clear and then.

[00:03:14] The transition started happening and it was so much faster than people expected, but still slow by 2026 standards. In April, 2015, six years after mobile, first, Google rolled out the mobile, get an update. Websites that were not mobile friendly saw. 50% roughly of their ranking drop overnight. October, 2016, stat counter reported that mobile traffic had surpassed desktop globally for the first time ever, and then a month later, Google announced mobile first indexing that they completed in July, 2024.

[00:03:50] Every website on the internet is being indexed mobile first. Now, why am I telling you this story? Well, the pattern from concept to data to industry standard is about to repeat, and it's going to be compressed just like everything else in 2026 and in this crazy AI era we live in, mobile first said. Start with a harder constraint, a small screen, because what works on the phone will work everywhere.

[00:04:17] Machine first says, start with a harder constraint, A machine with no visual interface. Because what works for a parser, it's easier to make that work for human. The reverse is never true. A machine cannot see your beautiful design. It cannot mouse over your dropdown menus, cannot scroll your infinite feed.

[00:04:40] It just pares your HTML reduced structure data and either understands what you are or doesn't. If your website is built for that, it's going to work for everyone. If you've built only for human eyes, the machines are getting locked out. We are. I would argue. In the machine. First timeline, the concept exists, the data supported the industry has not caught up yet.

[00:05:09] So let me walk you through the framework. Four pillars, identity, structure, content and interaction, and the order matters.

[00:05:18] 

[00:05:21] The first pillar of the framework is identity, and I mean something very specific by that. Before you optimize a single page on your website, before you touch your HTML schema design, you need a canonical definition of what your business is. I don't mean a tagline, I don't mean a mission statement. I mean a structured machine, readable definition fields.

[00:05:45] Form fields, database field. Think about that and not paragraphs, what you do, who you do it for, why you do it, where you operate, what credentials you hold. Who founded you, what entities you related to. This becomes your primary source of truth and everything else needs to derive from it.

[00:06:04] Your website, your Google Business profile, your LinkedIn directory listings, every platform where your brand exists should be expressing the same definition, of course, adapted to how that specific platform makes data available to machines and humans. And this is because machines cross reference everything.

[00:06:24] Google's knowledge graph contains roughly 54 billion entities and 1.6 trillion facts, and Google will cross reference your business data with at least 10 external platforms to confirm your real and consistent. The 2024 API leak. Has confirmed that entity recognition, site authority, and knowledge graph reconciliation are real trust factors in the world we're living in.

[00:06:52] So if your website says AI strategy consulting, your LinkedIn says tech consultant and your director listing says, digital marketing agency, a machine cannot consolidate those into one strong entity and you become three separate weaker signals instead of one strong one. And I've been guilty of this in the past, and the number where this really, lands is digital.

[00:07:19] Bloom's Research found that brands on four or more non-affiliated platforms are 2.8 times more likely to appear in chat GPT responses, but only, but only if those platforms tell the same story. Identity is also not a one time exercise because. You need to treat that canonical definition like a version document.

[00:07:41] If you work with software, you write code. You know of GitHub. That's exactly what I'm thinking here. When the canonical definition changes, you need to propagate that across your entire ecosystem and it this needs to be an operational discipline, not something you do quarterly or annually or whatever. It needs to be a deliberate tracked update.

[00:08:05] You do every time you change your canonical definition. Now, once you have defined who you are, once you have worked on the first pillar of the framework identity, you need to work on structure. That is the second pillar. This is about architecting your website for extraction and not just browsing Most websites, all websites are designed to look good to humans first.

[00:08:34] Structure flips that a little bit. You start with a data model. I talked about that in the intro. What are the fields in a database that you would need to describe what you're offering, what the product is, who it's for, how much it costs, if it's available, and then the page, that thing that you usually start with in Figma, that page becomes a rendering of that data model.

[00:08:59] Anything else on the internet that's pulling your data is going to be a rendering of that same data model, which is why the data model matters more than your wire frame, your ui, your colors, and whatever else you'd have on your website. So machine critical information needs to go to the top of that structural hierarchy, not that.

[00:09:18] Buried below a hero image or a carousel or marketing copy, it needs to be in that first content block in every single page of the website, because that's how machines evaluate the page. You look at the top of the page, it is significantly more important than what is in the middle of the page. This is where it gets pretty, because semantic, HTML structured data, JavaScript, independence at all matters.

[00:09:46] And your website is not just a, an eye candy and a visual experience. It, it becomes an interface. I'm quoting Jonah Alderon, Han's guest here. He called it an A PIA data set. That's what your website needs to be. I, I agree with his vision. So if you have a NAV element, HTML five nav element that tells a machine, this is navigation.

[00:10:06] If you have an article element that tells this is, there's an article here, this is the main content. If you have a div or a thousand divs nested. That's a container. That's nothing. That means nothing. And the, structured data number is really talking about schema and all other kinds of structured data.

[00:10:25] It's really important, and I cannot repeat this enough, it's extremely important to take this seriously. 'cause according to some data from 2024, 70%, 70 plus percent of, uh, all of the pages on Google's first page. Uh, rankings, uses schema markup and get this. Google's John Mueller and Fabrice Canal at Microsoft have both confirmed that schema is what helps their L LMS understand content.

[00:10:55] No, that doesn't mean that schema is the only thing that powers what LLM is going to say about you, but it helps them understand content. So if you want an LM not to hallucinate about you, you better do the schema homework, right. If, if Google and Microsoft can agree on this, maybe we can all agree. And then the third part here is JavaScript independence.

[00:11:19] There's no maybe here, it's not optional. JavaScript is just something that should not be loading your content. And you know why? Because most of the AI crawlers and AI bots. Do not render JavaScript? Google Bot does. Yes, because Google Bot needs to look at the page and, and it's a more advanced, they have more money to spend basically.

[00:11:41] AI bot, most of them do not execute JavaScripts. We, we have content that's loaded via JavaScript. That depends on client side. JavaScript rendering to appear, it is going to be invisible to most AI systems, not, not poorly indexed or low rank, not completely, completely invisible. So parts of your page, your entire page could be completely invisible to ai.

[00:12:09] Another thing is that page to page relationships that they need to be explicit. They need to be well defined. So this is about internal linking breadcrumbs. But also schema should declare how your content connects, not just true navigation menus. So you should define this in your structure data. This page connects to this one, and then take this very seriously.

[00:12:34] Now that we talked about identity and we talked about structure, let's talk about pillar number three, and that is content. This is where machine first architecture overlaps a little bit with what GEO is about these days. The framing, however, is different. GEO is about how do I get cited? Machine first architecture asks a different question, how do I create content?

[00:13:02] Then machines can consume, attribute and verify. 'cause if you do that, you'll get cited. So similar goal, different way of getting there. And that means answer first architecture. So you start with your conclusion. In the first paragraph, you lead with the answer supported with evidence. 'cause machines evaluate within the first few hundred words.

[00:13:26] And then if your key point is buried somewhere in paragraph six, a machine may or may not get there. You also need to be very specific, verifiable, and measurable in claims you have. In, your content because that's how you get cited. If you have vague marketing copy, trust me, that is invisible.

[00:13:48] There's no reason for an LM to reproduce what you are the way you're praising yourself essentially. There was a study by se ranking across almost 130,000 domains, and they found that pages with 19 or more data points. Averaged, and these are verifiable, measurable data points. Averaged 5.4 citations versus 2.8 for pages with minimal data and pages would source citations in their content.

[00:14:18] They saw 115% visibility. Boost specificity is not just good writing. It's fuel for the machines. This also means structured authorship. Who wrote this? What are their credentials? What's their entity footprint? Machines will cross reference authors against their knowledge graph, and 96% of AI overview content comes from content from sources with verified EEAT signals.

[00:14:48] Anonymous content with no known author is a trust gap, and machines will notice that. Another thing. You need to do is signal freshness of your content. So not just put a publication date at the top and just change it every, every other month, so it looks like it's fresh. No, no. You need to explicitly declare what was updated when it was updated so machines can evaluate individual claims rather than treat the whole page as one big timestamp at a fourth pillar.

[00:15:20] And this is where machine first architecture becomes something genuinely different than anything else in the G-E-O-S-E-O technical SEO playbook. This is interaction CRO for machines. Don't hate me for it. Machines don't just read your website. They also try to use it. They try to complete a purchase.

[00:15:42] They will do even more of that in the future. Book an appointment, fill out a form, compare prices. Navigate a checkout flow. Like I said, this is already happening. This will be happening more and more and more according to Adobe Analytics, traffic from AI power browsers to US retail websites increase 4700% year over year in July, 2025.

[00:16:07] These are not crawlers that are simply indexing your pages. These are agents trying to do things on behalf, of the user, and most websites, and trust me on this, most websites are completely unprepared for this shift.

[00:16:20] 

[00:16:24] Think about what breaks when a machine tries to use your website autonomously. You could have a pop-up modality that blocks the entire page until a human clicks X. You could have a checkbox that says, accept legal terms, and maybe the machine doesn't have instructions to accept legal terms. Maybe that I, I just tested a form with an agent and that's what failed.

[00:16:45] Maybe you have a checkout flow that confirms success of add to cart with a bouncing cart icon instead of a structural response, your error message that says something went wrong with no machine readable explanation of what failed and what to do next. Your mouse over depend navigation that only appears where cursor moves over it.

[00:17:04] So if there's no cursor, there's no navigation and there's an important distinction. Between this and accessibility. Accessibility assumes a human is still in control. This is different.

[00:17:19] In a purely machine interaction, there's, no human. There's no human to override anything. There's no human in the loop at any point of action. The agent decides, acts needs to verify autonomously as it goes. This means machines need to be able to discover the actions that are available on the page, what inputs they require, and what outcomes they produce.

[00:17:44] They need structure confirmation of what happened after an action, not a green check mark. And they need multi-step workflows where to sequence required inputs. Current state and decision points are exposed structurally and not just render visually as progress bars and. They also need machine readable error states with actionable alternatives, not dead ends.

[00:18:08] They need branching points so they can figure out where to go. Web MCP is one attempt at solving this. I talked about this on the podcast in the past 'cause it lets websites expose structured tools that agents can call directly instead of taking a screenshot and then clicking and figuring out which is how agents work these days.

[00:18:26] The spec for web MCP is super early. It looks very promising though. 'cause the problem it's solving, it's real, it's urgent. Agents struggle with most websites and GEO and SEO are not addressing this. They're not blaming them. It's just not what the focus is on in these industries because GEO and SEO, they cover content, citations, acquisition, and then what happens when that user lands?

[00:18:56] Traditionally, that's been someone else's job and. If that's the same session by an AI agent. Now, I don't think we can separate those because machine first architecture has to start further upstream at identity and then go all the way downstream to this interaction that I just talked about, and that full span is what makes this a different framework and not just a rehash of any EO or even CRO or whatever else you wanna talk about.

[00:19:26] 

[00:19:29] So here's the thing I've been building towards this entire episode. Machines are not just reading the web anymore, they're now participating in it. They're shopping, booking, comparing, transacting. They're filling out forms, navigating checkouts, and making purchase decisions on behalf of humans who may never visit your website.

[00:19:52] And the websites that architect for this reality, all four pillars of it, identity through interaction. Those are the websites that are going to dominate this new era of the internet. The websites that don't, they'll break. So silently, an agent will try to book a service on your website and then fail because the confirmation is just some notification that they didn't catch, and there's no structural response and there's an error message you didn't catch.

[00:20:19] They'll quietly move on to a competitor. Let's say you have a, you have a booking form and, and the agent tries to book it, and I encounter this in testing. You try to complete a form and it's not obvious to an agent that the form was submitted. That agent will go elsewhere and do that same thing elsewhere.

[00:20:40] You will never see that. You'll never see all the lost transactions in your analytics. The customer will never know that your site was even considered. It's all invisible. Every failure is invisible. This is happening already, but let's not be all doom and gloom. Machine first architecture is not the opposite of human first.

[00:21:05] No. It is the path to building good websites for humans. Just like Mobile first was not Antide desktop. It made desktop better. Ultimately, machine First does the same thing for humans. If you have a very clear identity, that makes your brand more coherent for everyone, if you have good structure, it makes your website faster, easier to navigate.

[00:21:32] If you have answer first content, it helps impatient humans just as much as it helps machines. And if you have. Proper interaction patterns for agents. That also means building more accessible, more predictable experiences for human users. Everything you build for machines works for humans too. That's not a happy side effects.

[00:21:54] That is the architecture working as designed. And if you have been listening to this show, and I hope you have, you've heard me build to this point across multiple episodes, the agent broken web. Why AI cannot see your website? The browser wars fragmentation across 30 plus Syngen browsers, web, MCP, the next generation of these machine interfaces.

[00:22:16] Machine first architecture is the framework that ties all of it together. Four pillars, identity, structure, content, interaction.

[00:22:27] 

[00:22:30] So where do you start with this? And let's make this practical and simple. Let's talk about one action you can take per pillar

[00:22:40] identity. Write down your canonical definition, not a paragraph that describes you fields, what you do, who you do it for, where you operate, what makes you credible. Then Google your business name and compare what comes back in all the relevant results against your definition.

[00:22:59] Every platform that tells a different story. Is a leak in your identity

[00:23:05] structure, disabled JavaScript in your browser and visitor website. Just start there. If any of the content disappears, you have a rendering independence problem that makes parts of your website or your entire website invisible to 69% of crawlers.

[00:23:22] And then check whether that's your most important information, what you offer, who you offer it to, at what price. That this is in, in the first block content block or buried below the fold

[00:23:34] content. Pick your most important pages. Read the first paragraph. Does it state what the page is about? Or does it warm up for three sentences before getting to the point machines of value it in the very beginning of the page and then decide what to do next?

[00:23:51] If your answer is not there, rewrite the opening in a very clear and obvious way.

[00:23:57] And finally interaction. Try to complete a core action on your website, like buying something, adding something to card, booking something, submitting a form with your eyes closed, and using only a screen reader. If you cannot get through the flow, an agent likely cannot get through the flow.

[00:24:15] And remember, the agents are not patient. The agent will never be like a human and say, oh, this must be my fault. I'm, I'm doing something wrong. No, they just. Abandon the task. Move on.

[00:24:27] 

[00:24:30] Mobile first took 15 years from a concept to a fully adopted industry standard. The actual transition, the point where websites that ignored it started losing happened much, much faster. Once Google started penalizing non-mobile friendly websites. In 2015, the window for ignoring. Mobile first, imperative closed in months.

[00:24:54] Machine first architecture is following that same curve. The difference is it's compressed. Majority of crawlers cannot render JavaScript. AI agents are shopping and booking on behalf of humans, and the websites that are not architected for this are already breaking silently. So we have four pillars, identity, structure, content interaction.

[00:25:20] Start at the top and work your way down. If you wanna read more about the framework in Machine First architecture just go to machine first architecture.com. And also if you wanna subscribe to no Hacks, the best way to do it is no hacks.co.

[00:25:37] Slash subscribe.

[00:25:40] If you're already doing some of the things I talked about, great for you. And if you're not, you know where to start. So that's it for today. I'm sunny. This is no hacks. Thank you for listening as always, and I will talk to you next week. 

[00:25:57]