Transcript
AEO, GEO, AISEO, they're all basically the same thing despite what people argue about the nomenclature. What matters is that they work. We've been monitoring them internally and you can apply them on your own website, or you can talk to a Next.js Sanity agency if you want help building this yourself.
Let's start with the website itself. This is something you can do without being a developer and still get the same result. If you right-click on any website and hit inspect, there are two things I'd advise doing.
First, it might not look like this straight away. It probably looks cluttered. On a Mac, press command, shift, and P. On Windows it's control, shift, and P. Type disable JavaScript. You may notice immediately nothing's really changed. But if you hit command and R to refresh the page, you'll notice immediately that certain elements have gone. The reason is they're JavaScript. This is roughly what Google sees, and it's a great way of navigating your own website to see what's going on.
There are some caveats. If you look at the left-hand side you'll see exactly what's going on. For example, if I press here you're going to see things like divs, you're going to see things like P tags, which basically just means paragraph. This is how you can actually see the content on your page and work out exactly what's happening. JavaScript's turned off, so I can see all of this stuff on the page. From an SEO perspective, you're doing something very good. From GEO and AEO perspective, you're also doing something very good, but not quite the best, which we'll talk about next.
This is especially important. I'll show you where everybody screws it up so you can not screw it up yourself. Let's enable the JavaScript again because my navigation won't work, and let's go over to blog. You can make your navigation work without JavaScript. We purposely chose not to do that. There is a way around it and you can do clever stuff, but for the sake of this conversation, keep it simple.
When you have pages like this, I'll show you what everybody screws up. Hit command shift P again and disable JavaScript. Refresh the page. Lines have gone. We see where we're going with this, but the blog posts are still here. More importantly, we have pagination, which means if a crawler hits the website they need to go through the pagination. They need to see more than just the first set of articles. Let's go to page two. Great, I can see page two. Let's go to page three. This is really important. Same principle applies. Categories don't work right now, so that's something I'm going to fix after this video, but you can see the point. The more you can do without JavaScript, the better the website generally indexes. This is a general rule of thumb, so don't hold it as the be-all and end-all, but it is very important. It also means that a lot of this stuff can get cached if you're rendering it statically. There are nuances with rendering techniques, but for the sake of doing one big overall view, this is the first thing we do when assessing a website for SEO and AEO.
One thing I actually stole from a Profound presentation is a website called RunRepeat, which is quite useful. RunRepeat is very interesting because it gets cited a lot. The reason it gets cited so much is that everything you're seeing on the page here is unique, interesting, numerical information that AI can't find literally anywhere else. If you have unique, numerical, interesting information and most importantly AI can't find it anywhere else, you're going to do pretty well on citations. If you look up something like how much pressure can a Nike Vomero take on my feet, or how long will they last, you'll get this information. This is very important.
The other thing I've left off so far is content negotiation. Content negotiation sounds scary, but it's not actually that scary. What this basically does is give a way for AI crawlers to see your website. This isn't a strict rule before I say this, but most AI crawlers do not run JavaScript on the website, which is why I was showing you that for the first part. But the interesting thing here is when AI hits a website, it looks like this. This is what an AI will basically see. This looks like the Matrix. Nobody can read this. It's really hard to see what is here. However, let's try this again but with this nice little bit at the end, which is accept text markdown. You have to actually do this on your website. This isn't just something you can say "go throw this at the end, it's done for you." It actually takes a lot of work, and it's very important that you have parity between the HTML version and the markdown version.
What we're going to do is copy this exact thing over again and paste it back in. This is Vercel's, not our own, but I can also put our own on here and it will show you exactly the same thing. Is it going to look like the Matrix part two? No. It's actually going to look like markdown, which is really important. If you think about it, AI crawlers and how we use AI in general is we try not to blow the context window. If you want to know how that works, it basically means the more information you put into AI, generally the worse it gets. There's a sweet spot around 20% of the actual context window depending on every model. Instead of having all this crap where it bloats that context window when things are crawling, you get this where it tells you exactly what you need to know. More importantly, Vercel did a little teardown of how this actually works. The most interesting thing was that it was 3 KB, so a 99.37% reduction in payload size instead of 500 KB. This is super important.
What I will say is the pitfall most people fall into if they're doing this for their own website is the fact that there isn't parity. If you get a 1 KB payload but it only has half the information of the page, that's far worse than just using the original HTML. What you've got to make sure you do is that the markdown version is in parity with the HTML version. In some cases you need to expand things. For example, an FAQ section, if it's inside a component, then you need to make sure that FAQ actually gets brought into markdown in a way that's nice. There are loads of intricacies depending on what you're doing here. The best way to do this is just give us a shout and we can talk you through it.
Let me show you a couple more things. This is Tetris from Wikipedia. I'm sure you've seen this before. However, something you probably never thought about is why did Wikipedia end up doing so well in the first place, and why does it appear so high on Google? One of the many reasons is if you look at the left-hand side, this is a table of contents. If you look, we have an unordered list and then list items. You can see table of content, list item, list item, list item. It's all semantically correct, which basically just means it's the way HTML should be written. It's the way computers can easily interpret what's actually going on on the screen. There's not a tremendous amount of JavaScript being fired here. Whenever we're building something like a blog, you're going to make sure you have a table of contents similar to Wikipedia. You don't necessarily want to have all the JavaScript, or it should still run and be semantically correct without JavaScript. All of these different little bits and pieces add up.
Last one I want to show you as well, we're going to right-click and hit inspect. You don't need a developer involved to do this. Just click into this thing on the left. Doesn't matter where you click. Try not to click a link. Just try to click anywhere in here and press command F or control F if you're on Windows and type JSON. Now what you're looking for is JSON-LD on the page. Let me have a look. This is what I'm looking for. You see breadcrumb JSON-LD. Pop this open and you can see the information about the breadcrumb inside here. Let me look for another one. Okay, collection page JSON-LD for blog. Great. This is showing me what's actually on the page from a JSON-LD perspective. I understand what's going on here and by proxy, a computer understands it too. This is really important to essentially show that you know what's going on on the page and you're presenting that to Google and all these different AI crawlers. It's really helpful to give some rich structured data.
Final thing worth doing here is there is a JSON validator from Google. I won't show it in this session in particular, but you should always just check at one level that the JSON is valid. I know there's a couple in here where we need to do a couple of bits of tweaking to make sure the JSON is valid, but it's always important to do that.
This gives you a rough idea of everything you can get started with. This is just scratching the surface of what AEO, SEO, and all of these different functionalities are about. What I want to do is have more deep dives and talk more about it in the future if you're particularly interested.
