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
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
React SPA SEO Practice
By Chia Yu Pai
