SEO Optimization Guide: Improve Your Search Rankings - Shi Kun

SEO is key to acquiring organic traffic. This article explores technical SEO and optimization strategies.

SEO Fundamentals

How Search Engines Work

Search Engine Workflow:
┌─────────────────────────────────────────────────────┐
│                                                     │
│   Crawling                                          │
│   └── Bots discover and access web pages           │
│                                                     │
│   Indexing                                          │
│   └── Analyze and store page content               │
│                                                     │
│   Ranking                                           │
│   └── Sort results based on algorithms             │
│                                                     │
└─────────────────────────────────────────────────────┘

Factor	Importance	Optimization
Content Quality	Highest	Original, valuable
User Experience	High	Core Web Vitals
Technical SEO	High	Crawlable, indexable
Backlinks	Medium	Authority sites

Technical SEO

Meta Tags

<head>
  <!-- Basic Meta -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- SEO Meta -->
  <title>Page Title | Site Name</title>
  <meta name="description" content="155 characters page description with keywords" />
  <meta name="keywords" content="keyword1, keyword2, keyword3" />

  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/page" />

  <!-- Language and Region -->
  <html lang="en">
  <link rel="alternate" hreflang="en" href="https://example.com/en/page" />
  <link rel="alternate" hreflang="zh" href="https://example.com/zh/page" />

  <!-- Robot Directives -->
  <meta name="robots" content="index, follow" />
  <meta name="googlebot" content="index, follow" />
</head>

Open Graph and Twitter Cards

<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Site Name" />

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@username" />

Structured Data

<!-- JSON-LD Article -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name",
    "url": "https://example.com/author"
  },
  "datePublished": "2025-01-28",
  "dateModified": "2025-01-28",
  "image": "https://example.com/image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "Article description"
}
</script>

<!-- Product Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "image": "https://example.com/product.jpg",
  "description": "Product description",
  "brand": {
    "@type": "Brand",
    "name": "Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "price": "99.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "100"
  }
}
</script>

<!-- FAQ Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Question 1?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Answer 1"
      }
    },
    {
      "@type": "Question",
      "name": "Question 2?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Answer 2"
      }
    }
  ]
}
</script>

Site Architecture

URL Structure

URL Best Practices:
┌─────────────────────────────────────────────────────┐
│                                                     │
│   Good URLs                                         │
│   ├── https://example.com/blog/seo-guide           │
│   ├── Short, descriptive                           │
│   ├── Use hyphens to separate                      │
│   └── Include keywords                             │
│                                                     │
│   Avoid                                             │
│   ├── https://example.com/p?id=123                 │
│   ├── Too long or complex                          │
│   ├── Underscores or special characters            │
│   └── Meaningless parameters                       │
│                                                     │
└─────────────────────────────────────────────────────┘

Sitemap

<!-- sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2025-01-28</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog</loc>
    <lastmod>2025-01-28</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

robots.txt

# robots.txt
User-agent: *
Allow: /

# Disallowed paths
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# Sitemap location
Sitemap: https://example.com/sitemap.xml

Page Performance

Core Web Vitals

// Monitor Core Web Vitals
import { getCLS, getFID, getLCP, getINP } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
  });

  navigator.sendBeacon('/analytics', body);
}

getCLS(sendToAnalytics);
getLCP(sendToAnalytics);
getINP(sendToAnalytics);

Image Optimization

<!-- Responsive images -->
<picture>
  <source
    srcset="/image-800.webp 800w, /image-1200.webp 1200w"
    type="image/webp"
  />
  <img
    src="/image-800.jpg"
    alt="Descriptive alt text"
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  />
</picture>

<!-- Next.js Image -->
<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  priority={isAboveFold}
/>

Preload Critical Resources

<!-- Preload fonts -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

<!-- Preconnect third-party -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://www.google-analytics.com" />

<!-- Preload LCP image -->
<link rel="preload" href="/hero.webp" as="image" />

Content Optimization

Heading Structure

<!-- Correct heading hierarchy -->
<h1>Main Title - Primary Keyword</h1>
  <h2>Section Title - Secondary Keyword</h2>
    <h3>Subsection - Long-tail Keyword</h3>
    <h3>Subsection</h3>
  <h2>Section Title</h2>

<!-- Only one H1 per page -->

Internal Linking

<!-- Descriptive anchor text -->
<a href="/seo-guide">Complete SEO Optimization Guide</a>

<!-- Avoid -->
<a href="/seo-guide">Click here</a>

Image SEO

<img
  src="/seo-optimization.jpg"
  alt="SEO optimization flowchart showing complete steps from keyword research to content publishing"
  title="SEO Optimization Process"
/>

<!-- Use descriptive filenames -->
<!-- Good: seo-optimization-guide.jpg -->
<!-- Bad: IMG_1234.jpg -->

Next.js SEO Implementation

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: 'Site Name',
    template: '%s | Site Name',
  },
  description: 'Site description',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@username',
  },
  robots: {
    index: true,
    follow: true,
  },
};

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.image],
      type: 'article',
      publishedTime: post.date,
    },
  };
}

// Generate static sitemap
// app/sitemap.ts
export default async function sitemap() {
  const posts = await getAllPosts();

  return [
    { url: 'https://example.com', lastModified: new Date() },
    ...posts.map((post) => ({
      url: `https://example.com/blog/${post.slug}`,
      lastModified: post.updatedAt,
    })),
  ];
}

International SEO

<!-- hreflang tags -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en/page" />
<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Best Practices Summary

SEO Optimization Checklist:
┌─────────────────────────────────────────────────────┐
│   Technical SEO                                     │
│   ├── Proper Meta tags                             │
│   ├── Structured data                              │
│   ├── XML Sitemap                                  │
│   ├── robots.txt                                   │
│   └── Canonical URLs                               │
│                                                     │
│   Page Performance                                  │
│   ├── Core Web Vitals                              │
│   ├── Image optimization                           │
│   ├── Resource preloading                          │
│   └── Mobile-first                                 │
│                                                     │
│   Content Optimization                              │
│   ├── Keyword research                             │
│   ├── Heading hierarchy                            │
│   ├── Internal linking                             │
│   └── Original content                             │
│                                                     │
│   Monitoring                                        │
│   ├── Search Console                               │
│   ├── Rank tracking                                │
│   └── User behavior analytics                      │
└─────────────────────────────────────────────────────┘

Scenario	Recommended Tool
Keyword Research	Ahrefs, SEMrush
Technical Audit	Lighthouse, Screaming Frog
Rank Monitoring	Search Console
Performance	PageSpeed Insights

SEO is a marathon, not a sprint. Optimize continuously, wait patiently for results.