SEO：頁面內 SEO | Next.js

從高層次來看，頁面內 SEO 指的是構成頁面整體結構的標題和連結。標題表示文件中的重要性，而連結則將網路連接在一起。

標題與 H1

標題幫助使用者理解頁面結構以及接下來段落將閱讀的內容。它們也協助搜尋引擎理解頁面中哪些部分最為重要。

標題分為 1-6 級，其中 Heading 1 通常被認為是最重要的。建議在每個頁面中使用 H1 標題標籤。H1 應代表頁面的主題，並與你的 title 標籤相似。

function Page() {
  return <h1>Your Main Page Heading</h1>;
}

內部連結

網際網路是由連結連接起來的。如果沒有從一個網站到另一個網站的連結，網際網路可能就不會存在。獲得更多連結的網站通常代表使用者更信任的網站。

Google 透過發明 PageRank 演算法開始了這一原則。

PageRank 演算法，從高層次來看，是一個會遍歷資料庫中每個連結並根據接收到的連結數量（數量）和來自哪些網域（質量）來評分的演算法。來自垃圾網站的許多連結很可能幾乎沒有價值。

然而，來自大型國家新聞網站的連結對搜尋引擎來說可能非常有價值。這就是為什麼連結很重要，你應該始終在頁面內部之間以及外部到其他網站都包含它們。連結必須使用 href 才能用於 PageRank 計算。

next/link

Next.js 提供了 Link 元件，可實現路由之間的客戶端轉換。一個簡單的使用案例看起來如下：

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

href 屬性是必需的，它會正確地將連結添加到錨點標籤，這對 SEO 至關重要。當 Google 爬取頁面時，它會爬取並跟隨此連結，而不依賴 JavaScript。

然而，如果 Link 的子項是包裹 a 標籤的自訂元件，你必須將 passHref 添加到 Link。如果你使用像 styled-components 這樣的函式庫，這一點是必要的。沒有這個，a 標籤將不會有 href 屬性，這會影響你網站的 SEO。

如何使用 passHref：

import Link from 'next/link';
import styled from 'styled-components';
 
// 這會創建一個包裹 <a> 標籤的自訂元件
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // 必須將 passHref 添加到 Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

如果你使用 ESLint，Next.js 有一個規則可以防止這種情況發生。

頁面內 SEO

標題與 H1

內部連結

next/link

延伸閱讀

On this page