SEO - Kleap Documentation

Make your Kleap app discoverable in search engines. Kleap builds Astro static sites, which are SEO- and GEO-friendly out of the box: pages are pre-rendered to fast, crawlable HTML, so search engines and AI crawlers see your content immediately. Your job is mostly to give the AI the right titles, meta tags, structured data, and image guidance.

Basic SEO Setup

Page Metadata

Every page should have metadata. Ask AI:

Add SEO metadata to the homepage with:
- Title: "MyApp - Build Apps Faster"
- Description: "Create beautiful web apps in minutes with AI"
- Open Graph tags for social sharing

Implementation

In Astro, metadata lives in the page’s <head> as standard tags:

---
const title = 'MyApp - Build Apps Faster';
const description = 'Create beautiful web apps in minutes with AI';
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content="/og-image.png" />
</head>

Essential SEO Elements

Title Tags

Unique per page - Each page needs its own title
Under 60 characters - Longer gets truncated
Include keywords - What users search for
Brand at end - “Page Name | MyApp”

"Update page titles to be SEO-friendly:
- Home: 'AI App Builder | MyApp'
- Pricing: 'Simple Pricing Plans | MyApp'
- About: 'About Us | MyApp'"

Meta Descriptions

Under 160 characters - Keep it concise
Include call-to-action - Why click?
Unique per page - No duplicates

Headings

Proper heading structure matters:

H1 - Main page title (one per page)
  H2 - Major sections
    H3 - Subsections

"Fix the heading structure on the homepage.
There should be only one H1, and sections should use H2."

Technical SEO

Sitemap

Generate a sitemap for search engines:

"Add a sitemap.xml that includes all public pages"

Astro generates the sitemap for you via its official sitemap integration — you just set your site URL. The AI wires this up so a sitemap-index.xml is produced at build time covering every page:

// astro.config.mjs
import sitemap from '@astrojs/sitemap';

export default {
  site: 'https://myapp.com',
  integrations: [sitemap()],
};

Robots.txt

Control what search engines can crawl:

"Add a robots.txt that allows all crawlers but blocks /admin"

Astro serves static files from public/, so a robots.txt there is picked up automatically:

# public/robots.txt
User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://myapp.com/sitemap-index.xml

Canonical URLs

Prevent duplicate content issues with a canonical <link> in the page <head>:

<link rel="canonical" href="https://myapp.com/page" />

Performance for SEO

Google considers page speed. Optimize:

Image Optimization

"Optimize all images: correct sizes, lazy loading, and
descriptive alt text — use Astro's <Image /> where possible"

Core Web Vitals

Target these metrics:

Metric	Target	What It Measures
LCP	< 2.5s	Loading speed
INP	< 200ms	Interactivity (responsiveness)
CLS	< 0.1	Visual stability

"Optimize the page for Core Web Vitals.
Add loading skeletons and optimize images."

Content SEO

Semantic HTML

"Use semantic HTML elements:
- nav for navigation
- main for main content
- article for blog posts
- section for content sections
- footer for footer"

Alt Text for Images

"Add descriptive alt text to all images for accessibility and SEO"

Good alt text:

<!-- Bad -->
<img alt="image1" />

<!-- Good -->
<img alt="Dashboard showing user analytics with charts" />

Internal Linking

Link between your pages:

"Add internal links from the homepage to feature pages
and from blog posts to related content"

Open Graph

For Facebook, LinkedIn — add Open Graph meta tags to the page <head>:

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter Cards

For Twitter/X — add Twitter Card meta tags to the page <head>:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="/twitter-image.png" />

Creating OG Images

"Create an Open Graph image template for the homepage
that shows the app name and tagline"

Structured Data

Help search engines understand your content:

Organization

"Add Organization structured data with our company name,
logo, and social profiles"

FAQ

"Add FAQ structured data to the FAQ page so it can
appear in Google's rich results"

Product

"Add Product structured data to product pages with
name, price, and availability"

SEO Checklist

Before launching:

Monitoring SEO

After launching:

Google Search Console - Monitor indexing and performance
Kleap Analytics - Track Core Web Vitals
Google PageSpeed Insights - Check performance

"Add Google Search Console verification meta tag"

Analytics

Track your app’s performance

Error Reference Security Tips

​Basic SEO Setup

​Page Metadata

​Implementation

​Essential SEO Elements

​Title Tags

​Meta Descriptions

​Headings

​Technical SEO

​Sitemap

​Robots.txt

​Canonical URLs

​Performance for SEO

​Image Optimization

​Core Web Vitals

​Content SEO

​Semantic HTML

​Alt Text for Images

​Internal Linking

​Social Sharing

​Open Graph

​Twitter Cards

​Creating OG Images

​Structured Data

​Organization

​FAQ

​Product

​SEO Checklist

​Monitoring SEO