Documentation

Creating Your Account

1. Click "Start Free" on the homepage

2. Sign up with Google or GitHub

3. You'll receive 10 free credits to start

Your First Project

1. Click "New Project" in the dashboard

2. Enter a project name (e.g., "My Coffee Shop")

3. Click "Create Project" to open the editor

Generating Your Site

1. In the chat panel, describe your website

2. Be specific: include business name, location, services

3. Click "Generate" and watch the magic happen!

What Makes a Good Prompt?

The more context you provide, the better your site will be. Include:

Business name: "My business is called Café Lyon"

Location: "Located in downtown Lyon, France"

Services: "We serve artisan coffee, pastries, and brunch"

Target audience: "For young professionals and remote workers"

Tone: "Warm, inviting, modern"

Example Prompts

Local Business

"Create a landing page for Café Lyon, an artisan coffee shop in downtown Lyon, France. We serve specialty coffee, homemade pastries, and weekend brunch. Our vibe is cozy and modern, perfect for remote workers and coffee enthusiasts. Include sections for menu highlights, our story, location with a map placeholder, and contact info."

Portfolio

"Build a portfolio website for Sarah Chen, a freelance UI/UX designer based in San Francisco. Showcase 6 project thumbnails, an about section highlighting 5 years of experience, skills in Figma and prototyping, and a contact form. Modern, minimal design with a blue accent color."

SaaS Landing Page

"Create a landing page for CloudSync, a file synchronization SaaS for teams. Key features: real-time sync, version history, team collaboration. Include hero section, features grid, pricing table (Free, Pro $10/mo, Enterprise), testimonials, and CTA sections."

What We Optimize

Every site generated by Rankable includes:

Meta Tags (30 points)

Title tag: Optimized length (30-60 chars), includes main keyword

Meta description: Compelling copy (120-160 chars), drives clicks

Heading Structure (15 points)

• Exactly one H1 tag per page

• Logical H2, H3 hierarchy

Schema.org Markup (15 points)

• Appropriate schema type (LocalBusiness, WebSite, etc.)

• Rich snippets in search results

Open Graph (15 points)

• og:title, og:description, og:type

• Social media preview optimization

Technical SEO (25 points)

• sitemap.ts for crawling

• robots.ts for access control

• Semantic HTML structure

• Image alt text

Verifying Your Score

After export, run Google Lighthouse on your deployed site:

1. Open Chrome DevTools (F12)

2. Go to "Lighthouse" tab

3. Select "SEO" category

4. Click "Analyze page load"

Your score should be 100/100!

Connecting GitHub

1. Click "Export" in the project header

2. If prompted, connect your GitHub account

3. Grant repository access when asked

Creating a New Repository

1. Select "New Repository"

2. Enter a repository name

3. Choose Public or Private

4. Click "Export"

Your code is now on GitHub!

Exporting to Existing Repository

1. Select "Existing Repository"

2. Choose from your repositories list

3. Confirm the overwrite warning

4. Click "Export"

Note: This creates a new commit, preserving history.

One-Click Deployment

After exporting to GitHub:

1. Go to [vercel.com/new](https://vercel.com/new)

2. Import your GitHub repository

3. Click "Deploy"

That's it! Your site is live in ~2 minutes.

Custom Domain

1. In Vercel dashboard, go to Settings > Domains

2. Add your custom domain

3. Update DNS records as instructed

4. SSL certificate is automatic

Environment Variables

Your generated site doesn't require any environment variables by default. If you add features that need them (like a contact form), add them in Vercel Settings > Environment Variables.

How do credits work?

Each generation (initial or iteration) uses 1 credit. Free users get 10 credits one-time. Paid users get credits monthly.

Can I edit the generated code?

Yes! After exporting to GitHub, the code is yours. Edit in VS Code, add features, customize as needed.

What if my SEO score isn't 100?

This is rare, but if it happens:

1. Check that your prompt was specific enough

2. Try iterating with "Add meta description for..."

3. The SEO panel shows exactly what's missing

Do you support multi-page sites?

Yes! Pro and Business plans support multiple pages per project. Generate additional pages using the same chat interface.

Can I use my own design system?

For MVP, we use Tailwind CSS and a clean default design. Custom design systems are on our roadmap for future releases.