Boost Your Site’s Traffic: A Front‑End Engineer’s Step‑by‑Step SEO Playbook

Preface

For front‑end developers, SEO is a recurring topic, especially for those running blogs, online stores, or personal sites, because search engines handle billions of queries daily and are a major source of natural traffic.

This article shares the SEO construction process for the Xigua hotspot detail page, focusing on practical methods rather than deep theory.

Basic Concepts

SEO (Search Engine Optimization)

means obtaining traffic from natural search results. It involves adjusting a website based on the ranking mechanisms of search engines to improve keyword rankings and achieve traffic, sales, and brand goals.

How Search Engines Work

Search engines operate in three stages:

Crawling and Fetching – Spiders follow links, read HTML, and store pages.

Pre‑processing – Text extraction, Chinese tokenization, indexing, and building inverted indexes.

Ranking – When a user queries, the ranking engine calculates relevance using the index and returns a results page.

How to Build SEO

The SEO ecosystem includes three roles—website, search engine, and users—and six core steps. Optimization focuses on these steps.

Crawl & Index

We should not launch massive traffic before the site structure is optimized and keyword research is done.

Website optimization consists of structural adjustments and page‑level improvements.

Site Structure Optimization

Avoid Spider Traps

Flash

Various redirects

JS links

Login requirements

Set robots.txt

Robots file for Xigua M‑site

The robots.txt file tells spiders which parts of the site to crawl or avoid. Even an empty file should be present to avoid misinterpretation.

URL Design

When designing URLs, follow these principles:

Keep them short

Avoid many parameters

Minimize directory depth

Include English keywords

Use lowercase

Separate words with hyphens

Use HTTPS

<code>西瓜热点H5详情页之前的URL：
https://h5.ixigua.com/xigua_hot_spot/detail/?hotspotId=7095918215196318727

现在的URL：
https://m.ixigua.com/xigua_hot_spot/detail/7095918215196318727
更换域名 & URL静态化
</code>

We replaced the domain and static‑ized the URL.

Domain Change : Moving to the M‑site domain improves authority and ranking.

URL Staticization : Reducing parameters enhances user experience and crawlability.

URL Canonicalization

Canonicalization selects the preferred URL to avoid duplicate content.

Set preferred domain in Baidu Webmaster

Use 301 redirects to the canonical URL

Add

canonical

link tags

<code>在HTML文件的head中加上这样一段代码：
<link rel="canonical" href="https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356">
表示这个网页的规范会网址应该是:https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356
</code>

Page Optimization

Effective TDK

TDK includes Title, Description, and Keywords. Before setting them, conduct competition analysis and keyword research.

Ensure target keywords have search volume

Reduce optimization difficulty

Find effective traffic

Increase search diversity

Discover new opportunities

Title format: keyword – sub‑keyword | brand , 50‑60 characters.

Description length: 155‑160 characters, include keywords and compelling copy.

Keywords should be 5‑10 core terms, separated by commas, ordered by search volume.

The Xigua hotspot detail page is a static CSR site, making TDK customization difficult, so we use a template engine.

Inject expressions : Place placeholders like {{title}} in the HTML template.

Change suffix : Rename the compiled HTML file to a template extension (e.g., index.handlebars).

Node service : In the router, fetch hotspot data, render the template with variables, and return the file.

Proper HTML Usage

<a>

tags must have href and avoid JS redirects.

<img>

tags need alt attributes.

Only one

<h1>

per page; use

<h2>

,

<h3>

,

<h4>

appropriately.

Performance Optimization

Page speed is a ranking factor and affects crawler efficiency.

Reduce page load time

Fast first‑paint improves ranking on Baidu (Lightning algorithm) and Google (Core Web Vitals).

Keep page size under 125 KB

Search engines limit source size (Baidu 128 KB, Bing 125 KB); excess content may be truncated.

Web Submission

Sitemap

Sitemaps help users and crawlers discover site structure. Two types:

HTML sitemap

XML sitemap

API Push

Overview

Search engines (Baidu, Google, Bing) support direct URL submission via API, offering fast and high‑weight indexing.

Compared to sitemaps, API pushes are quicker and signal higher quality.

Scheduled Push

Hotspot events are time‑sensitive; a timer triggers periodic API pushes to ensure rapid crawling.

Proactive Bot

We built a “Xigua Hotspot SEO Bot” using Feishu enterprise bot to let operators push new hotspots to search engines instantly.

Internal/External Links

Internal links connect pages within the same site, improving crawlability, weight distribution, and ranking.

External links bring traffic from other sites and can boost keyword rankings when high‑quality.

Ranking & Clicks

Structured Data

Structured data (JSON‑LD) helps search engines understand page content and enables rich results.

<code>&lt;script type="application/ld+json"&gt;
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "description": "...",
  "duration": "PT4560S",
  "embedUrl": "https://www.youtube.com/embed/QO25QnboJG0",
  "interactionCount": "7714441",
  "name": "...",
  "thumbnailUrl": ["https://i.ytimg.com/vi/QO25QnboJG0/maxresdefault.jpg"],
  "uploadDate": "2019-06-02",
  "genre": "People & Blogs",
  "author": "名侦探拳头"
}
&lt;/script&gt;
</code>

In Baidu, similar image‑text formats appear; images must be relevant, clear, and meet size requirements.

Linking Baidu Hot Searches

By aligning hotspot titles with Baidu hot‑search keywords, pages can achieve higher rankings.

Data Monitoring

Crawler Behavior Monitoring

Collect crawler logs to detect SEO impact before traffic changes.

Index Volume Monitoring

Use webmaster platforms to view index changes.

Query with

site:m.ixigua.com

or

inurl:/xigua_hot_spot site:m.ixigua.com

for detailed stats.

Tools like SEMrush provide index, inbound, and outbound link data.

Ranking Monitoring

Baidu Webmaster: https://ziyuan.baidu.com/keywords/index

Google Search Console: https://search.google.com/search-console

Scripts can also collect ranking positions for specific keywords.

Conclusion

SEO is both systematic and mysterious; experience and A/B testing are essential. While this article shares practical insights from the Xigua hotspot project, SEO extends beyond the web to apps, and mastering it remains a long‑term challenge.