[React Note] — 前端 SEO 兩分鐘就上手

Introduction & 前言

前端框架使用 SEO(Search Engine Optimization) 一直都被廣為討論著。如何快速透過套件讓每一個元件都能直接塞入想塞的 Meta 甚至是更改 Title 呢？

今天就要來使用前端 SEO 套件讓你兩分鐘就成為 SEO 初階入門者。

Summary & 摘要

這篇文章只是快速使用套件去加上 Meta，被不會談到太多太深的優化 SEO 爬蟲技能。

如何加入 Meta

爬蟲關鍵就是讓你的 HTML 加上 Meta，什麼事 Meta 呢？HTML Meta 是拿來存放一些該網站的資訊，例如：網頁作者、網頁發布時間、網頁關鍵字…等等。而 Google 的爬蟲就是會從你 HTML Meta 的 <meta name="description" content="這裡是網頁的簡短描述"> 去爬。

通常我們除了可以直接把 Meta 寫死在 /public/index.html 之外(如下圖)，也可以參考使用套件方式帶入 Meta。

前人種樹

關於 SEO 的套件滿多的，查詢下來最常出現的套件為 React Helmet 及 react-meta-tags ，這邊我們使用前者來達到快速且可以不同組建帶入不同 Meta 的方式。

安裝套件

首先先到專案目錄底下安裝套件

$yarn add react-helmet

// 或

$npm install --save react-helmet

使用套件

使用方式滿簡單的，只要在你想引入的 Component 引入，然後打上你會在 Head 上面加上的資訊即可

// App.js
import { Helmet } from 'react-helmet';

import logo from './logo.svg';
import './App.css';
import SEO from './components/SEO';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Helmet>
			    <meta charSet="utf-8" />
			    <title>{網頁標題}</title>
			    <meta name="description" content='來點給爬蟲的描述' />
					<link rel="canonical" href='http://google.com/' />
			  </Helmet>
      </header>
    </div>
  );
}

包成元件

單純一個地方使用很容易，但當我們多個地方需要使用的時候就很麻煩，這時候我們可以將這個套件包成 Component，然後需要引入的地方就直接 import 即可。

// /components/SEO.js
import { Helmet } from 'react-helmet';

const SEO = ({
  title = "測試標題",
  description = "測試content",
  url,
  children
}) => (
  <Helmet>
    <meta charSet="utf-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
    {children}
    {
      url ? (
        <link rel="canonical" href={url} />
      ) : ""
    }
  </Helmet>
)

最後將原本的 App.js 修改一下

// App.js
import logo from './logo.svg';
import './App.css';
import SEO from './components/SEO';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <SEO title='爬蟲快來爬我' description='爬蟲給你點content' url='http://test.google.com/'>
          <meta name="description" content='測試 content 1' />
          <meta name="description" content='測試 content 2' />
          <meta name="description" content='測試 content 3' />
        </SEO>
      </header>
    </div>
  );
}

查看成果

最後開啟網頁的 F12，看一下 HTML Meta 是否上去了

陷阱與坑

只要是套件或多或少都會有自己需要注意的事項，關於這個 React Helmet 需要注意的地方是不能將 React Children Component 包裝在 <Helmet></Helmet> 裡面，例如：

// App.js
import { Helmet } from 'react-helmet';

const MyTitle = (title) => <title>{title}</title>;

function App() {
	return (
		<Helmet>
			<MyTitle title='網頁標題隨意帶入' />
		</Helmet>
	)
}

這種寫法會得到錯誤訊息 “You may be attempting to nest Helmet components within each other, which is not allowed. Refer to our API for more information.”。

上面這種寫法是不行的，<Helmet></Helmet> 裡面只能包裝 HTML Tag，像我們上面包成 Component 那種寫法在帶入 HTML Tag 是可行的！

可以傳入的 Tag Name 請參考此處
關於該套件 Tag Name 檢查的 Source Code

範例

這邊附上範例程式碼及 Source Code：

Demo
Source Code

Conclusion & 結論

其實前端如果有考慮做到 SEO 最好的方式還是 SSR(Server Side Render)，但如果是 SPA(Single Page Application) 其實也不需要太擔心，現在基本上靠套件去實行就可以了，且 Google 的爬蟲也一直在升級中。

其實這個套件應該算是 React HTML 的 Head 管理套件，但現在的文章十有八九都是用這個套件，如果上述文章有任何錯誤，還歡迎各路高手在下面留言指出，感激不盡。

RexHung's Blog