SEO Guidelines for Adding New Content

This guide helps you maintain SEO compliance when adding new features, tools, or blog posts to your website.

🛠️ Adding a New Tool Page

When adding a new JSON tool (e.g., JSON Diff, JSON Generator), follow these steps:

1. Create the Tool Page Component

// app/tools/your-tool-name/page.tsx
'use client';

import { useState } from 'react';
import Link from 'next/link';

export default function YourToolPage() {
  // Your tool logic here

  // FAQ Schema - REQUIRED for SEO
  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "How do I use this tool?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Detailed answer about how to use the tool..."
        }
      },
      // Add 3-5 relevant questions
    ]
  };

  // Software Application Schema - REQUIRED for SEO
  const softwareSchema = {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Your Tool Name",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Any",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "description": "Brief description of what your tool does (max 200 chars)",
    "url": "https://www.bigjson.online/tools/your-tool-name",
    "featureList": [
      "Feature 1",
      "Feature 2",
      "Feature 3",
      "Feature 4",
      "Feature 5"
    ]
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Structured Data - MUST be first */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareSchema) }}
      />

      <div className="container mx-auto px-4 py-8">
        {/* Header with proper H1 */}
        <div className="mb-8">
          <Link href="/" className="text-gray-700 hover:text-gray-800 mb-4 inline-block">
            ← Back to JSON Viewer
          </Link>
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            Your Tool Name - Free Online Tool 2026
          </h1>
          <p className="text-gray-600">
            Clear description of what the tool does and its benefits.
          </p>
        </div>

        {/* Tool Interface */}
        {/* Your tool UI here */}

        {/* SEO Content - IMPORTANT for ranking */}
        <div className="max-w-4xl mx-auto space-y-8 text-gray-700 mt-12">
          <section className="bg-white rounded border border-gray-200 p-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              How to Use [Tool Name]
            </h2>
            <ol className="list-decimal list-inside space-y-2">
              <li>Step 1</li>
              <li>Step 2</li>
              <li>Step 3</li>
            </ol>
          </section>

          <section className="bg-white rounded border border-gray-200 p-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Why Use [Tool Name]?
            </h2>
            <ul className="list-disc list-inside space-y-2">
              <li>Benefit 1</li>
              <li>Benefit 2</li>
              <li>Benefit 3</li>
            </ul>
          </section>

          {/* Link to related tools */}
          <section className="bg-white rounded border border-gray-200 p-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              More Free JSON Tools
            </h2>
            <div className="grid md:grid-cols-3 gap-4">
              <Link href="/tools/json-formatter" className="block p-4 bg-gray-50 rounded hover:bg-gray-100">
                <h3 className="font-semibold text-gray-900 mb-1">JSON Formatter</h3>
                <p className="text-sm">Format and beautify JSON</p>
              </Link>
              {/* Add 2-3 related tools */}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

2. Create Metadata File

// app/tools/your-tool-name/metadata.ts
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Free [Tool Name] Online 2026 - [Primary Benefit]",
  description:
    "Compelling description (150-160 chars) with benefits and keywords",
  keywords: [
    "your tool name",
    "json your tool",
    "online your tool",
    "free your tool",
    "your tool 2026",
  ],
  openGraph: {
    title: "Free [Tool Name] Online 2026",
    description: "Short compelling description",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Free [Tool Name] Online 2026",
    description: "Short compelling description",
  },
  alternates: {
    canonical: "https://www.bigjson.online/tools/your-tool-name",
  },
};

3. Update Sitemap

// app/sitemap.ts - Add to toolPages array
const toolPages: MetadataRoute.Sitemap = [
  // ... existing tools
  {
    url: `${baseUrl}/tools/your-tool-name`,
    lastModified: new Date(),
    changeFrequency: "monthly",
    priority: 0.8,
  },
];

4. Add Navigation Links

Update these files to include links to your new tool:

Homepage (if it's a primary tool)
/tools page (tools index)
Related tool pages (in "More Tools" section)

📝 Adding a New Blog Post

1. Create the Blog Post File

// lib/blog/posts/[lang]/your-slug.ts
import { BlogPost } from "../../types";

export const post: BlogPost = {
  slug: "your-slug",
  title: "Your Article Title (55-60 characters)",
  description: "Compelling meta description (150-160 characters) with keywords",
  content: `
# Your Article Title

Brief introduction paragraph with primary keyword.

## Section 1 Heading

Content for section 1. Include keywords naturally.

## Section 2 Heading

Content for section 2.

### Subsection 2.1

More detailed content.

## Conclusion

Summary with call-to-action.
  `,
  author: "BigJSON.online",
  publishedAt: "2026-02-16",
  updatedAt: "2026-02-16", // Optional, update when post is revised
  readingTime: 5, // Minutes to read
  tags: ["json", "tutorial", "guide"], // 3-7 relevant tags
  category: "tutorial", // or 'guide', 'comparison', etc.
  relatedSlugs: ["related-post-1", "related-post-2"], // 2-4 related posts
};

2. Register the Post

// lib/blog/posts/[lang]/index.ts
export { post as yourSlug } from "./your-slug";

// In the posts array
export const posts = {
  // ... existing posts
  "your-slug": yourSlug,
};

3. SEO Best Practices for Blog Posts

Title Optimization

Include primary keyword at the beginning
Keep it under 60 characters
Make it compelling and click-worthy
Include year for freshness (e.g., "2026")

Description Optimization

150-160 characters
Include primary and secondary keywords
Add a call-to-action or value proposition
Make it unique for each post

Content Structure

# Main Title (H1) - Use only once

Brief intro paragraph with primary keyword in first 100 words.

## Major Section (H2)

Content with keywords naturally integrated.

### Subsection (H3)

More specific content.

## Another Major Section (H2)

Include:

- Lists for scannability
- **Bold** for emphasis
- `Code examples` when relevant
- Links to related content

## Conclusion

Summary and call-to-action.

Keyword Usage

Primary keyword in:
- Title
- First paragraph
- At least one H2 heading
- Meta description
- URL slug
Secondary keywords in:
- Other headings
- Body content (naturally)
- Image alt text (when added)

Internal Linking

Link to:

Related blog posts (2-5 links)
Related tools (1-3 links)
Category/tag pages

Example:

Learn more about [JSON formatting](./how-to-format-json) or try our
[JSON Formatter tool](/tools/json-formatter).

4. Tag Strategy

Good tags are:

✅ Relevant to content
✅ 3-7 per post
✅ Consistent across posts
✅ Broad enough to group content
❌ Not too specific (avoid one-time tags)

Example tag sets:

Tutorial: ['json', 'tutorial', 'beginner']
Comparison: ['json', 'comparison', 'xml', 'yaml']
Tool guide: ['json', 'tools', 'formatting']

🌐 Adding Content in New Languages

1. Create Language-Specific Content

// lib/blog/posts/pt/your-slug.ts (Portuguese example)
export const post: BlogPost = {
  slug: "your-slug", // SAME as English version
  title: "Seu Título em Português",
  description: "Descrição em português...",
  content: `Portuguese content here...`,
  // ... same structure as English
};

2. Ensure hreflang Works

The system automatically handles hreflang if:

✅ Slug is the same across all languages
✅ Post is registered in each language's index
✅ Language is in LANGUAGES constant

3. Translation Quality Checklist

All content fully translated (no mixed languages)
Keywords localized for target market
Examples and references culturally appropriate
Links updated if language-specific resources exist
Dates formatted per locale conventions

🔍 SEO Checklist for New Content

Before Publishing

After Publishing

Verify page appears in sitemap
Submit URL to Google Search Console
Run IndexNow script: pnpm run indexnow
Test with Rich Results Test
Check PageSpeed Insights score
Verify mobile-friendliness
Monitor indexing status

🎯 Content Quality Guidelines

Writing Style

Clear and concise: Avoid fluff, get to the point
Scannable: Use headings, lists, short paragraphs
Actionable: Provide practical steps and examples
Comprehensive: Cover the topic thoroughly
Updated: Reference current year, latest practices

Length Guidelines

Tool pages: 800-1500 words of supporting content
Tutorial posts: 1000-2000 words
Guide posts: 1500-3000 words
Comparison posts: 1200-2500 words

Content Elements to Include

✅ Clear introduction (what, why, who)
✅ Step-by-step instructions (how)
✅ Visual examples (code blocks, lists)
✅ Benefits and use cases
✅ Common mistakes/troubleshooting
✅ Related resources/tools
✅ Call-to-action (try tool, read more)

🔄 Updating Existing Content

When to Update

Information becomes outdated
New features added to tools
Search rankings decline
Competitor content is better
At least annually for evergreen content

How to Update

Update the content
Change updatedAt date in frontmatter
Update year in title (e.g., 2026 → 2027)
Add note at top: "Last updated: [Date]"
Resubmit to search engines
Run IndexNow

SEO Impact of Updates

✅ Shows Google content is maintained
✅ Can improve rankings for freshness
✅ Increases topical authority
✅ Better user experience

📊 Monitoring New Content Performance

First Week

Check indexing status in Search Console
Monitor Core Web Vitals
Review any crawl errors
Check structured data validity

First Month

Track impressions and clicks
Monitor position for target keywords
Check for rich results
Review click-through rate

Ongoing

Update content if underperforming
Add more internal links as relevant
Build external links (outreach, social)
Optimize based on search queries

❌ Common SEO Mistakes to Avoid

Content Mistakes

❌ Keyword stuffing
❌ Duplicate content across pages
❌ Thin content (< 300 words)
❌ Missing or duplicate meta descriptions
❌ Multiple H1 tags on one page
❌ Poor grammar/spelling
❌ No internal links

Technical Mistakes

❌ Missing structured data
❌ Wrong canonical URL
❌ Broken images/links
❌ Slow load times
❌ Not mobile-friendly
❌ Missing from sitemap
❌ Blocked by robots.txt

Publishing Mistakes

❌ Not testing before publishing
❌ Not submitting to search engines
❌ Forgetting to update sitemap
❌ Not monitoring after launch
❌ Publishing during low-traffic times

🎓 Resources for Content Creators

SEO Writing

Keyword Research

Google Keyword Planner
Google Trends
Search Console Performance Report

Content Ideas

Answer questions from:
- Google "People also ask"
- StackOverflow
- Reddit r/javascript, r/webdev
- GitHub issues
Competitor content gaps
User feedback/support questions

Remember: Quality content that helps users will always rank better than content written purely for SEO. Focus on providing value, and the SEO benefits will follow naturally.

FilesExpand file tree

SEO_CONTENT_GUIDELINES.md

Latest commit

History