xixu-me/deeplx-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
457c3e1bf493987b5e29cb650ca5ff493f4a7aca
deeplx-app/SEO_IMPLEMENTATION_GUIDE.md
T

489 lines
12 KiB
Markdown
Raw Blame History

# DeepLX App - SEO Implementation Guide
Quick implementation guide with code snippets for all recommended SEO improvements.
## Quick Links
- [robots.txt](#robotstxt)
- [manifest.json](#manifestjson)
- [sitemap.xml](#sitemapxml)
- [browserconfig.xml](#browserconfigxml)
- [JSON-LD Schema](#json-ld-structured-data)
- [Index.html Fixes](#indexhtml-fixes)
---
## robots.txt
**Location**: `/robots.txt` (root directory)
**Impact**: Medium | **Time**: 5 minutes
### Create `/robots.txt`:
```txt
# DeepLX App - Robots Configuration
# Allow search engines to crawl all content
User-agent: *
Allow: /
# Disallow private paths (if any)
# Disallow: /admin
# Specify sitemap location
Sitemap: https://deeplx.xi-xu.me/sitemap.xml
# Crawl delay (optional - in seconds)
Crawl-delay: 1
# User-agent specific rules (optional)
User-agent: Googlebot
Allow: /
User-agent: Bingbot
Allow: /
User-agent: AhrefsBot
Disallow: /
```
### Verification:
- Access `https://deeplx.xi-xu.me/robots.txt` in browser
- Verify in Google Search Console (Settings > Crawlers > Test robots.txt)
---
## manifest.json
**Location**: `/manifest.json` (root directory)
**Impact**: Medium | **Time**: 20 minutes
### Create `/manifest.json`:
```json
{
"name": "DeepLX App - Free Translation Tool",
"short_name": "DeepLX",
"description": "Free web-based translation app powered by DeepLX API. Translate text between 30+ languages with auto-detection, translation history, and RTL support.",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#1f2937",
"theme_color": "#1f2937",
"orientation": "portrait-primary",
"categories": ["productivity", "utilities"],
"prefer_related_applications": false,
"icons": [
{
"src": "logo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "logo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"screenshots": [
{
"src": "logo.png",
"sizes": "540x720",
"type": "image/png",
"form_factor": "narrow"
},
{
"src": "logo.png",
"sizes": "1280x720",
"type": "image/png",
"form_factor": "wide"
}
],
"shortcuts": [
{
"name": "Translate Text",
"short_name": "Translate",
"description": "Open the translation interface",
"url": "/?mode=translate",
"icons": [
{
"src": "logo.png",
"sizes": "192x192"
}
]
}
]
}
```
### Add to index.html head:
```html
<!-- Add this line to the <head> section of index.html -->
<link rel="manifest" href="/manifest.json" />
```
### Verification:
- DevTools > Application > Manifest
- Should load without errors
- Test PWA installation (Chrome: Install app button)
---
## sitemap.xml
**Location**: `/sitemap.xml` (root directory)
**Impact**: Low-Medium | **Time**: 10 minutes
### Create `/sitemap.xml`:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
<url>
<loc>https://deeplx.xi-xu.me</loc>
<lastmod>2025-11-12</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
<mobile:mobile/>
</url>
</urlset>
```
### Alternative with multiple language versions (if needed):
```xml
<?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://deeplx.xi-xu.me</loc>
<lastmod>2025-11-12</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://deeplx.xi-xu.me" />
</url>
</urlset>
```
### Verification:
- Access `https://deeplx.xi-xu.me/sitemap.xml` in browser
- Add to Google Search Console (Sitemaps > New Sitemap)
---
## browserconfig.xml
**Location**: `/browserconfig.xml` (root directory)
**Impact**: Low | **Time**: 10 minutes
### Create `/browserconfig.xml`:
```xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="logo.png"/>
<square310x310logo src="logo.png"/>
<TileColor>#1f2937</TileColor>
</tile>
<notification>
<polling-uri src="https://deeplx.xi-xu.me" />
<polling-uri2 src="https://deeplx.xi-xu.me" />
<polling-uri3 src="https://deeplx.xi-xu.me" />
<polling-uri4 src="https://deeplx.xi-xu.me" />
<polling-uri5 src="https://deeplx.xi-xu.me" />
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
```
### Update index.html:
The meta tag is already present but should reference this file correctly:
```html
<!-- Already in index.html - no changes needed if browserconfig.xml exists -->
<meta name="msapplication-config" content="/browserconfig.xml" />
```
---
## JSON-LD Structured Data
**Location**: Add to `index.html` `<head>` section
**Impact**: High | **Time**: 40 minutes
### Add this script to index.html head (before closing `</head>`):
```html
<!-- JSON-LD Structured Data for Search Engines -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebApplication",
"@id": "https://deeplx.xi-xu.me/#webapp",
"name": "DeepLX App",
"description": "Free web-based translation app powered by DeepLX API. Translate text between 30+ languages with auto-detection, translation history, and RTL support.",
"url": "https://deeplx.xi-xu.me",
"applicationCategory": "Productivity",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
},
"screenshot": "https://deeplx.xi-xu.me/logo.png",
"image": "https://deeplx.xi-xu.me/logo.png",
"isAccessibleForFree": true,
"softwareRequirements": "Modern web browser with JavaScript enabled",
"operatingSystem": "Web",
"potentialAction": {
"@type": "UseAction",
"target": "https://deeplx.xi-xu.me"
},
"author": {
"@id": "https://deeplx.xi-xu.me/#organization"
}
},
{
"@type": "Organization",
"@id": "https://deeplx.xi-xu.me/#organization",
"name": "Xi Xu",
"url": "https://xi-xu.me",
"logo": "https://deeplx.xi-xu.me/logo.png",
"sameAs": [
"https://github.com/xixu-me",
"https://twitter.com/xixu_me"
],
"contactPoint": {
"@type": "ContactPoint",
"url": "https://xi-xu.me",
"contactType": "Technical Support"
}
},
{
"@type": "SoftwareApplication",
"@id": "https://deeplx.xi-xu.me/#app",
"name": "DeepLX App",
"operatingSystem": "Web",
"applicationCategory": "Productivity",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "100"
}
}
]
}
</script>
```
### Verification:
- [Google Structured Data Testing Tool](https://search.google.com/test/rich-results)
- Paste HTML and check for errors
- Should show valid WebApplication schema
---
## index.html Fixes
### Fix 1: Update OG Image to Absolute URL
**Current (WRONG):**
```html
<meta property="og:image" content="logo.png" />
```
**Updated (CORRECT):**
```html
<meta property="og:image" content="https://deeplx.xi-xu.me/logo.png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta property="og:image:type" content="image/png" />
```
### Fix 2: Update Twitter Image (Same Section)
**Current (WRONG):**
```html
<meta name="twitter:image" content="logo.png" />
```
**Updated (CORRECT):**
```html
<meta name="twitter:image" content="https://deeplx.xi-xu.me/logo.png" />
<meta name="twitter:image:alt" content="DeepLX App Logo" />
```
### Fix 3: Add manifest.json Link (In `<head>`)
```html
<!-- After the canonical link -->
<link rel="canonical" href="https://deeplx.xi-xu.me" />
<link rel="manifest" href="/manifest.json" />
```
### Fix 4: Improve Modal Accessibility
**Update History Panel:**
```html
<!-- Old -->
<div id="historyPanel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<!-- New -->
<div id="historyPanel"
class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
role="dialog"
aria-modal="true"
aria-labelledby="historyPanelTitle"
aria-hidden="true">
```
And update the title:
```html
<h2 class="text-xl font-bold text-white flex items-center gap-2" id="historyPanelTitle">
```
**Update Settings Panel (same way):**
```html
<div id="settingsPanel"
role="dialog"
aria-modal="true"
aria-labelledby="settingsPanelTitle"
aria-hidden="true">
```
---
## Implementation Checklist
### Phase 1: Critical Fixes (30 minutes)
- [ ] Create `/robots.txt` file
- [ ] Create `/manifest.json` file
- [ ] Create `/browserconfig.xml` file
- [ ] Update index.html with absolute OG image path
- [ ] Add manifest.json link to index.html head
- [ ] Test all URLs are accessible in browser
### Phase 2: Core SEO (60 minutes)
- [ ] Create `/sitemap.xml` file
- [ ] Add JSON-LD structured data to index.html head
- [ ] Improve modal ARIA attributes (role, aria-modal, aria-labelledby)
- [ ] Add aria-label to buttons without visible text
- [ ] Test with Google Structured Data Tool
### Phase 3: Verification (15 minutes)
- [ ] Validate schema with [Schema.org Validator](https://validator.schema.org/)
- [ ] Check Open Graph with [Open Graph Debugger](https://www.opengraph.xyz/)
- [ ] Verify Twitter Card with [Twitter Card Validator](https://cards-dev.twitter.com/validator)
- [ ] Test PWA with Chrome DevTools (Application tab)
- [ ] Submit sitemap to Google Search Console
### Phase 4: Monitoring (Ongoing)
- [ ] Add Google Search Console property
- [ ] Monitor search performance in GSC
- [ ] Track crawl errors
- [ ] Monitor Core Web Vitals
- [ ] Setup Google Analytics (optional)
---
## File Size Reference
After adding all SEO files:
```
Original Files:
- index.html: 14.7 KB
- script.js: 22.3 KB
- styles.css: 7.1 KB
New Files:
- manifest.json: ~1.5 KB
- sitemap.xml: ~0.5 KB
- browserconfig.xml: ~1 KB
- robots.txt: ~0.3 KB
Total additions: ~3.3 KB
No impact on load time (all static)
```
---
## Testing Resources
### Online Tools:
1. [Google Structured Data Testing Tool](https://search.google.com/test/rich-results)
2. [Open Graph Preview](https://www.opengraph.xyz/)
3. [Twitter Card Validator](https://cards-dev.twitter.com/validator)
4. [Schema.org Validator](https://validator.schema.org/)
5. [Lighthouse Performance Audit](chrome://extensions/shortcuts)
### Local Testing:
```bash
# Test robots.txt
curl https://deeplx.xi-xu.me/robots.txt
# Test manifest.json
curl https://deeplx.xi-xu.me/manifest.json
# Validate JSON-LD
# Use browser DevTools > Console to check for errors
```
---
## Common Issues & Solutions
### Issue: manifest.json returns 404
**Solution**: Ensure file is in root directory and named exactly `manifest.json`
### Issue: browserconfig.xml returns 404
**Solution**: Create the file - it's referenced in meta tags
### Issue: OG image not showing on Facebook/Twitter
**Solution**: Ensure absolute URL path and use Facebook Debugger to clear cache
### Issue: PWA not installing
**Solution**: Check manifest.json is valid, all icons exist, display mode is 'standalone'
### Issue: Schema errors in Google's tool
**Solution**: Use validator.schema.org to find exact errors, common issues:
- Missing required fields
- Invalid schema type
- Wrong date format (ISO 8601)
---
## Additional Resources
- [SEO Starter Guide](https://developers.google.com/search/docs)
- [Structured Data Markup](https://schema.org/)
- [Web.dev SEO Audit](https://web.dev/)
- [Moz SEO Guide](https://moz.com/beginners-guide-to-seo)
- [OpenGraph Protocol](https://ogp.me/)
- [Twitter Card Documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
---
**Total Implementation Time**: 1.5-2 hours
**Expected SEO Improvement**: 6.5/10 → 8.5/10+
**Difficulty Level**: Beginner to Intermediate
Reference in new issue View Git Blame Copy Permalink