CSS 在两个 SEO 友好的网页之间转换

Question

我的目标：

假设我有两个网页 page1 和 page2。现在，如果用户从 page1 到 page2 或从 page2 到 page1。此外，我希望搜索引擎可以找到这两个页面。

我的问题/我尝试过的：

实际上只使用一页 page.html 和散列：page.html#page1 和 page.html#page2。例如，通过侦听 hashchange 事件，可以轻松完成转换。
使用参数：page.html?content=page1 和 page.html?content=page2。 preventDefault 方法或 history.pushState.
可以避免完全重新加载页面

据我所知，在第一个解决方案中，搜索引擎不会将我的页面显示为单独的 links。此外，这两种解决方案都存在以下主要问题：如果有人只是将 page.html 写入浏览器的地址字段，或者更糟糕的是，page.html 在搜索结果中显示为 link 会怎样？我真的很希望 page.html 根本不存在，但考虑到上述解决方案，这似乎是不可能的。

所以，到目前为止，我能想到的最佳解决方案是实际上有两个页面 page1.html 和 page2.html 具有完全相同的内容（即，两个页面的内容合并).例如。在 page1.html 中 page2 的内容将有属性 display: none。现在，当用户从 page1 导航到 page2 时，我使用 history.pushState 来设置新的 URL。虽然我认为这在原则上应该可行，但我担心有两个相同的页面或使用 display: none 隐藏大量页面，因为两者都应该对 SEO 不利。

非常欢迎任何至少能解决我的部分问题的答案！也许有一种方法至少可以防止搜索引擎在我的第二个解决方案中找到 page.html？或者也许有一个我完全不知道的解决方案？

Answer 1

您的 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 所做的。

CSS 在两个 SEO 友好的网页之间转换

CSS transition between two SEO-friendly webpages

html

javascript

css

seo

我的目标：

我的问题/我尝试过的：