我的目標：
假設我有兩個網頁page1和page2. 現在，如果用戶分別從to或 from to導航，我想要一個影片（使用 css 轉換）來轉換page1成page2或page2成。此外，我希望搜索引擎可以找到這兩個頁面。page1page1page2page2page1
我的問題/我嘗試過的：
page.html實際上只使用帶有哈希的一頁：page.html#page1和page.html#page2. 例如，通過監聽hashchange事件，可以輕松完成轉換。使用引數：
page.html?content=page1和page.html?content=page2。可以通過preventDefault或 方法避免頁面的完全重新加載history.pushState。
據我所知，在第一個解決方案中，搜索引擎不會將我的頁面顯示為單獨的鏈接。此外，這兩種解決方案都存在以下主要問題：如果有人只是page.html在瀏覽器的地址欄位中寫入內容，或者——更糟糕的是——page.html在搜索結果中顯示為鏈接，會發生什么情況？我真的希望它page.html根本不存在，但鑒于上述解決方案，這似乎是不可能的。
所以，到目前為止我能想到的最好的解決方案是實際上有兩個頁面page1.html，并且page2.html它們的內容完全相同（即兩個頁面的內容相結合）。例如在page1.html內容中page2會有屬性display: none。現在，當用戶從 導航page1到 時page2，我history.pushState用來設定新的 URL。雖然我相信這原則上應該可行，但我擔心擁有兩個相同的頁面或隱藏大量頁面，display: none因為兩者都應該對 SEO 不利。
非常歡迎任何至少解決我部分問題的答案！也許有一種方法至少可以防止搜索引擎page.html在我的第二個解決方案中找到？或者也許有一個我完全不知道的解決方案？
uj5u.com熱心網友回復：
你的history.pushState方法很好。一旦用戶訪問頁面a，使用 JavaScript 預加載頁面b，您就可以通過這種方式應用 CSS 過渡。您可以執行以下操作：
(async () => {
const page2 = await fetch("/page2.html");
const text = page2.text();
// dummy event listener and selector
document.querySelector('a[href="/page2.html"]').addEventListener("click", e => {
e.preventDefault();
// apply CSS transitions by adding classes or whatever
document.documentElement.innerHTML = text;
history.pushState(null, null, "/page2.html");
});
})();
這樣您就不必更改任何 HTML 或 CSS，也不會影響 SEO。這也可以通過減少其他頁面的加載時間來改善您的用戶體驗，就像 React Router 或 NextJS 所做的那樣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436802.html
標籤：javascript html css 搜索引擎优化