fix: improve SEO with pre-rendering and dynamic meta tags

Critical SEO improvements to fix Google Search Console indexing:

## Sitemap Updates:
- Added missing Invoice Editor and What's New pages
- Updated all lastmod dates to 2025-10-15
- Increased editor tools priority to 0.9
- Added organizational comments
- Fixed /whats-new route (was /release-notes)

## Pre-rendering Implementation:
- Added react-snap for static HTML generation
- Configured to pre-render all tool pages
- Solves React SPA indexing issue
- Crawlers now see full HTML content

## Dynamic Meta Tags:
- Added react-helmet-async for SEO management
- Created reusable SEO component with:
  - Dynamic titles and descriptions
  - Open Graph tags (Facebook)
  - Twitter Card tags
  - JSON-LD structured data
  - Canonical URLs
- Wrapped App with HelmetProvider
- Added SEO to Home page

## Route Fixes:
- Added /whats-new route (primary)
- Kept /release-notes as fallback
- Consistent routing across app

## Documentation:
- Created comprehensive SEO_FIX_GUIDE.md
- Step-by-step Google Search Console instructions
- Troubleshooting guide
- Timeline expectations
- Testing procedures

These changes will dramatically improve Google indexing and search visibility.
This commit is contained in:
dwindown
2025-10-15 10:01:48 +07:00
parent f60c1d16c8
commit f6c19e855d
7 changed files with 1670 additions and 98 deletions

75
src/components/SEO.js Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import { Helmet } from 'react-helmet-async';
const SEO = ({
title,
description,
keywords,
path = '/',
type = 'website',
image = 'https://dewe.dev/og-image.png'
}) => {
const siteUrl = 'https://dewe.dev';
const fullUrl = `${siteUrl}${path}`;
const fullTitle = title ? `${title} | Developer Tools` : 'Developer Tools - Essential Web Developer Utilities';
const defaultDescription = 'Free online developer tools for JSON, CSV, Base64, URL encoding, code beautification, and more. Privacy-first, no data storage, all processing in your browser.';
const metaDescription = description || defaultDescription;
const defaultKeywords = 'developer tools, json editor, csv converter, base64 encoder, url encoder, code beautifier, diff tool, web developer utilities, online tools';
const metaKeywords = keywords || defaultKeywords;
return (
<Helmet>
{/* Basic Meta Tags */}
<title>{fullTitle}</title>
<meta name="description" content={metaDescription} />
<meta name="keywords" content={metaKeywords} />
<link rel="canonical" href={fullUrl} />
{/* Open Graph / Facebook */}
<meta property="og:type" content={type} />
<meta property="og:url" content={fullUrl} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={metaDescription} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content="Developer Tools" />
{/* Twitter Card */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={fullUrl} />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={metaDescription} />
<meta name="twitter:image" content={image} />
{/* Additional SEO Tags */}
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="Developer Tools" />
<meta name="language" content="English" />
{/* JSON-LD Structured Data */}
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "WebApplication",
"name": fullTitle,
"description": metaDescription,
"url": fullUrl,
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"provider": {
"@type": "Organization",
"name": "Developer Tools",
"url": siteUrl
}
})}
</script>
</Helmet>
);
};
export default SEO;