feat: optimize SEO based on GSC data
- Fix broken hreflang: /en/ ghost page removed, all hreflang point to canonical / - Add canonical URL tag - Remove emoji from page titles - Rewrite title/description with target keywords (LaTeX OCR, math formula recognition, handwriting math) - Add JSON-LD WebApplication structured data schema - Update og:image to clean URL without OSS params, add og:image dimensions - Fix favicon reference from vite.svg to favicon.png - Add public/sitemap.xml with hreflang annotations - Add public/robots.txt pointing to sitemap - Update seoHelper.ts keywords for both zh/en to match search intent - Add CLAUDE.md project documentation
This commit is contained in:
76
CLAUDE.md
Normal file
76
CLAUDE.md
Normal file
@@ -0,0 +1,76 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
# Development server
|
||||
npm run dev
|
||||
|
||||
# Build
|
||||
npm run build # production
|
||||
npm run build:dev # development build (VITE_ENV=development)
|
||||
npm run build:prod # production build (VITE_ENV=production)
|
||||
|
||||
# Type checking
|
||||
npm run typecheck
|
||||
|
||||
# Linting
|
||||
npm run lint
|
||||
|
||||
# Unit tests (vitest)
|
||||
npm run test # run once
|
||||
npm run test:watch # watch mode
|
||||
|
||||
# E2E tests (playwright)
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
To run a single unit test file:
|
||||
```bash
|
||||
npx vitest run src/components/__tests__/AuthModal.test.tsx
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Provider Tree
|
||||
`main.tsx` wraps everything in: `BrowserRouter → AuthProvider → LanguageProvider → AppRouter`
|
||||
|
||||
### Routing
|
||||
Only two routes (`src/routes/AppRouter.tsx`):
|
||||
- `/` → `App` (main app)
|
||||
- `/auth/google/callback` → `AuthCallbackPage` (Google OAuth callback handler)
|
||||
|
||||
### Auth System
|
||||
- **`AuthContext.tsx`** — React context providing `signIn`, `signUp`, `beginGoogleOAuth`, `completeGoogleOAuth`, `signOut`. Uses `useReducer` with `authMachine.ts`.
|
||||
- **`authMachine.ts`** — Pure reducer + state types (`AuthPhase`, `AuthState`, `AuthAction`). No side effects — all async logic lives in `AuthContext`.
|
||||
- **`authService.ts`** — Calls backend API for login/register/Google OAuth/user info. Decodes JWT payload client-side to extract `UserInfo`. Handles session restore from `localStorage`.
|
||||
- **`lib/api.ts`** — `http` client wrapper with `tokenManager` (stores JWT in `localStorage` under key `texpixel_token`). Adds `Authorization` header automatically. Throws `ApiError` for non-success business codes.
|
||||
|
||||
### Environment / API
|
||||
- **`src/config/env.ts`** — Switches API base URL based on `VITE_ENV` env var:
|
||||
- `development`: `https://cloud.texpixel.com:10443/doc_ai/v1`
|
||||
- `production`: `https://api.texpixel.com/doc_ai/v1`
|
||||
- The API uses a custom response envelope: `{ request_id, code, message, data }`. Success is `code === 200` (some endpoints also accept `0`).
|
||||
|
||||
### Main App Flow (`App.tsx`)
|
||||
Three-panel layout: `LeftSidebar | FilePreview | ResultPanel`
|
||||
|
||||
Core data flow:
|
||||
1. On auth, `loadFiles()` fetches paginated task history from `/task/list`
|
||||
2. File upload goes: compute MD5 → get OSS pre-signed URL (`/oss/signature_url`) → PUT to OSS → create task (`/formula/recognition`) → poll every 2s for result
|
||||
3. Results cached in `resultsCache` ref (keyed by `task_id`) to avoid redundant API calls
|
||||
4. Guest users get 3 free uploads tracked via `localStorage` (`texpixel_guest_usage_count`)
|
||||
|
||||
### Internationalization
|
||||
`LanguageContext.tsx` supports `en` / `zh`. Language is auto-detected via IP (`lib/ipLocation.ts`) on first visit, persisted to `localStorage` on manual switch. All UI strings come from `lib/translations.ts` via `const { t } = useLanguage()`.
|
||||
|
||||
### Key Type Definitions
|
||||
- `src/types/api.ts` — All API request/response types, `TaskStatus` enum, `ApiErrorCode` enum, `ApiErrorMessages` map
|
||||
- `src/types/index.ts` — Internal app types (`FileRecord`, `RecognitionResult`)
|
||||
|
||||
### Tests
|
||||
- Unit tests: `src/components/__tests__/` and `src/contexts/__tests__/`, run with vitest + jsdom + `@testing-library/react`
|
||||
- E2E tests: `e2e/` directory, run with Playwright
|
||||
- Setup file: `src/test/setup.ts`
|
||||
92
index.html
92
index.html
@@ -3,56 +3,90 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Multi-language Support -->
|
||||
<link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/" />
|
||||
<link rel="alternate" hreflang="en" href="https://texpixel.com/en" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://texpixel.com/" />
|
||||
|
||||
<!-- Dynamic Title (will be updated by app) -->
|
||||
<title>⚡️ TexPixel - 公式识别工具 | Formula Recognition Tool</title>
|
||||
|
||||
<!-- SEO Meta Tags - Chinese (Default) -->
|
||||
<meta name="description" content="在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。Online formula recognition tool supporting printed and handwritten math formulas." />
|
||||
<meta name="keywords"
|
||||
content="公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,formula recognition,math formula,handwriting recognition,latex,mathml,markdown,texpixel,TexPixel,混合文字识别,document recognition" />
|
||||
<!-- hreflang: same URL serves both languages (SPA), point both to canonical -->
|
||||
<link rel="canonical" href="https://texpixel.com/" />
|
||||
<link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/" />
|
||||
<link rel="alternate" hreflang="en" href="https://texpixel.com/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://texpixel.com/" />
|
||||
|
||||
<!-- Title -->
|
||||
<title>TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool</title>
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="Free AI-powered math formula recognition tool. Convert handwritten or printed math formulas in images to LaTeX, MathML, and Markdown instantly. Supports PDF and image files." />
|
||||
<meta name="keywords" content="math formula recognition,LaTeX OCR,handwriting math recognition,formula to latex,math OCR,MathML converter,handwritten equation recognition,公式识别,数学公式OCR,手写公式识别,LaTeX转换,texpixel" />
|
||||
<meta name="author" content="TexPixel Team" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
|
||||
<!-- Open Graph Meta Tags - Bilingual -->
|
||||
<meta property="og:title" content="TexPixel - 公式识别工具 | Formula Recognition Tool" />
|
||||
<meta property="og:description" content="在线公式识别工具，支持印刷体和手写体数学公式识别。Online formula recognition tool supporting printed and handwritten math formulas." />
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="TexPixel - AI Math Formula Recognition Tool" />
|
||||
<meta property="og:description" content="Free AI-powered tool to convert handwritten or printed math formulas to LaTeX, MathML, and Markdown. Upload an image or PDF and get results instantly." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://texpixel.com/" />
|
||||
<meta property="og:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
|
||||
<meta property="og:locale" content="zh_CN" />
|
||||
<meta property="og:locale:alternate" content="en_US" />
|
||||
<meta property="og:image" content="https://cdn.texpixel.com/public/og-cover.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:locale:alternate" content="zh_CN" />
|
||||
<meta property="og:site_name" content="TexPixel" />
|
||||
|
||||
<!-- Twitter Card Meta Tags - Bilingual -->
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="TexPixel - Formula Recognition Tool | 公式识别工具" />
|
||||
<meta name="twitter:description" content="Online formula recognition tool supporting printed and handwritten math formulas. 支持印刷体和手写体数学公式识别。" />
|
||||
<meta name="twitter:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
|
||||
<meta name="twitter:title" content="TexPixel - AI Math Formula Recognition Tool" />
|
||||
<meta name="twitter:description" content="Convert handwritten or printed math formulas to LaTeX, MathML, and Markdown for free. Upload image or PDF — results in seconds." />
|
||||
<meta name="twitter:image" content="https://cdn.texpixel.com/public/og-cover.png" />
|
||||
<meta name="twitter:site" content="@TexPixel" />
|
||||
|
||||
<!-- Baidu Verification -->
|
||||
<meta name="baidu-site-verification" content="codeva-8zU93DeGgH" />
|
||||
|
||||
<!-- JSON-LD Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebApplication",
|
||||
"name": "TexPixel",
|
||||
"url": "https://texpixel.com/",
|
||||
"description": "AI-powered math formula recognition tool that converts handwritten or printed formulas in images to LaTeX, MathML, and Markdown.",
|
||||
"applicationCategory": "UtilitiesApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
},
|
||||
"featureList": [
|
||||
"Handwritten math formula recognition",
|
||||
"Printed formula OCR",
|
||||
"LaTeX output",
|
||||
"MathML output",
|
||||
"Markdown output",
|
||||
"PDF support",
|
||||
"Image support"
|
||||
],
|
||||
"inLanguage": ["en", "zh-CN"],
|
||||
"publisher": {
|
||||
"@type": "Organization",
|
||||
"name": "TexPixel",
|
||||
"url": "https://texpixel.com/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Language Detection Script -->
|
||||
<script>
|
||||
// Update HTML lang attribute based on user preference or browser language
|
||||
(function() {
|
||||
const savedLang = localStorage.getItem('language');
|
||||
const browserLang = navigator.language.toLowerCase();
|
||||
const isZh = savedLang === 'zh' || (!savedLang && browserLang.startsWith('zh'));
|
||||
document.documentElement.lang = isZh ? 'zh-CN' : 'en';
|
||||
|
||||
// Update page title based on language
|
||||
if (!isZh) {
|
||||
document.title = '⚡️ TexPixel - Formula Recognition Tool';
|
||||
if (isZh) {
|
||||
document.title = 'TexPixel - AI 数学公式识别工具 | LaTeX、MathML OCR';
|
||||
document.querySelector('meta[name="description"]').setAttribute('content',
|
||||
'免费 AI 数学公式识别工具，支持手写和印刷体公式识别，一键将图片或 PDF 中的数学公式转换为 LaTeX、MathML 和 Markdown 格式。');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -64,4 +98,4 @@
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
4
public/robots.txt
Normal file
4
public/robots.txt
Normal file
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://texpixel.com/sitemap.xml
|
||||
13
public/sitemap.xml
Normal file
13
public/sitemap.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
<url>
|
||||
<loc>https://texpixel.com/</loc>
|
||||
<lastmod>2026-03-11</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://texpixel.com/"/>
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://texpixel.com/"/>
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -8,14 +8,14 @@ interface SEOContent {
|
||||
|
||||
const seoContent: Record<Language, SEOContent> = {
|
||||
zh: {
|
||||
title: '⚡️ TexPixel - 公式识别工具',
|
||||
description: '在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。',
|
||||
keywords: '公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,混合文字识别,texpixel,TexPixel',
|
||||
title: 'TexPixel - AI 数学公式识别工具 | LaTeX、MathML OCR',
|
||||
description: '免费 AI 数学公式识别工具，支持手写和印刷体公式识别，一键将图片或 PDF 中的数学公式转换为 LaTeX、MathML 和 Markdown 格式。',
|
||||
keywords: '数学公式识别,LaTeX OCR,手写公式识别,公式转LaTeX,数学OCR,MathML转换,手写方程识别,公式识别,数学公式OCR,texpixel',
|
||||
},
|
||||
en: {
|
||||
title: '⚡️ TexPixel - Formula Recognition Tool',
|
||||
description: 'Online formula recognition tool supporting printed and handwritten math formulas. Convert images to LaTeX, MathML, and Markdown quickly and accurately.',
|
||||
keywords: 'formula recognition,math formula,OCR,handwriting recognition,latex,mathml,markdown,AI recognition,math tool,free,texpixel,TexPixel,document recognition',
|
||||
title: 'TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool',
|
||||
description: 'Free AI-powered math formula recognition tool. Convert handwritten or printed math formulas in images to LaTeX, MathML, and Markdown instantly. Supports PDF and image files.',
|
||||
keywords: 'math formula recognition,LaTeX OCR,handwriting math recognition,formula to latex,math OCR,MathML converter,handwritten equation recognition,texpixel',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user