SEO Best Practices

Good SEO makes your app findable. This guide covers the essentials for Lyna projects.

Meta tags and titles

Every page should have unique, descriptive meta tags. Ask the AI to add them when building pages:

"Add SEO meta tags to the homepage. Title: 'CloudSync - Effortless Cloud File Synchronization'. Description: 'Sync your files across all devices with zero configuration. CloudSync handles versioning, conflict resolution, and offline access automatically.'"

Key meta tags

Tag	Purpose	Best practice
`<title>`	Browser tab and search results title	50-60 characters, include primary keyword
`meta description`	Summary shown under the title in search results	150-160 characters, include a call to action
`meta viewport`	Responsive rendering on mobile	Already set by default in Lyna projects
`link rel="canonical"`	Prevents duplicate content issues	Set to the preferred URL for each page

Per-page metadata

In Next.js (which Lyna uses), define metadata with the metadata export or generateMetadata function:

export const metadata = {
  title: "Pricing - CloudSync",
  description: "Simple, transparent pricing for teams of all sizes.",
};

Ask the AI: "Add unique title and description meta tags to all pages in the project."

Open Graph tags control how your pages look when shared on Twitter/X, LinkedIn, and Facebook.

Essential OG tags

export const metadata = {
  openGraph: {
    title: "CloudSync - Effortless Cloud File Synchronization",
    description: "Sync your files across all devices with zero configuration.",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "CloudSync",
    description: "Effortless cloud file synchronization.",
    images: ["/og-image.png"],
  },
};

OG image guidelines

Size: 1200x630 pixels for summary_large_image cards
Format: PNG or JPEG
Content: Logo, headline, and a visual that represents the page
Place OG images in public/ so they are accessible by URL

Tip

Use Lyna's AI image generation to create OG images: "Generate a 1200x630 OG image for our pricing page with the CloudSync logo, the text 'Simple Pricing for Every Team', and a gradient background in blue and purple."

Semantic HTML

Search engines use HTML structure to understand your content. Semantic HTML improves both SEO and accessibility.

Heading hierarchy

One <h1> per page for the main title
<h2> for major sections, <h3> for subsections
Never skip levels (e.g., <h1> to <h3>)

Ask the AI: "Make sure all pages use a single h1 for the page title and h2/h3 for sections. Do not skip heading levels."

Semantic elements

Element	Use for
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Primary page content
`<article>`	Self-contained content (blog post, product card)
`<section>`	Thematic grouping
`<footer>`	Page or section footer
`<aside>`	Sidebar or supplementary content

Links and buttons

<a> for navigation, <button> for actions
Descriptive link text ("View pricing" not "Click here")
Internal links help search engines discover all pages

Performance

Page speed is a ranking factor. Lyna projects use Next.js, which handles many optimizations out of the box. A few additional steps:

Images

WebP for photos and illustrations
Add width and height attributes to prevent layout shift
Lazy load images below the fold
See Using Images for more

JavaScript

Use React Server Components by default (how Lyna projects are structured)
Only add "use client" when components need browser APIs, event handlers, or state
Less client-side JS means faster loads

Font loading

Limit custom fonts (see Custom Fonts)
WOFF2 for smallest file sizes
Consider font-display: swap to prevent invisible text during loading

Sitemap and robots.txt

Sitemap

A sitemap helps search engines discover all your pages. Ask the AI to generate one:

"Create a sitemap.xml listing all public pages. Place it in the public folder."

For dynamic sites, use Next.js built-in sitemap generation:

// app/sitemap.ts
export default function sitemap() {
  return [
    { url: "https://example.com", lastModified: new Date() },
    { url: "https://example.com/pricing", lastModified: new Date() },
    { url: "https://example.com/about", lastModified: new Date() },
  ];
}

robots.txt

Tells search engines what to crawl and what to skip. Place in public/:

User-agent: *
Allow: /
Disallow: /api/
Disallow: /dashboard/
Sitemap: https://example.com/sitemap.xml

Exclude private routes (dashboards, admin pages, API endpoints) from crawling.

Accessibility and SEO overlap

Many accessibility best practices also help SEO:

Alt text on images: Helps search engines understand image content
Descriptive link text: Context for search engines and screen readers
Proper heading structure: Helps search engines parse content hierarchy
Keyboard navigability: Part of overall page experience, which Google considers

Ask the AI: "Review all pages for accessibility issues. Check for missing alt text, improper heading structure, and missing ARIA labels."

On this page