xixu-me/deeplx-app

0 Fork 0

Files

T

Claude 457c3e1bf4 Add SEO analysis and implementation documentation

2025-11-12 14:54:34 +00:00

12 KiB

Raw Blame History

DeepLX App - SEO Implementation Guide

Quick implementation guide with code snippets for all recommended SEO improvements.

Quick Links

robots.txt
manifest.json
sitemap.xml
browserconfig.xml
JSON-LD Schema
Index.html Fixes

robots.txt

Location: /robots.txt (root directory) Impact: Medium | Time: 5 minutes

Create `/robots.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`:

{
  "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:

<!-- 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 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 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 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:

<!-- 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>`):

<!-- 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
Paste HTML and check for errors
Should show valid WebApplication schema

index.html Fixes

Fix 1: Update OG Image to Absolute URL

Current (WRONG):

<meta property="og:image" content="logo.png" />

Updated (CORRECT):

<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):

<meta name="twitter:image" content="logo.png" />

Updated (CORRECT):

<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>`)

<!-- After the canonical link -->
<link rel="canonical" href="https://deeplx.xi-xu.me" />
<link rel="manifest" href="/manifest.json" />

Update History Panel:

<!-- 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:

<h2 class="text-xl font-bold text-white flex items-center gap-2" id="historyPanelTitle">

Update Settings Panel (same way):

<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
Check Open Graph with Open Graph Debugger
Verify Twitter Card with Twitter Card 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:

Local Testing:

# 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

Total Implementation Time: 1.5-2 hours Expected SEO Improvement: 6.5/10 → 8.5/10+ Difficulty Level: Beginner to Intermediate

12 KiB Raw Blame History

DeepLX App - SEO Implementation Guide

Quick Links

robots.txt

Create /robots.txt:

Verification:

manifest.json

Create /manifest.json:

Add to index.html head:

Verification:

sitemap.xml

Create /sitemap.xml:

Alternative with multiple language versions (if needed):

Verification:

browserconfig.xml

Create /browserconfig.xml:

Update index.html:

JSON-LD Structured Data

Add this script to index.html head (before closing </head>):

Verification:

index.html Fixes

Fix 1: Update OG Image to Absolute URL

Fix 2: Update Twitter Image (Same Section)

Fix 3: Add manifest.json Link (In <head>)

Fix 4: Improve Modal Accessibility

Implementation Checklist

Phase 1: Critical Fixes (30 minutes)

Phase 2: Core SEO (60 minutes)

Phase 3: Verification (15 minutes)

Phase 4: Monitoring (Ongoing)

File Size Reference

Testing Resources

Online Tools:

Local Testing:

Common Issues & Solutions

Issue: manifest.json returns 404

Issue: browserconfig.xml returns 404

Issue: OG image not showing on Facebook/Twitter

Issue: PWA not installing

Issue: Schema errors in Google's tool

Additional Resources

12 KiB

Raw Blame History

Create `/robots.txt`:

Create `/manifest.json`:

Create `/sitemap.xml`:

Create `/browserconfig.xml`:

Add this script to index.html head (before closing `</head>`):

Fix 3: Add manifest.json Link (In `<head>`)