**
Step by Step: Build an SEO Monster with Bolt.new
I have made this into a 3 part series, but people are complaining it’s too complex, so here’s a breakdown:
Build PROFITABLE Programmatic SEO Websites With AI
This New AI SEO Method is Worth MILLIONS
🛑 STOP Building Wordpress Websites… Do THIS Instead
Second 2 part series for AI version of this - prompts for both types of website below
Cursor - The new best way to make sites
Static website generation with Cursor:
I Let This AI Create My Entire Website
After a lot of experimentation, I’ve decided Cursor is actually better than Bolt - here’s a series on how to use Cursor - here’s the prompt, videos coming soon:
Dog Website programmatic AI SEO website powerhouse
Let’s talk a bit about this method
-
Find a CSV of data on Kaggle which has CC0 (meaning you can use it commercially)
-
Use that data + ChatGPT 4o mini’s JSON mode to populate pages with data visualisations
-
Make the website using Cursor and launch on Vercel
Dynamic SSR website generation with Cursor:
prompt to build the app (Video coming shortly)
Video:
AI Built Me A Website with 176 Million Pages… Here’s How
This is another series coming very soon, showing the process of making finabusinessuk.com
I have now created 11+ websites with this programmatic SEO method:
getmarriedinitaly.co - released 22/10/2024 and has 200+ indexed pages on Google already
findatradespersonireland.com - Released 20/10/2024 has 1800 indexed pages on Google already
bestboardgamesfor.com - Released on 23/10/2024, did not submit to search console, 0 indexed pages
themeaningofbabynames.com - Released on 25/10/2024 - submitted to search console, currently 8 indexed pages after a few hours
https://whatdoesmybabynamemean.com/ - built for the video 3 part series showing how to build static pages with ChatGPT content and a database of information - 167k pages, released on 26-10-24 at 1:30am
https://www.findabusinessuk.com/ - business directory like findatradespersonireland - but with 170+ million pages (I think) - 1000 Keywords within 24 hours
https://whatdoesmybabynamemean.com/ - buitl live to show people how to make these websites
https://www.mydogbreedhelper.com/ - Best performing statically built website so far - in my opinion this is one of the better ways to make one of these websites
https://www.theroascalculator.com/ - one page website to see if I can rank a tool/calculator
https://www.thebestroicalculators.com/ - same as before but with a few more pages
So I am in a good position to talk about how this process works, step by step
Firstly, these websites have two different types - static and dynamic. Getmarriedinitaly and bestboardgamesfor are both statically generated websites. This means that when you build the application (website) using “npm run build” the pages are built at this point. This is much easier to conceptualize for most people, including myself - as it’s the traditional method of ranking on Google. This means that you’re effectively creating pages based on responses from an API. For example, getmarriedinitaly.co - all we did was create SEO meta tags and meta descriptions that are easily repeatable over many pages - think Get Married in Y Region of Italy, or get Married in an X (venue type) in Y (Region of Italy). We then fill this content with local businesses, taken from the data for seo API.
There’s nothing particularly special about these websites. They are static websites that will never change unless I run the build process again. The website is fully built already. This is true of bestboardgames.com as well.
However, findatradespersonireland.com is different - it is all dynamically generated. This means that when the website is thrown onto Google, certain pages don’t actually exist, they’re not in the sitemap, but they can still rank on Google:
https://findatradespersonireland.com/roofer - this page exists and is just a “find roofers in Ireland” page, with all the regions of Ireland on it - You click a region and it gives you:
https://findatradespersonireland.com/roofer/wexford - This page exists - it is a stiatically generated page, and can be found in the sitemap, then you click on a town:
https://findatradespersonireland.com/roofer/wexford/ferns - This page “doesn’t exist” - as in, it only exists when someone has clicked on it, it is not in the sitemap. BUT BUT BUT - Google can still crawl this page, and render the dataforSEO API in order to see the content:
When someone has clicked it, that’s when it exists, and becomes a cached version of the page, but it can be updated. For example, if a new business comes along and starts a roofing company in Ferns, Wexford - this page will eventually udpate automatically and add this new business to this page, without me rebuilding the entire website
These website types are harder to conceptualise in your head, at least for me, HOWEVER THEY ARE ACTUALLY EASIER TO BUILD
Why? Because when you have to build 1000+ pages statically, you have an issue at build time. You need it to build in under one hour. This is because Vercel (most common place to host a NextJS project) has a max build time for one hour - however by using SSR (server side rendering) Caching, fallbacks etc - We can actually launch a website much more quickly and easily.
What is the point of all this?
Have you ever seen such a clean “why pages aren’t indexed” profile? This is why Google loves these websites.
1900 Indexed pages in under a week? Completely insane. But also there are MORE pages indexed than “exist” or that were statically generated during the build process (only 1500 pages were generated at build time)
This is an example of a page that I didn’t even know would get indexed, but now I’ve done the test, I understand how this works - and we can now go ahead and build more projects
Here’s the step by step process:
-
Think of an idea and buy a domain - you wanna do this first because you want a brand name to put into the various AI tools we’re going to use
-
Optional Make a facebook page, instagram, etc. Make a logo, a favicon, etc
-
Give everything to V0 and ask it to make a clean modern modular homepage, footer, and header on one single page, using nextjs, shadcn, and tailwind
-
Give the code you get from V0 once you’re happy with it to bolt.new and say implement this design exactly as it is now, but make me a group of reusable components which can style my entire website - set up the project as a NextJS project with shadcn and tailwind
-
Think about, or use AI to think about, the different categories you’re going to use to create scale. This has to be a list of something that you can store in JSON, for example regions of ireland, towns within those regions of ireland, and trades - this gives 3 potential pages (if not more) per trade - X trade in Y region, X trade, and X trade in Y Region in Z Town
-
Change the prompt below to fit with your project, the key parts are, giving it an example JSON response from the API you want to use, giving it documentation for any relevant APIs, telling it to create pages that are both static pages and dynamically generated pages, using SSR or static generation, using caching and fallbacks, dynamic routing, Complete meta tag optimization including, Semantic HTML structure, Schema markup relevant to your content type, generate static pages with tag
-
There are two different things here: npm run dev (this starts your application as a webapp, without actually building it - this is very easy to do, and will hardly ever have any issues. This is basically like a preview of your website. The other is npm run build, which is much more complicated - but is required in order to launch your server)
-
You can run npm run dev until the entire website works basically as you want it, then fix the typescript errors one by one with bolt, until npm run build works and builds correctly, then you can launch on netlify or vercel.
This is the prompt I used to build findatradespersonireland.com:
- Prompt to build AI app here (hasn’t been tested but should work well)
programmatic AI SEO website powerhouse
**
**
Comprehensive Roadmap for Find a Tradesperson Ireland
Website Address: findabusinessuk.com
Generated on: 2024-10-19
Phase 1: Project Setup and Initial Configuration
1. Core Objectives
-
Programmatic SEO: Build a fully programmatic SEO-friendly website focusing on tradespeople in Ireland.
-
Dynamic Content Generation: Utilize lists of trades, counties, and towns to generate dynamic paths and pages.
-
Static and Dynamic Content Mix: Incorporate substantial static content at build time while fetching and caching dynamic content on-demand.
2. Initial Setup
- Development Environment
- Install Node.js and a code editor like Visual Studio Code.
- Initialize a new Next.js project with TypeScript support.
```bash
npx create-next-app@latest find-a-tradesperson-ireland —typescript
cd find-a-tradesperson-ireland
```
- Version Control
- Initialize a Git repository.
```bash
git init
git add .
git commit -m “Initial commit”
```
- Create a .gitignore file to exclude node_modules, .env.local, and other unnecessary files.
- Code Quality Tools
- Install and configure ESLint and Prettier.
```bash
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier —save-dev
npx eslint —init
```
- Configure .eslintrc.js and .prettierrc for consistent code style.
3. Install Required Libraries
- Styling
- Install Tailwind CSS for utility-first CSS styling.
```bash
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
- Configure tailwind.config.js to include paths to all your pages and components.
- UI Components
- Install shadcn/ui components for accessible and reusable UI elements.
```bash
npx shadcn-ui init
```
- Follow the prompts to set up the components.
- Icons
- Install Lucide Icons for consistent iconography.
```bash
npm install lucide-react
```
- Data Fetching
- Install Axios for handling HTTP requests.
```bash
npm install axios
```
4. Static Data Preparation
- Data Files
- Create a data directory to store your static JSON files.
- data/counties.json: List of counties and their towns in Ireland.
- data/trades.json: List of trades (e.g., plumbers, electricians, carpenters).
- Purpose
- These files will be used to programmatically generate all possible combinations of trades in various locations without hardcoding.
5. Environment Variables
- Secure Configuration
- Create a .env.local file to store environment-specific variables.
```env
GOOGLE_PLACES_API_KEY=
```
- Note: Ensure this file is included in your .gitignore to prevent sensitive data from being committed.
Phase 2: UI/UX Foundation
6. Design Layout Components
- Header and Footer
- Use shadcn/ui components to create consistent Header and Footer components.
- Include navigation links to main sections: Home, Trades, Counties, Contact.
- Main Layout
- Create a MainLayout component to wrap pages with the header and footer.
```jsx
// components/MainLayout.tsx
const MainLayout = ({ children }) ⇒ (
<>