使用AJAX的單頁動態網站的設計和SEO

Question

我設計了一個網站，整個網站都包含在一個頁面內（index.php）。 在頁面內， <section>標簽定義了網站的不同部分（家庭，聯系人，博客等）

通過始終可見的按鈕實現導航，單擊時使用javascript更改部分的可見性，以便任何時候只顯示一個。

更具體地說，這是通過使用url中的哈希並處理hashchange事件來完成的。 這會產生諸如www.site.com/#home（默認情況下，如果沒有其他哈希）和www.site.com/#contact等網址。

我想知道這是不是一個好的設計。 它有效，但我覺得必須有一個更好的方法來實現同樣的事情？ 為了澄清，我的目標是一次加載所有主要內容的網站，以便在初始加載后沒有更多的頁面加載，並且在各個部分之間移動會更加平滑。

除此之外，還引入了另一個關於SEO的問題。 該網站顯示在谷歌中，但是，例如，如果搜索查詢在特定部分中包含一個術語，它仍會在單擊時加載默認的#home頁面，而不是該術語的特定部分。我該如何解決這個問題？

最后，其中一個部分是博客部分，它是唯一一次不加載所有部分的部分，因為默認情況下它會從數據庫加載最新的帖子。 當用戶從列表中選擇不同的帖子（其本身是使用AJAX加載）時，AJAX用於獲取和顯示新帖子，pushState更改歷史記錄。 同樣，為了給每個帖子提供一個可以在外部引用的唯一網址，菜單會更改由javascript處理的網址，從而生成網址，例如www.site.com/?blogPost=2#blog和www.site.com/?blogPost=1#blog 。

谷歌根本看不到這些帖子。 使用Googlebot工具顯示抓取工具將博客部分視為始終為空，因此沒有任何博客帖子被編入索引。

我能改變什么？

（我不知道這是不是應該在網站管理員堆棧交換上，如果它在錯誤的地方就很抱歉）

Answer 1

建立一個普通的網站。 為每個頁面提供一個普通的URL。 讓Google為這些網址編制索引。 如果您沒有Google要編制索引的頁面，則無法將您的內容編入索引。

使用JS / Ajax逐步增強站點。

當遵循鏈接（或執行其他操作，沒有JS，將加載新頁面）時，使用JavaScript將當前頁面轉換為目標頁面。

如果您不使用JavaScript，請使用pushState將URL更改為已加載的URL。 （這樣做而不是使用片段標識符（ # ）hack）。

確保您收聽歷史事件，以便在單擊后退按鈕時可以將頁面轉換回來。

這會導致以下情況：

1. 用戶從Google到達/foo
2. /foo包含/foo頁面的所有內容
3. 用戶點擊鏈接到/bar
4. JavaScript更改頁面內容以匹配用戶從/bar直接進入的內容，並使用pushState將URL設置為/bar

---

請注意，還有（ 不推薦 ）hashbang技術將單頁網站破解為Google可以編制索引的形式，但這種技術不健全，不適用於任何其他非JS客戶端，並且幾乎同樣多的工作做得好。