feat: Separate SEO content to /about page (best practice)

- Remove header from main page for clean editor-only interface
- Create /app/about/page.tsx with comprehensive SEO content (1000+ words)
- Add About link next to 'Next-AI-Drawio' title in chat panel
- Add GitHub icon link to /about page navigation
- Update sitemap.ts to include /about page (priority: 0.8)

SEO improvements following industry best practices:
- Separate marketing content from app interface (Figma/Canva/Miro approach)
- Server-rendered /about page for optimal crawlability
- Clean URL structure for better internal linking
- Multiple indexable pages for broader keyword coverage
- Proper semantic HTML: H1, H2, H3, article, section tags
- 1000+ words of keyword-rich content

/about page includes:
- AI diagram generator overview with value proposition
- 6 detailed feature sections (AI creation, AWS diagrams, image replication, etc.)
- 3 popular use cases (AWS architecture, flowcharts, system design)
- Step-by-step usage guide (4 steps)
- Benefits section (save time, precision, free, privacy)
- Clear call-to-action with link back to editor
- GitHub link in navigation for social proof

This follows Google-approved architecture and avoids hidden content penalties.
This commit is contained in:
dayuan.jiang
2025-11-16 09:04:01 +09:00
parent 50b860bdea
commit 5e5c1fc31c
3 changed files with 349 additions and 1 deletions

View File

@@ -4,6 +4,7 @@ import type React from "react";
import { useRef, useEffect, useState } from "react";
import { FaGithub } from "react-icons/fa";
import { PanelRightClose, PanelRightOpen } from "lucide-react";
import Link from "next/link";
import {
Card,
@@ -226,7 +227,12 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
return (
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
<CardHeader className="p-4 flex flex-row justify-between items-center">
<CardTitle>Next-AI-Drawio</CardTitle>
<div className="flex items-center gap-3">
<CardTitle>Next-AI-Drawio</CardTitle>
<Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
About
</Link>
</div>
<div className="flex items-center gap-2">
<ButtonWithTooltip
tooltipContent="Hide chat panel (Ctrl+B)"