Transcription
Right now, thousands of people are searching Google for local businesses exactly like the ones you're building a website for now. And the business that shows up first wins the customers. And here's the problem. Everybody is building websites with AI now. And they might look incredible, but almost none of them are actually showing up in Google search because looking good and getting found are two completely different things. And the thing that decides who ranks is the one step that every AI website video misses and that is the structure underneath. So in this video I'm building a complete local business website end to end with nothing left out using Claude code design and Astro. We're going to cover research design structure the build the technical SEO components and even ship this thing. So let's get to it.
The first step does not start with the design or the build of the website, but it starts with a little bit of research and getting the structure of the website right. This is probably the most important step apart from optimizing the website, which we'll do in a couple of steps. But without getting this right, the rest does not work. And we want by the end of this step something that looks like this. I know it's very simple, but this is really going to help. All this is is to do some research in what are all the transactional keywords, the service-based keywords, and how they're going to kind of fit in alignment in the website altogether.
See, most of these AI built websites, they look nice, but for the most part, they all tend to have this really simplistic structure to them. You have a homepage and you have a couple of pages on the site, maybe an about, a contact, one page with all the services in it and then one page with all the areas served in it, which is a huge mistake and it can rank you sometimes depending on the competitive niche that you're in. But for the most part, it probably won't rank very well. Instead, what we're looking to build is a website with a much more structured silo. I know this looks a little bit scary, but let me explain this a little bit and let me show you how we're going to build this nice and easy.
So, for the same type of business, we're going to have a service hub or a parent page with all these services listed in it. And then each one of the services is going to have their own dedicated page. This allows you to actually rank for that service in that area as opposed to all your services being squished into one page and barely getting any SEO breathing room, if that makes sense. In addition, we want to create the same silo, but for the area served. So again, we're going to have a parent page for all the areas serviced and each area is going to get its own dedicated page. These are the hardest pages to get right because they need to differentiate in the content 50% from one page to the other. So you don't get done for content duplication or simply the page just won't get indexed because Google reads the location page to another location page and kind of says, "Eh, they're practically the same. I'm not going to waste my crawling budget on that." But we're going to get this right and that starts with research.
So, part of the prompts that I'll give you for free. They'll be accessible in our free community below. The first one is the site architecture and silo prompt. It looks a little bit like this. And all it is is going to get you nice and uh organized. And it's going to do a little bit of research to fundamentally create the structure that Claude is going to follow for the rest of the website build. Now, there is a couple of things that you need to fill out from this prompt. the business type, the brand name, the locations that you're trying to rank in, all of the services that you've got to offer as well. That's really, really important for you to fill out. Obviously, to spare you with the boringness of me filling it out, I've got the prompt already filled out. And this is what we're going to give to Claude Code.
Now, before we give this to Claude Code, we need to ensure we have a couple of things connected. And I've done many videos on this, but just quickly, you need to install data for SEO for Claude Code. Natively, Claude Code or Codeex or any AI tool doesn't natively have access to SEO data like keyword research, keyword similarity, the estimated monthly search volume of a search. That is the stuff that we really need to give Claude code to do this correctly. My preference is data for SEO because they are very affordable. They're a pay as you go program, meaning if you don't use it, you don't pay for it. And if you sign up with the link below, you're going to get a couple of free credits with data for SEO and those going to be more than enough for this entire website build. I've done a whole video tutorial on how to do this installation. I'll leave this link below.
I have a folder in my desktop which I'm going to do all this work in from. It's called just the local plumbing website. I'm going to open this up with uh the terminal and clawed code. I prefer to use a thing called semox which is just a wrapper for clawed code. That's all that is. But if you prefer using visual code studio or just clawed code from the terminal or even the desktop application, this will work in the same way. With claude code activated within that project folder. I'm going to grab my completed prompt here. I'm going to paste that entire prompt that I've already prepopulated in here and I'm going to give it to Claude Code inside that project folder and give it a couple of minutes to do its thing. It might ask you a couple of questions. Answer it to the best of your ability. But by the end, we need a CSV file that we can just use in Sheets or in Excel.
After a couple of minutes, you should get a little bit of a report here telling you, okay, out of all your services pages, this would be the primary term, and this is the estimated monthly search volume. Now, take the search volume with a grain of salt because even if it's data for SEO or ahrefs or SEM Rush, all these SEO tools, they're not absolute sources of truth. So as long as there's some search volume, it'll be enough for you to concentrate on that page as it's an individual page. So we can see that most of the services have some uh search volume, which is great. And even the areas as well that we want to target, which is fantastic. Perfect. So now it's giving me the outputs here. Step three, step four. And if I look at the folder, it looks like it's got all the information, but it hasn't created that CSV file that I want. So let's ask it to do that. I'm going to say, great. Can you please generate that CSV file? And that should be it. Okay. Now, if I look at the folder again and I look at the file, I've got here the page title, the target keyword, the search volume, and the slug. This is really what I'm looking for, right? So, I just want a structure that Claude Code is going to follow and not get creative on us when we're building the website. It's also a good way for you to keep yourself in trackable everything that you're working on. So, I'm pretty happy with this. If you want to add more pages, blog posts, or I don't know, calculators, or whatever you want, make sure you put it in this section of the build.
If you've been using Claude Code for a little while and you have the Figma plug-in installed, you can check by going forward/mcp, you can see here that I've got the Figma plug-in installed and I can say, okay, uh, can you place that uh, structure into a Figma board so I can check it out as well, please? That way you can kind of visualize as well. I think for me anyway, that helps a lot to make sure that I'm not making some serious errors. And this is the time to get this right. So with my structure all laid out and with my Figma board even drawn out so I can either share it with my teammates or if you're building this for a client, it would be a great time to show this to the client before you move any further because they might be able to tell you, you know what, I actually have more service areas or more services that I want to offer. This kind of helps maybe bring those to mind as well. Let's move on to stage two.
Part number two is about designing the website. Hi guys, just a quick one here. If you want to learn how to rank your website number one in the local map packs and organically like Will here, one of our community has already done. The AR ranking school community is for you where we'll teach you and we'll support you to do this so you can rank number one in the AI search engines. Link below. Back to it.
More importantly, it's about keeping the same design aesthetic throughout the entire build. You don't have to use Claude design, but it is what I'm using at the moment. I'm seem to really like it and the handoff from Claude Design to Claude Code is very, very easy. Obviously, they're in the same ecosystem. However, if you don't like Claude Design because it does eat tokens like a fat kid loves cake. So, you got to be wary of that. You can use other tools. The other of my preference is Google Stitch. Google Stitch makes it very very easy as well to design a homepage and you can export this selection as a Figma file and even as a zip file which I recommend you do so once you like the design that you're ready with. It's very easy. You just talk to it like you would any other AI application till you find the design.
One of the things that really starts differentiating your website build or our website builds with any other AI website builds is inspiration. Here are two websites that I use often to get inspiration so my websites don't look so AI generated. Although I'm sure I'm going to get braided in the comments, someone saying, "Your website still looks AI generated." Whatever. It ranks and it gets leads. That's the main thing. But if you need inspiration, go to dribble and have a look around. It's fantastic. You can literally just copy the image that they give you and give it to Claude Design or to Stitch to get some inspiration from. My favorite place though to get inspiration on certain components that really differentiate your website and I think give it that little genre or that little bit higher end look and feel is 21stdev.com. They have a lot of different components that you can have a look at here like maps, images, scroll areas, testimonial sections for example that you can kind of input into your website. The beautiful thing is once you click on an item, for example, if I want this type of button, they give you the code, but they also give you the prompt that you can copy exactly to claude code and say, "Hey, for all the buttons in the website, I want you to use this type of style and design. Just make sure that it has our brand colors." And then your website has these cool buttons or features that otherwise wouldn't be natively into a claude code build website.
If you have no idea where to start with the design and you don't find that you kind of natively are a good designer, there's a prompt again in the free resources below that are available in our free community where you can give this prompt to any AI system really that will create an MD file with all of the brand guidelines, look and feel. You can do it as many times as you want until you're happy with the overall design. This is something that you want to give Claude code later or any other AI tool that you're using to build this website with.
If you're using Claude design, you want to go to prototype and let's start a new project here. I'm going to go uh plumbing website YouTube tutorial. In design system, I'm going to make sure that I don't have one selected. So, it doesn't have a design system that I'm already using and I'm going to go to high fid high fidelity and create. There are two to three main pages that you want to create in this part. That is the homepage, the main services page, and the main area page. With those three components done, you can then hand this off to Claude Code. But here, for example, I want to describe in detail the type of business that we're building the website for. Now, I've created the fake company details here. I'm just going to copy this stuff here from Chat GBT. Again, this is a fake business. I'm going to go back to my claw design and say I to build a website for this business and paste a couple of things there and hit enter.
What I like about Claude design is that it's going to ask questions about which way you want to go. Do you like this font or that font? This color or that color. It will take a little while for you to finish this, but I really like the way Claude Design is very much of an interactive element here. You'll see that it's going to start asking me questions. So, as we can see, Claude Design has a few questions about Buong City Plumbing site. So, what do you want help scope with? A single loading page, a multi-page site here. Uh, the visual direction. So upscale, you get the idea. You want to answer all these things. If you don't know what to answer, it has an option for you. Most of the times you're saying decide for me. So I'm going to say that. And here, which services should I feature? Uh t uh uh um perfect request to quote book online. Okay, once you press continue, it's going to take a couple of minutes to give you the first iteration and you should get a homepage right here which you can go and edit yourself.
I don't mind this. There's a couple of things that you want to consider when you are designing a homepage, a service page, and a service area page. With a homepage, you want to use the two-second rule, and that is when I land on the page, I should understand within 2 seconds what it is that you've got to offer and what you want me to do. And I'm being quite literal there. So, here it says Houston Plumbers. Perfect. There's no mistake there. And you can call or book online. Fantastic. I knew exactly what I needed to do here. What I don't recommend you do is get all artsy and go like the number one plumber for all of your needs or just something too editorial. Get to the point right away, particularly when it comes to these local based service businesses. If we scroll down here, we've got some value or some trust here. So, you want the licensing, the reviews. This is just going to add a lot of trust for the website, which is what you want to do as soon as you can. We've got all the services that they offer right there. a couple of how it works for them, the reviews you want to add in there as soon as you can, the map here of all the areas that you service, FAQ section at the bottom, and a few more other things as well.
There are at least two pages that you want to build in this instance. So, I've built the main homepage here, and I've built the Katy Texas, which is a location based area page. Again, just so that uh we don't get very confused in terms of what we want to add in here. So once you are happy here with all the design, you see that I've even embedded a map of Katy there. I'm going to give you a uh checklist that you should consider when creating this localized pages here. That is really important for you to follow so you don't get these pages de-indexed here. We got FAQs and a nice little section here with [snorts] Claude Design. I've done a video about how it works and everything like that. But just nice and quickly, you can edit things very easily. If I go to the edit button and I want to change this here for example fast license yada yada yada and I can say you know what I don't like the mdash I'm just going to delete this whole thing I can do so here so it's a mixture of if you want to prompt it you can do that or if you want to do anything else that's fine as well we can change this all when we're doing it with clawed code but from a visual perspective it's really really nice to do this before you start kind of building the entire thing with claude code and Astro so if you are happy with the sign.
What you can do is go to share here. You can go to send to and I can send to claude code and I can uh actually like to download the entire zip here. I'm going to download the zip and you want to place it that whole zip file in the folder which we have done the keyword research and the uh website structure design in already. I've just placed that zip file that Claude code gave me right in here. I can open it up if I want to, but Claude is going to be uh smart enough to do that.
Phase three is about getting an image style guide. A lot of people don't do this and they just create random images with AI or they have really old images their client gives them that just don't look nice. But just by taking a couple of five minutes and generating a style guide for the images, and if you have a nice image generator, I'll show you the ones that I use, you're going to have the ability to create practically any image that you want, but it will look like it was taken by the same camera, the same lens, and it's just going to have a kind of formality to it that is going to look nice throughout the entire website, and it won't look random from page to page. So, you can see here that all these photos that I've done kind of look all the same. All the gentlemen have the kind of same looking uniforms and it just looks kind of good. The way to constantly get images that look cohesive like this is by having two main things. You want a style guide here. So this is the art director you can call it and then a reusable prompt template that you can place in but change the scene in here. So you see here in this I've got the style wrapper. So, create an image, authentic local service, photography, yada yada, the camera that it was shot in, the focal length, the lighting used, the color grading. It's got all those things. And this is something I'm going to reuse all the time, but I'm going to change the scene. Again, it's just going to allow for some cohesion because I want you to create high quality websites, not just AI generated slop, although it is generated with AI, but we're just using it in a much more smart manner.
So, how do I get this prompt here that I can reuse all the time? Well, in the resources below, there's going to be a prompt called the image style guide prompt. Really easy to use. All you got to do is place it once here. I'm going to copy this entire thing. And you need to obviously fill out a couple of things from this prompt. Now, I've just got this prompt copied in a Google doc so you can see here, but you wanted to input the business type, the brand, personality, the color palette, and the mood as well. You can change the camera lens. If you want it to look a little bit less professional, you can put, hey, these are shot in an iPhone 13 or whatever you want, right? The idea here is to experiment a little bit. So I'm going to copy this whole thing and let's create a pallet, a style guide for this new website.
So with that prompt, I just gave it to GPT. You can do this with any AI, but I want here this main style wrapper, right? And the style wrapper has the camera, the focal length, the composition, and everything else here. That is the one that I'm going to use all the time. But I'm just going to change the scene. So ideally this scene will make the image for all the different services, right? Let's give this a go and I can show you that I can do this in any image generator uh and it will work just fine. I've got it here to create a lot of different scenes and again um this is the one thing that I will change each time, but I'm going to use the same style guide. So I've asked it to create some scenes for outside of the house. I'm just going to copy this uh into the Google sheet. And remember, I've got the style guide here. So, I'm always going to use that one, but I'm going to change each one of these ones. So, let's say, for example, the sewer line repair. Let's test this one out. I'm going to use two image models so you can see the difference. I've got here Nano Banana 2 in Google AI Studio. You can also use Gemini. I just like creating batches of images in either Google AI Studio or you can also use OpenAI's image GPT2. If you haven't seen this platform, it's called the platform. OpenAI, the playground, and it just allows you to play around with models in a different way than you would in the normal chat interface. By all means, you can use this in the chat interface if you want, but I'm just going to go here, images, and I'm going to paste the scene here, and I'm going to then copy the actual composition and all the style guide here. I'm going to go back to images here, and I'm actually going to copy the entire prompt that I've just done. I'm going to select here a couple of components. So I just want a landscape images. The quality is going to be pi shore. And that is it. I'm going to hit enter. And I can do the same thing with Google AI studio. That's using Nano Banana 2 Pro. I've used the exact same prompt by the way. And I'm just going to go the output format should be images only. And let's run this right away. Generally, Nano Banana Pro 2 is way faster at generating images. If that's really important to you, then probably stick with Nano Banana. The idea here is that both models are more than good enough to do what it is that you're after. So, here, for example, I get the first one back. Pretty solid. Looks very real. Uh I'm sure if you're a plumber, you can tell one or two things that are wrong, but you know, for the most part, that's pretty good. While we're at it, let's just try it in normal chatbt as well. I'm going to make sure that I've got create image the auto. I want to set widescreen as well. I'm going to paste that exact same prompt here. I'm going to select this to thinking. That does make a little bit of a difference. You just give it the opportunity for GBT to think more about your request before creating the image, which if it's a rather big prompt like here, then give it that chance to. It will take a little while though. Okay. And this is the OpenAI image. Again, looks fairly spot-on. It doesn't actually look so pristine. So, I like it a little bit more. I'm kind of leaning towards GPD image for this. Looks pretty good. Again, here's the difference. That's Nano Banana Pro GPT images. I think GPT images just makes it look a lot more real. And that is from the chat as well, which I kind of like. Just looks fairly good to be honest. So, if you're happy with your style guide for the images, make sure you save this somewhere. That's going to be part of the brand guidelines that you want to place into the photo or keep it somewhere where you're not going to lose it because ideally we want an image for each one of these services that's going to illustrate the service provided. It's just going to differentiate the pages and it's going to allow you to do a little bit of image SEO for the images which is just another aspect that not many people do. But because I want you to create a very good website, I want to make sure you do that as well.
Step number four is about more research. Hi guys, just a quick one. Ranking in the AI search engines like Google AI overviews doesn't have to be complicated. Inside the AI ranking school community, I learned how to do that for multiple of his clients which are now ranking for the right service keywords in the right locations inside Google AI overviews. And if you want to learn how to rank in this new age of AI search engines like Google AI overviews or GBT search, the AI ranking school community is for you. Link below. Back to it.
One of the components that I discussed in the beginning of the video was this silo here. the service areas hub and it can work really well if done correctly. This essentially is programmatic SEO to a sense but we want to take it a step further where each one of these pages this content is going to be very specific to that area. This does a couple of things. It's going to improve the SEO but it's going to make sure that it's indexed and it's going to differentiate each area to area because we've done the detailed research. So how do I even go about thinking of well how do I do research for each one of the sections? Well, for that, I've got another prompt for you. The prompt again is located in the free resource res resources below in our free community. And the prompt kind of tells you how to use it here. It says you're a local market researcher for a business type. Again, you need to fill in all the places in here. And it's researching certain sections, but it'll change dramatically depending on the type of business. So, if you're a lawyer, if you're a financial adviser, if you are whatever website you're building for, this will change quite a bit. So, I've already filled out this prompt, for example, and it looks like this here. So, you're a local, let me zoom in a little bit. You're a local researcher for a plumbing company. Research the specific for one service uh area so that the websites page can speak with genuine local authority. That's the main thing that we're after here. Use real verifiable details. If you're unsure of a fact, say so rather than inventing it. I've done the inputs here. Perfect. And here's the main thing. content angles, five specific area, true to talking points that the page should make that would not apply identically, yada yada that we want to create 40 to 50% differentiation. That's the main thing here. This is what's really going to help.
So, I'm going to copy this whole thing. And depending on what AI you have, you might have to do this with different things. So, for example, if you don't have the $200 subscription with clawed code, doing this for every single one of the areas is going to eat up all the tokens very, very quickly. You can do this with deep research as well. So if you've got chat GBT, you can do this deep research feature here. Paste the prompt in there, but only change the area. So hey, do this for this specific area. And because we've done the research here, we're going to do this for Katy Cyprus, for example, and we got to do the locations here. So if I want to do it for Katie in Texas, I'm going to copy this here. I'm going to go back to chatbt and I'm going to say do this for Katy Texas and I'm going to hit enter.
If you don't have chatbt or the ability to do deep research, you can also do this with Gemini. I'm going to do this with deep research now in Claude Code. So, if you didn't know, you can do all of this with Claude Code now. So, in that same folder structure that I'm building the website on, I'm just going to start a brand new conversation here, uh, brand new tab here, and I'm going to start doing the research. I'm going to paste the prompt that I've got for the research here. And I'm going to say use the slashde research feature. And you can see it's enabled because if I written it correctly, it'll show me this thing in a different color, which is great. Let's start with Katy, Texas. Then we will move to all the other locations once I approve the first one. And I'm going to hit enter and see what it comes back with. I want to verify the research with one location before I go tell it to do the other 20 locations so I don't waste all the tokens.
After a couple of minutes, I've got some research for Katie Texas. So the bottom line, Katie's plumbing demand is driven by two verified area specific things. Expansive Gold Coast line claw. So black gumbo clay. This is what's going to make the page so much different than anything else. That's what we want. See, it says that swells up and shrinks seasonally, stressing the slabs. So, yeah, perfect. And then another one here that is most of Kitty's housing is newer, but older ones pocket uh carry polyutane risk. This is the type of information we want because we're getting into the specific about this area and that's what's going to make the page very, very different. Here, I've got a little bit of housing stock as well. Uh local conditions that are really about this area, common problems. Amazing. So if you are happy with that I can do a easy prompt like great turn that into an MD file and do the same research for all of the other locations that we need to build the website on. You can refer to the CSV file for the locations. Perfect. And now we can see that it found the service areas in the CSV and it's starting to do the rest. Goes without saying that's going to take a little while but that is okay. This is what's really going to differentiate our website with anyone else's. We've done their high quality research. Remember again, you can also do this with deep research from Chat GBT or Gemini. They do fairly do a good job. You will have to do it manually for each one of the locations. Download the MD file, which Chat GBT gives you the ability to download that and then put it in that folder with the name of the location. It will take a little bit longer, but still just as good.
Part number five comes the build, but I don't really want to concentrate on the actual build too much. That's the easy part. I want you to really concentrate on the content rules which we need to apply to each one of these pages. You see here that within the folder that I'm working on with the website, I've got a location research. This was all the research done from Claude. It took a little while. And let me show you what one of these would look like. This is the research for Atas Scosia. You get the bottom line, the housing stock, the systems and materials, legal conditions and all these common problems that are found in this certain area about plumbing which is really going to differentiate here the content and we've got the key sources. So if you want to you can go and make sure that it didn't kind of make this stuff up.
Now I've done very detailed videos on the nitty-gritty of building a website the way we're going to build it. I'm going to use Astro, which is a web framework for just content driven websites, simple SEO websites, and we're going to host this whole thing on Cloudflare. I like Cloudflare. It works very well with Astro. They in fact bought Astro, so the integration is quite nice. So, that's what we're going to do right now. The build's going to be very easy. I'm just going to copy this and I'm going to go back to prompt my website builder here. And I'm going to say something along the lines of I want you to build now the homepage and one of the first location pages and all the services pages so that I can take a look at. Make sure you build it with Astro that is the npm you need to install to have the requirements. Make sure that you use the design elements within this folder that I've provided from claw design. I like to place in this in ultrathink when I start think when I start the build. Sorry. So, ultrathink. And also, I'm going to put it on plan mode. You can see here if I press shift tab, it'll cycle through all the modes. I'm going to go to plan mode as well. This allows it to really think about what I've asked it to do and plan with a lot of thinking capacity about the build before it starts getting to the actual build. And whilst yes, this uses a fair bit of tokens when we're starting off, I find that it ends up being a lot more efficient because it really thought about the entire build first.
Okay, it build for about 21 minutes. I didn't ask it to generate all the pages because I just want to check how the build is going right now. Now, by default, when you build with Astro, the site is going to be built locally in your system, and you can find it in your browser if it's uh launched in local 4321, for example. Let me show you what I mean. So, I'm just going to say uh can you launch the site locally first? I can take a look. Okay, perfect. So, it is live on localhost 4321. Let's take a look here. and it's created the service area, the services and the slab leak repair. Let's take a look. But I'm on Chrome browser. Now I've got local host 4321. And there we see the website right away. So it's not looking too bad. Slight animations here. Little dispatch live. Okay. Okay. Not too bad. Call centers. Nice. The reviews, the hours here, uh FAQs. Okay. Not too bad. I could add a couple of more components here, but that is okay. I want to have a look at the services. Fantastic. Okay, nice. I've got all the services here. Great. So, this is our service hub page. Remember, we made this in the Figma just to kind of plan [snorts] it out first. And this is the slab leak repair in Houston, Texas. Nice, you know, call to action book online. Signs of slab leak. Okay, perfect.
So obviously I want a image here. So I can add an image to that. So again remember I've got the style guide here that I'm just going to copy. And I've got the scene already written here in my image generator of choice which we came to the understanding that we preferred GBT image 2. Again I'm going to do the landscape image here. And I can even get it to generate two. So I can see two variations and then pick the one I like. So let's do that. And here is the two images here. this one or that one. I think this one looks a little bit more spoton. Perfect. Let's download that bad boy. Fantastic. And I can do that right here. And let's add it into that page.
With the image downloaded, I can go back to the conversation that I'm having. And if you're using Claude Code, you can just simply drag that image in there and say, "Can you please add this feature image into the slab leak repair page so we can take a look? Please uh make sure that it's you convert it to a webp image. Something really important that you need to keep in mind, you want a very light and quick website. Any of these AI image generators by default they tend to give you images by a PNG the higher quality, but you don't need that and you don't want that as well. So you want to make sure that the image is a webp when you upload them. And actually, if you're doing these images in the platform from the playground on OpenAI, you can select here the advanced settings and the output format to be actually webpile. That way, you don't even have to convert them, which is a nice little addition as well. And now, right away, I can see it here. Slab link repair in Houston. This is going to make the pages look a lot more different from each other. But also, we can add some image SEO components in here. That is also going to help us. Here we got some signs of slab break. This is again informational content which is really good but also content that's going to differentiate this service page from another service page which again is very very important for us to do. Fantastic here. Okay, good. This looks pretty good.
As always, you do want to check the mobile version of the website. I've got a nice little plugin here. It's called the mobile simulator. when I click it right away, I can see here that the mobile version looks okay, but I've got the image in the background here after. So, I want to maybe try and fix that right away. So, I'm just going to ask it to do that with fix the image of the the design of the mobile. Sorry. And I want to get one page right and then just replicate it across everything else. I tend to like designing this on kind of my Chrome browser as opposed to Claude design or the other stuff. I can just see it right away what it's going to look like in the browser, which I think is a lot better than kind of winging the whole thing on Claude Design. Okay, let's take a look here. I'm just going to refresh this and again uh have a look at the mobile. Much better, right? I can see right away what he's working on. Slab leak repair in Houston. I've got a call to action. That's what I want. That's what's going to get me the conversions. So, I'm pretty happy with the service page template. Let's go to the area service page template. I want to go to Katie because I know that's the one that we've kind of got here. Okay. And the these are all the services here. So what's going to happen from a backlinking perspective? Whilst we've got all these area pages, right? There's about 20 of them, we can have then dedicated area and service page. So for example, if I clicked on something like the slab leak repair from Katie, it would take me just to the main services page for slab leak repair. You can get very specific, but it really depends on how competitive the niche is. Let's fix this page though for Katie and let me show you what I'm talking about.
And if I look at this page here, we probably need to change the image, but that's okay. So, plumber in Katie, Texas. That's going to be good from an SEO perspective. That should be the H1. We'll check that in a second. This is probably the most important section. So, local conditions. Again, this is going to be what differentiates our page and it's going to make it probably rank a lot higher and definitely differentiate itself between the other location pages. Recent jobs if you've got them, what the neighbors say here. Again, I've got a checklist for you to follow for this. Don't worry. The embedded map of Katie here, which I really like. It adds another kind of a differentiator from this location page to the other. Questions from Katie home owners. Very specific to this area again. Cool. Okay. looking really, really good here.
Okay, so I want to work on the service area, one of the pages, specifically Katie. I know there's just a little bit more content from that research that we did and we um you know, we spent Claude spent a lot of time doing that. I just want to see here why the Katy truth. Perfect. Okay, so this is exactly what I was having a look at here. So the Katie ground truth here, black gumbo. So Katie sits on an expansive go coast primarily K. Perfect. This is what I wanted here. Hard freeze winter. So we say for example in February 2020 Houston fell to 13 Fahrenheit bursting exposed house bibs attic pipes. Fantastic. We're showing that we demonstrate that we're not only an expert in the field but an expert in this specific location. This is what's really going to help here. The one thing that you do want to do is make sure that instead of these kind of links, I want to link to the contextual keyword as opposed to this little one here. I don't like this and having the sources. You don't want to take away from the fact this is still a transactional page, right? And this kind of takes away from that. So, let's just say that with the sources, this looks good, but can you link to the contextual keyword, not just have a sources at the end, please? And it's already kind of saying, hey, cool. Do you want me to convert this to a city template? So, it's going to fill in all the information, but the design's going to stay the same. That's what we want, right? We don't have to change the design so much from page to page, but the content is really important that we do that. Okay, now it seems to have finished. And yeah, much better. And it's it should be linking to the contextual keyword. It is there during the winter. Perfect. We can see that it's not going to disrupt from the, you know, us getting that conversion, but it is providing that quality content there. Fantastic. I'm really starting to like this. We've got that embedded stuff here. And again, I just want to show you the internal linking component. Right. So, we've got all the services provided here and the URL structure is services/kat. These are all the services, plumbing services in Katy. But if I click on slab repair, it's just going to go to the main slab repair page. That's more than enough. Again, depending on the competition that you're in, if it's extremely competitive, then you're probably going to have to create a page that instead links to the general slab leak repair page. It'll link to services Katie and then slab repair services in Katie. if that makes sense. That requires even more research. But for now, this structure should be okay for 80% of use cases out there.
Okay. And when you're doing one of these localized pages, even the services pages, here's a list that you should probably follow. Again, this will be linked in the video description below in the free community. Here's all the things that you want to try and follow. You probably won't be able to follow all of these depending on the industry that you're in. That's why it's difficult to create this into a skill or whatever. But you see here that I've got a couple of rules above the fold. for the H1 reads the trade or the service in the city. Primary call to action is above the fold. A bunch of things here, local proof, review testimonials, genuine local content, which is all the research we made in the beginning, the services offered here, the map that is embedded, and a bunch of other things that you should probably follow. Again, you really need to have it done in one page and then you can tell Claude Code, great, this is a template. Do it for the rest of the pages as we have done it. Again, I'll leave this link below. And I just want to do a quick test here of all the SEO components. I've got a free extension called SEO Wallet. You can download it again. And I want to check it just clearly here. So, the title tag is plumber and Katie. Fantastic. That's what I want. The meta description is really good. It's given me a call to action at the end. Call this number. That's okay. And I've got the headings here. Plumber and Katie. Plumber services in Katy homes. Drain cleaning. So, I've got all of the right keywords there, which makes sense. More importantly, I've got the right schema. I've got the plumber schema, which is what I want. And again, Claude Code should do this, particularly if you gave it the instructions that I provided earlier when it's building this thing. So, I've got the exact service plumber, and I've got the FAQ page. That's pretty good schema. I'm pretty happy with that.
Now, you would go and build all of the other pages locally before you push it to Cloudflare. But I'm going to push to Cloudflare what we've got now because I want to show you a couple of things that you need to keep in mind here. So, I'm just going to tell it, hey, can you push this to a staging site in Cloudflare using
Orangler? Of course, you need Cloudflare already authenticated within your Clawed Code. Again, the video that I've got listed below will show you how to do all of that, but I want to show you a couple of things here.
Okay, great. And now I should have the staging site here. This is the first time that I'm going to click on it. So, let's have a look here. And there you go. There's our staging site already. You can see that it is not on my local browser and it seems to be doing okay.
The reason why I want to put it in a staging site first is you want to check a couple of things. First and foremost, the loading time speed. This is really, really important, but something that people still don't do correctly. Uh, what you want to do is go to something like GTMetrics for example, and I like to use two types of speed tools here. I like two data sets. Sometimes they give you completely different data, and you want to make sure that you're doing this correctly as well.
And right away because we built this on Astro, but also because we asked it to create generate all the images in WEBP files, we're loading at an A really, really quick. You want to make sure that this fully loaded time is at least slower than 2 and 1/2 seconds. And you can see this is not even a second, which is great. It's a really important SEO factor, but also a conversion factor that a lot of people forget.
And again, because we're doing this with clawed code, I just wanted to show you something really quickly that I mentioned before. I've got the image here, and I've got the page for the slab leak repair here. If I check on the image SEO, I've got the old tag here. A city plumber repairing a slab leak through an access point cut in a Houston home floor. It's really sneaky because it's adding those keywords, but in a natural manner, helping our image SEO, which is just another component that's going to help you. I'm not saying that's going to be the one thing that's going to generate you a lot of leads, but you want to make sure that you're always kind of improving on these 1% improvements. That is one of them right away.
Let's go back here to the homepage. And I'm pretty happy with that. If you build the whole page and you're really happy with this, the next thing to do is to launch it. And you got to make sure you have your Google Analytics installed as well as your Google Search Console. I've done Google Search Console before. Let's do Google Analytics really, really quickly.
Hi guys, just a quick one. Inside the AR ranking school community, Steven learned how to index more than 800 local services pages, which resulted in more than 105 online booked appointments in one single month from organic traffic alone. If you want to invest in your skills to improve your SEO for yourself or for your clients, the AR ranking school community is where you need to be. Link below.
Now, back to it. So, in a Google Analytics account, you want to go to down to admin. And you want to create I'm going to create a whole account here as opposed to property. And I'm just going to name this test. And I'm going to go to next. Property name required again. Testing plumbing industry required. services. Let's see if we've got plumbing in here. I'm just going to go other business activities. Um, I'm going to want to generate leads and it's going to give you yes, I accept. You want to choose the platform. Obviously, this is a website and we're going to name the site here. Put the name of the website and go to create and continue.
Perfect. Now, we want to go to add stream here and it's going to say set up a Google tag. It's going to give you a lot of ways to do this. Thankfully, because we're doing this with Claude code, there's not much that we actually have to do, which is copy this tag that it's provided. You're going to go back to the conversation you're having with Claude and say, "Great. Uh, can you install this tag?" I'm going to paste it and say, make sure that you are, uh, tracking all the clicks and the form submissions. That way, the tracking is really already done very well in Google Analytics and you are getting correct data from the get- go.
Now, Floyd said that it finished adding the Google Analytics tag. You always want to double check, particularly these are really important things. You want to be tracking this correctly. There's a uh Chrome extension called the tag assistant. I've clicked that and it just checks that I've got the right one. And in fact, I've got the Bay City Plumbing tag, which is the one that we just generated. Perfect. We seem to be tracking everything correctly.
So, again, now I have a website that is really optimized from an SEO perspective. Not only because it's loading very very quickly, but if I look at all of the schema components here as well, the structured data, I've got the plumber business, I've got the FAQ, and if I go to the services like the slab leak repair page, I can see here, let me double check, I've got all the structured data, the plumber data, the services data, and the schema. Again, not going to be something that's going to rank you just because you've got this, but it's really important that you do have it to facilitate you being found in the AI search engines and traditional SEO as well.
I should mention, it goes without saying that I don't have the correct domain name here. I didn't want to purchase one just for this tutorial, so I'll just leave it as the staging site there, but I just wanted to show you the whole workflow of how to do a really highly optimized local business website.
There's a couple more things you want to keep in mind. You want to make sure that you are connecting the Google My Business to this. And with the Google My Business, all these services that you've got listed in Google Business should be the same services that you've got listed on the website. You want those to have the same information as well. I've done plenty more tutorials on how to automate and how to optimize Google Business stuff. You can check those out, but I think I'll leave it there for now. I'm pretty happy with this one. I hope you enjoyed the video. I'll catch you in the next one. case.