SEO

Practice on React SPA

Single Page Application

Empty HTML

w/ route (/articles/123)

Whatever path accessed, always response empty HTML. After page loaded, browser will run JS to render page items.

SEO vs Social

Social Network

Open Graph

Title/Desc/Cover Image

1200x630px

Social Network

Open Graph

Cached
SPA (Client Render)

facebookexternalhit|line-poker|TelegramBot|TwitterBot|Slackbot

SEO

Google Page Rank®

SEO

Sitemap

SEO

Robots.txt

SEO

Google Search Console

SEO

Old crawled pages

Legacy URL: https://wealth.com.tw/home/articles?tag=晶圓

301 Redirect

New URL: https://wealth.com.tw/search-articles/晶圓

Prevent 404 for legacy link, but do not redirect to index page only, it will reduce the page rank.

SEO

Use hyphen/underscore to separate words

https://wealth.com.tw/latestArticles/famousCategories

https://wealth.com.tw/latest-articles/famous-categories

URL is case-insentive, many website/software will auto lower-cases.

Good words separation help crawler to know your content.

Bad

Good

SEO

Core web vitals

LCP: Largest Contentfal Paint

FID: First Input Delay

CLS: Cumulative Layout Shift

https://insights.rytass.com/core-web-vitals-lcp-fid-cls-提升網站使用者體驗你要懂的事-90047f674024

SEO

Semantic HTML

Bad

Good

<div>
  <div class="header">
    <p>Title</p>
  </div>
  <div>
    <span>Content</span>
    <p>Next Line</p>
  </div>
</div>

<article>
  <header>
    <h1>Title</h1>
  </header>
  <main>
    <p>Content</p>
    <p>Next Line</p>
  </main>
</article>

SEO

Breadcrumbs

Add more in-site link tell the crawler correct user flow