> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hadoseo.com/llms.txt
> Use this file to discover all available pages before exploring further.
# SEO Optimization Guide
> Best practices to maximize your search engine visibility with Hado SEO
## Overview
Setting up Hado SEO is just the first step. This guide covers best practices to maximize your search engine visibility and get your pages ranking.
## SEO Checklist
Complete this checklist to ensure your app is fully optimized:
Essential files that help search engines discover and crawl your pages efficiently. See the [AI prompts below](#ai-prompts-for-implementation) for ready-to-use implementation prompts.
You can configure a custom sitemap and robots.txt in your [Domain Settings](/dashboard/domain-settings). Otherwise, use the AI prompts below to add them to your app.
Use React Helmet with unique titles (50-60 chars) and descriptions (140-160 chars) for each page:
```html theme={null}
Your Page Title - Your Brand
```
Add OG and Twitter Card tags with 1200x630px images for social media sharing:
```html theme={null}
```
Implement schema markup (Organization, Article, WebSite) to help search engines understand your content:
```html theme={null}
```
Proper heading hierarchy (single H1, logical H2-H3), alt text on images, and semantic elements (``, `
1. Go to [Google Search Console](https://search.google.com/search-console)
2. Add your domain as a property
3. Verify ownership (DNS verification recommended)
4. Submit your sitemap
5. Request indexing for key pages
After implementing SEO changes, trigger a recrawl from your Hado SEO dashboard to ensure search bots see your fully-rendered content with all the new meta tags and structured data.
## Meta Tags Best Practices
### Title Tags
| Do | Don't |
| ------------------------- | ------------------------------ |
| Keep under 60 characters | Use generic titles like "Home" |
| Include primary keyword | Stuff multiple keywords |
| Make each page unique | Duplicate titles across pages |
| Put important words first | Start with your brand name |
**Example:**
```
✅ "AI SEO Tools for React Apps | Hado SEO"
❌ "Hado SEO - Home Page - Welcome to Our Website"
```
### Meta Descriptions
| Do | Don't |
| ------------------------ | ----------------------------------- |
| Write 150-160 characters | Exceed 160 characters |
| Include a call to action | Use the same description everywhere |
| Summarize page content | Stuff with keywords |
| Make it compelling | Write generic descriptions |
**Example:**
```
✅ "Make your JavaScript app visible to Google in 5 minutes.
No code changes required. Start your free trial today."
❌ "Welcome to our website. We offer many services and products."
```
## React/JavaScript Framework Tips
### Using React Helmet
```jsx theme={null}
import { Helmet } from 'react-helmet-async';
function ProductPage({ product }) {
return (
<>
{product.name} | Your Store
{/* Page content */}
);
}
```
### Dynamic Meta Tags
For pages with dynamic content, ensure meta tags are set before the page renders:
```jsx theme={null}
// ✅ Good - Meta tags set with data
function BlogPost({ post }) {
return (
{post.title}
);
}
// ❌ Bad - Generic fallback that never updates
function BlogPost({ post }) {
return (
Blog Post
);
}
```
## Using Hado SEO's Free Tools
### SEO Bot Crawler Test
Test what search engines see when they visit your page:
1. Go to [hadoseo.com/free-seo-bot-crawler-test](https://hadoseo.com/free-seo-bot-crawler-test)
2. Enter your URL
3. See the rendered HTML that Googlebot receives
4. Check for missing content or meta tags
### OG Preview Checker
Preview how your links appear on social media:
1. Go to [hadoseo.com/free-og-preview-checker](https://hadoseo.com/free-og-preview-checker)
2. Enter your URL
3. See previews for Twitter, Facebook, LinkedIn, and Discord
4. Identify and fix any issues
### Meta Tags Checker
Analyze your page's meta tags:
1. Go to [hadoseo.com/free-meta-tags-checker](https://hadoseo.com/free-meta-tags-checker)
2. Enter your URL
3. Get a comprehensive report on all meta tags
4. See recommendations for improvements
## After Setup: Getting Indexed
### Request Indexing in Google Search Console
1. Go to Google Search Console
2. Enter your URL in the inspection bar
3. Click "Request Indexing"
4. Repeat for your most important pages
Google typically re-crawls sites within days to weeks. Requesting indexing can speed this up for specific pages.
### Monitor Your Progress
In your Hado SEO dashboard, track:
* **Crawl activity** - See when bots visit
* **Cache hits** - Measure prerendering effectiveness
* **Bot breakdown** - Which search engines are crawling
## Common SEO Issues
**Possible causes:**
* Missing or blocked in robots.txt
* No internal links to the page
* Page not in sitemap
* Low-quality or duplicate content
**Solutions:**
* Check robots.txt configuration
* Add internal links from other pages
* Include in your sitemap
* Ensure unique, valuable content
**Possible causes:**
* Duplicate content issues
* Missing canonical tags
* Multiple URLs for same content
**Solutions:**
* Add canonical tags to specify preferred URL
* Implement 301 redirects for duplicates
* Use consistent internal linking
**Possible causes:**
* Missing Open Graph tags
* OG image URL is relative, not absolute
* Image too small or wrong format
**Solutions:**
* Add complete OG tags to all pages
* Use absolute URLs for og:image
* Ensure image is at least 1200x630px
## AI Prompts for Implementation
Copy-paste these prompts into your AI coding assistant (Lovable, Cursor, Bolt.new, etc.) to implement SEO best practices. Hado SEO handles the technical rendering. You handle the on-page SEO.
### Quick Start Prompt
Use this all-in-one prompt to implement the essentials in a single pass:
```
I need you to implement comprehensive on-page SEO best practices for my project. Please add:
## Meta Tags in index.html:
- Title tag (50-60 characters, keyword-rich)
- Meta description (150-160 characters, compelling)
- Meta viewport for mobile responsiveness
- Canonical URL pointing to the primary domain
## Open Graph & Social Media Tags:
- og:title, og:description, og:image, og:url, og:type
- Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image)
- Use a high-quality preview image (1200x630px recommended)
## Sitemap.xml:
- Create a proper sitemap.xml file in the public folder
- Include all important pages with priority and lastmod dates
- Follow XML sitemap protocol standards
- IMPORTANT: Only include publicly accessible pages. Exclude authentication-protected
pages (login, dashboard, settings, user profiles, etc.) from the sitemap
## Structured Data (JSON-LD):
- Add relevant Schema.org structured data based on my site type
- Include Organization/Website schema at minimum
- Add breadcrumbs, articles, products, or other relevant schemas as appropriate
## robots.txt:
- Create a robots.txt file allowing all crawlers
- Reference the sitemap.xml location
## Additional SEO Elements:
- Semantic HTML5 structure (header, nav, main, article, footer)
- Proper heading hierarchy (single H1, followed by H2s, H3s)
- Alt text for all images
- Internal linking structure
Please implement all of these SEO elements with production-ready code following
current best practices.
```
### Detailed Prompts by Category
For more control, use these targeted prompts for specific SEO tasks:
**Basic SEOHead Component**
```
Create a reusable SEOHead component using react-helmet-async that I can use
across all pages. The component should:
1. Accept these props with sensible defaults:
- title (with site name suffix pattern: "Page Title | Site Name")
- description (max 160 chars, with fallback default)
- keywords (array of strings)
- canonicalUrl (auto-generate from current path if not provided)
- ogImage (with fallback to default site image)
- ogType (default: "website", support "article" for blog posts)
- noindex (boolean, default false)
- structuredData (JSON-LD object)
2. Include these meta tags:
- Basic: title, description, keywords, robots, viewport, charset
- Open Graph: og:title, og:description, og:image, og:url, og:type,
og:site_name
- Twitter Cards: twitter:card, twitter:title, twitter:description,
twitter:image, twitter:site
- Canonical URL
3. Support JSON-LD structured data injection with these common schemas:
- Organization (for homepage)
- WebPage (default for all pages)
- Article/BlogPosting (for blog posts)
- Product (for product pages)
- BreadcrumbList
- FAQPage
4. Include helper functions to generate structured data for common page types
5. Wrap the app with HelmetProvider in the main App component
Use my site's canonical domain for all absolute URLs. Make the component
TypeScript-friendly with proper type definitions.
```
**Enhanced SEOHead with Article Support**
```
Extend the SEOHead component to better support article/blog content with:
1. Article-specific meta tags:
- article:published_time, article:modified_time
- article:author, article:section
- article:tag (multiple)
2. Article JSON-LD schema including:
- headline, description, image
- datePublished, dateModified
- author (Person schema), publisher (Organization schema with logo)
- mainEntityOfPage
3. Reading time estimation based on word count
4. Support for multiple authors
5. Breadcrumb generation for article category hierarchy
```
**Backend Function Sitemap (With Database Entities)**
```
Create a dynamic sitemap system using backend functions that handles large
datasets. Requirements:
1. Create a sitemap index at /sitemap.xml that references:
- /sitemap-static.xml (static pages)
- /sitemap-posts-1.xml, /sitemap-posts-2.xml, etc. (paginated dynamic
content)
- /sitemap-[entity]-N.xml for each entity type with 1000+ records
2. For the dynamic sitemap edge functions:
- Query Supabase in batches of 1000
- Include proper lastmod dates from updated_at columns
- Set appropriate changefreq and priority values
- Handle pagination: if entity count > 50000, create multiple sitemap files
3. The backend function should:
- Accept entity type and page number as parameters
- Return proper XML content-type header
- Include XML declaration and urlset namespace
- Use the canonical domain: [YOUR_DOMAIN]
4. Include these entity types in dynamic sitemaps:
- [List your entities, e.g., /blog/[slug], /products/[id],
/users/[username]]
Provide both the backend function code and the static sitemap index file.
```
**Static-Only Sitemap (No Database Dependencies)**
```
Create a static sitemap.xml file for my site that has no database-dependent
pages. Include:
1. A sitemap.xml file at the public root directory containing:
- All public pages with their full canonical URLs using [YOUR_DOMAIN]
- Appropriate lastmod dates
- changefreq values (daily for homepage, weekly for main pages, monthly
for static)
- priority values (1.0 for homepage, 0.8 for main sections, 0.6 for
subpages)
2. These pages:
- Homepage (/)
- [List all your static pages, e.g., /about, /pricing, /contact,
/features, /blog]
Make sure the sitemap validates against the sitemap protocol specification.
```
**Hybrid Sitemap (Some Dynamic Content)**
```
Create a sitemap system for my site that has both static pages and some
dynamic content from Supabase, but not enough to require pagination (under
1000 items per entity).
1. Create an edge function at /api/sitemap.xml that:
- Fetches all dynamic entities from Supabase in a single query per entity
- Combines with hardcoded static page URLs
- Returns complete sitemap XML
- Caches the response for 1 hour
- Uses canonical domain: [YOUR_DOMAIN]
2. Include static pages:
- [List your static pages]
3. Include dynamic entities:
- [List your dynamic routes, e.g., blog posts at /blog/[slug]]
4. For each URL include:
- loc (full canonical URL)
- lastmod (from database updated_at or static date)
- changefreq (based on content type)
- priority (based on page importance)
5. Also create a fallback static sitemap.xml in public/ in case the edge
function fails
```
**Standard Robots.txt**
```
Create a robots.txt file at the public root directory with:
1. Allow all legitimate crawlers to access the site
2. Block crawling of:
- /api/* (API routes)
- /admin/* (if exists)
- /_next/* (Next.js internals, if applicable)
- /private/* (any private routes)
- Query parameters that create duplicate content (?ref=, ?utm_*, etc.)
3. Include sitemap location: [YOUR_DOMAIN]/sitemap.xml
4. Specific rules for:
- Googlebot (allow all public content)
- Bingbot (allow all public content)
- GPTBot, ChatGPT-User, CCBot (block if desired for AI training)
Use this format:
User-agent: [bot]
Allow: /
Disallow: /path
Sitemap: https://[YOUR_DOMAIN]/sitemap.xml
```
**Robots.txt with AI Bot Controls**
```
Create a robots.txt that includes specific rules for AI/LLM crawlers:
1. Standard search engine bots (Googlebot, Bingbot, etc.): Allow all public
content
2. Include standard disallows for API routes, admin areas, user private data,
and duplicate content paths
3. Sitemap reference
Provide clear comments explaining each section.
```
**Dynamic OG Image Route**
```
Create an edge function or API route that generates dynamic Open Graph images
for social sharing. Requirements:
1. Create an endpoint at /api/og that accepts query parameters:
- title (required), description (optional)
- type (e.g., "article", "product", "default")
- image (optional background or featured image URL)
2. Generate a 1200x630 pixel image with:
- Site branding (logo, colors)
- Dynamic title text (auto-size to fit)
- Optional description
- Gradient or branded background
3. Use @vercel/og, Satori, or similar for image generation
4. Cache generated images appropriately
5. Return proper content-type: image/png
6. Create pre-made templates for:
- Blog posts (title + author + date)
- Products (title + price + image)
- Default pages (title + site name)
Then update the SEOHead component to use this endpoint for pages without
custom OG images.
```
**Static OG Image Setup**
```
Set up static Open Graph images for my site:
1. Create an /public/og/ directory structure:
- /og/default.png (1200x630, site default)
- /og/home.png (homepage specific)
- /og/[page-name].png (for key pages)
2. Update the SEOHead component to:
- Check if a page-specific OG image exists
- Fall back to default if not
- Use absolute URLs with the canonical domain
3. Ensure images are: 1200x630px, under 1MB, PNG or JPG format
List the pages I should create custom OG images for based on my site
structure.
```
**Canonical URL Handling**
```
Implement proper canonical URL handling across the site:
1. Add canonical link tags to every page via SEOHead component
2. Handle these scenarios:
- Query parameters: canonical should exclude tracking params (?utm_*,
?ref=)
- Trailing slashes: pick one format and stick to it (recommend no trailing
slash)
- Protocol: always use https
- WWW: pick one (recommend non-www) and redirect the other
- Case sensitivity: lowercase all URLs
3. Create a utility function getCanonicalUrl(path, params) that constructs
the full canonical URL, strips unwanted query parameters, and normalizes
the URL format
```
**Structured Data / JSON-LD Library**
```
Create a library of JSON-LD structured data generators for common page types:
1. Organization (homepage/about): name, url, logo, sameAs (social profiles)
2. WebSite (homepage): name, url, potentialAction (SearchAction)
3. WebPage (all pages): name, description, url, isPartOf
4. BreadcrumbList (all non-homepage): generate from URL path
5. Article/BlogPosting: headline, datePublished, dateModified, author,
publisher
6. Product (if e-commerce): name, description, image, offers, aggregateRating
7. FAQPage: array of Question/Answer pairs
8. LocalBusiness (if applicable): name, address, telephone, openingHours
Create each as a TypeScript function that returns the JSON-LD object. Include
a helper to inject multiple schemas on one page.
```
**Internal Linking & Navigation SEO**
```
Improve internal linking and navigation for SEO:
1. Create a breadcrumb component that generates from URL path, includes
JSON-LD BreadcrumbList schema, uses semantic nav element with aria-label
2. Implement proper heading hierarchy check: single H1 per page, no skipped
heading levels
3. Add semantic HTML5 elements: header, nav, main, article, aside, footer
4. Create a related content component that links to 3-5 related pages with
proper anchor text (not "click here")
```
**Performance & Core Web Vitals**
```
Optimize for Core Web Vitals and page speed (important for SEO):
1. Image optimization: lazy loading, WebP with fallbacks, width/height to
prevent layout shift (CLS)
2. Font optimization: font-display: swap, preload critical fonts
3. JavaScript optimization: code split by route, defer non-critical JS
4. Resource hints: preconnect for critical third-party domains, prefetch for
likely navigation
```
**404 and Error Page SEO**
```
Create SEO-friendly error pages:
1. Custom 404 page with helpful content, navigation back to main sections,
and a noindex meta tag via React Helmet
2. React error boundary that catches runtime errors, displays a friendly
fallback UI with navigation options, and adds a noindex meta tag to
prevent error states from being indexed
```
Learn to track your SEO progress in the Hado SEO dashboard
Solutions for indexing issues, duplicates, and OG tag problems