由於站點映射和 seo，我應該從 react.js 將 swich 更改為 next.js

Question

我已經創建了我的 react js 應用程序並完成了它並托管了它，但是我的 seo 失敗了，因為我的頁面沒有被抓取並在谷歌中顯示

next.js 會解決我的 google bot 無法抓取我的網站的問題嗎

我的網站就像 stackoverflow 一樣問答，所以每當我發布問題時，都會生成一個新的 url

下個js會解決這個問題嗎

這就是我在我的反應應用程序中閱讀網址的方式

<Link to={{pathname: `query/${itm._id}`,query: { id: itm._id },}} >
                <Alert className="question">
                  <h6>{itm.Name}</h6>
                </Alert>
</Link> 

我在我的項目中也使用過 react-helmet

 <Helmet>
                  <meta charSet="utf-8" />
                  <title> wixten - {itm.Name} </title>
                  <meta name="description" content={itm.Name} />
                  <meta property="og:type" content="article" />
                  <link rel="canonical" href={itm.Name} />
                </Helmet>

https://wixten.com/

Answer 1

Next.js 絕對可以解決您的問題。

查看 Next.js 文檔中的數據獲取頁面。 它很好地解釋了服務器端生成（SSG）和服務器端渲染（SSR）的概念。 任何一個都應該大大提高您的 SEO 分數。 我在我的應用程序中進行了類似的重構，使用 SSG 方法從 a.js 文件呈現 static 數據，我對 Google 流量的結果非常滿意。 （如果您願意，請查看 - ilmihal oku）

Answer 2

要了解非 js 感知 web 爬蟲將在您的站點中看到的內容，請禁用瀏覽器選項卡的 Javascript。

當您使用客戶端呈現的 React 應用程序時，它是空的。 這意味着HTML由附加到index.html的Javascript生成。 由於您禁用Javascript ，因此不會向DOM添加任何內容。

如果你真的檢查 index.html 文件，它除了以root為id () 的div之外什么都沒有。

<div id="root"></div>

解決方案

1. 谷歌機器人也會抓取 Javascript 。 您可以保持客戶端呈現的應用程序原樣並依賴這種類型的抓取。 但是，您仍然需要為您的站點提交一個sitemap.xml 。

2. 創建一個簡單的快速服務器，當 HTML 骨架第一次到達服務器時呈現它。 基本上，您可以通過訪問build文件夾中的index.html並調用ReactDOMServer.renderToString(<YourReactAppRootComponent>)並將HTML發送到瀏覽器來完成。 現在，即使您在瀏覽器選項卡中禁用了 JS，您（或 web 爬蟲）也會看到一些內容。 檢查這篇文章

3. 您可以使用遷移到像next.js或Gatasby這樣的 React 框架來為您執行 SSR。