Next.js 是用於構建伺服器呈現的 React 應用程序的流行框架。Next.js 的關鍵特性之一是它能夠根據在運行時獲取的數據動態呈現頁面。這意味著頁面的數據不依賴於要載入的組件。由於呈現空內容，載入頁面的額外時間可能會影響 SEO。
首先，我們需要讓我們的應用程序了解這些動態路由，以便網路瀏覽器和搜索引擎機器人可以看到我們的 SEO 數據。
我們將使用該函數getStaticPaths生成我們的動態 url。
export const getStaticPaths = async () => { const url = 'https://api-url/posts' const res = await fetch(url); // raw response const posts = await res.json(); // turns it into readable data // maps through all the posts and return the string of our endpoint using the route param (post.slug) return { paths:posts.map((post) => `/blog/${post.slug}`) || [], fallback:false };}
當您使用 Screaming Frog 或 Ahrefs 等工具進行 SEO 掃描時，您將能夠在運行構建時將這些鏈接視為可索引的鏈接。您還可以使用您的 robots.txt 文件來確定 SERP 可以看到哪些鏈接。
這是我目前的 SEO 分數。
我有一些警告，但總的來說我的鏈接是可讀和可索引的，包括我的伺服器端呈現的頁面。
呈現動態頁面內容
要在 Next.js 中呈現動態頁面，您需要使用名為 getStaticProps. 這將允許您獲取數據，然後將其作為 props 傳遞給您的 React 組件。
下面是一個示例，說明如何使用 getStaticProps API 從 API 獲取博客文章並將其傳遞給頁面組件：
// Single Post (pages/blog/[id].js)import { getStaticProps } from 'next';const Post = ({ post }) => { const router = useRouter(); // Technical SEO Tags const HTMLHead = ({ title, description, robots, type, locale, pageURL, site_name, canonicalLink }) => { return ( <Head> <title>{title}</title> <meta name='description' content={description} /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='robots' content={robots} /> <meta property='og:title' content={title} /> <meta property='og:locale' content={locale ? locale : 'en-US'} /> <meta property='og:type' content={type} /> <meta property='og:description' content={description}/> <meta property='og:url' content={pageURL} /> <meta property='og:site_name' content={site_name} /> <meta name='twitter:description' content={description} /> <meta name='twitter:title' content={title} /> <link rel='canonical' href={canonicalLink} /> </Head> ); } // Error handling if (!router.isFallback && !post[0]?.slug) { return <ErrorPage statusCode={404} /> } return ( <> <HTMLHead title={post[0].title.rendered} description={post[0].excerpt?.rendered.replace(/<[^>]+>/g, '')} pageURL={`https://www.domain.co/blog/${post[0].slug}`} canonicalLink={`https://www.domain.co/blog/${post[0].slug}`} ... /> <Container className='blog-post-container' maxWidth='md'> <Box mt={15}> <article> <Typography variant='h1'>{post[0].title.rendered}</Typography> <div dangerouslySetInnerHTML={{ __html: post[0] && post[0].content.rendered }} /> </article> </Box> </Container> </> )}export const getStaticProps = async ({ params }) => { const { id } = params; // what will be used to fetch the content (single post) const url = `${your_api_url}posts?slug=${id}`; const post_raw = await fetch(url) const post = await post_raw.json() return { props: { params, post, id, }, };}export default Post;
確保參數 id 或 slug 與 中使用的 id 的名稱相匹配 url。該 ID 將在獲取您的帖子的路線中使用。
例如，如果您正在使用 [slug].js ，請確保您的 URL 看起來像這樣。
const { slug } = params;... return { props: { params, post, slug, }, };
搜索引擎優化負責人
HTML 中的 <head> 元素是元數據（有關文檔的信息，例如其標題、樣式錶鏈接、腳本和其他資源）的容器。
該 <head> 元素很重要，因為它提供了與頁面內容沒有直接關係的文檔信息，但對於瀏覽器和搜索引擎正確解釋和顯示頁面來說仍然是必需的。
可以包含在元素中的一些常見元素 <head> 是：
<title>: 該元素指定文檔的標題，顯示在瀏覽器的標題欄或選項卡中，被搜索引擎用作搜索結果頁面的標題。<meta>：此元素用於提供有關文檔的元數據，例如描述、關鍵字、字符集和其他信息。<link>：此元素用於鏈接到外部資源，例如樣式表和字體。<script>：此元素用於在文檔中包含腳本，例如 JavaScript。
通過在元素中包含必要的元數據 <head> ，您可以確保瀏覽器和搜索引擎正確解釋和顯示您的 Nextjs 應用程序。因此，它是包含在 Nextjs 應用程序內部頁面中的一個重要元素。
這是 <HTMLHead/> 我創建的用於處理我的技術 SEO 的自定義組件。
const HTMLHead = ({ title, description, robots, type, locale, pageURL, site_name, canonicalLink }) => { return ( <Head> <title>{title}</title> <meta name='description' content={description} /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='robots' content={robots} /> <meta property='og:title' content={title} /> <meta property='og:locale' content={locale ? locale : 'en-US'} /> <meta property='og:type' content={type} /> <meta property='og:description' content={description}/> <meta property='og:url' content={pageURL} /> <meta property='og:site_name' content={site_name} /> <meta name='twitter:description' content={description} /> <meta name='twitter:title' content={title} /> <link rel='canonical' href={canonicalLink} /> </Head> ); }
標題
這就是將呈現為您的標題的內容。這將是用戶在訪問您的網站之前首先看到的
描述
標題下方是描述，其中包含對您網站的簡要描述。
視口
viewport 標籤是我用來確保內容以正確的縮放比例正確適合移動和桌面屏幕的標籤。
OG（開放圖譜）標籤
OG 標籤，也稱為 Open Graph 標籤，是用於指定網頁信息的 HTML 元標籤。
規範網址
當多個頁面具有相似或相同的內容時，規範 URL 用於指定網頁的首選版本。它們有助於防止重複內容問題，並確保搜索引擎能夠正確抓取您的網站並為其編製索引。
當網頁有多個指向相同或相似內容的 URL 時，搜索引擎可能會將這些 URL 視為重複內容，並且可能不知道在搜索結果中包含哪個 URL。這可能會導致網頁受到懲罰或在搜索結果中排名不高。
通過為網頁指定規範 URL，您可以告訴搜索引擎哪個 URL 是頁面的首選版本，應該包含在搜索結果中。這有助於確保正確的頁面顯示在搜索結果中，並可以提高頁面的搜索排名。
關鍵字（可選）
關鍵字標籤，也稱為元關鍵字，曾經是指定網頁相關的關鍵字或短語的常用方法。然而，它們不再被搜索引擎用作排名因素並且對 SEO 幾乎沒有影響。
然而，搜索引擎很快發現網路開發人員在他們的元關鍵字標籤中包含不相關或垃圾關鍵字，試圖操縱他們的搜索排名。結果，搜索引擎停止使用元關鍵字標籤作為排名因素，現在在確定網頁的相關性時不考慮它。
事實上，Google 的 John Mueller 曾表示「元關鍵字標籤的使用是我們根本不會考慮的事情」。
因此，關鍵字標籤對於 2023 年或任何其他年份的 SEO 都不重要。相反，更重要的是專註於創建高質量、相關的內容並使用其他 SEO 技術，例如優化標題和描述標籤以及為圖像使用標題標籤和 alt 標籤。
最後的想法
在 Next.js 應用程序中使用 SEO 有幾個好處：
- 提高可見性：通過針對搜索引擎優化 Nextjs 應用程序，您可以提高其在搜索結果中的可見性，從而帶來更多流量和銷售額。
- 更好的用戶體驗：SEO 可以幫助用戶更輕鬆地查找和瀏覽網站，從而改善應用程序的用戶體驗。這可以帶來更高的參與度和轉化率。
- 更高的可信度：經過良好優化的網站可以建立用戶的可信度和信任度，從而增加銷售額和收入。
- 競爭優勢：通過針對 SEO 優化您的 Nextjs 應用程序，您可以獲得優於其他未優化網站的競爭優勢。
- 長期結果：與付費廣告可以在您停止付費後立即停止不同，SEO 的好處可以在長期內繼續得到回報。