使用 sessionStorage 显示/隐藏“启动页面”的主页内容是不是很糟糕？

问题描述

我们的老板最近要求我们的开发团队为我们网站的主页构建他所谓的“启动页面”。不是旧的独立的重定向启动页面。相反，主页访问者一开始只会看到一条带有两个按钮的硬推销、号召性用语“闪屏”消息：mailto 链接和“进入站点”按钮。如果点击“进入站点”按钮，则硬销售信息消失，“常规”主页内容显示。

团队成员设计的解决方案是拥有一个 #hardsell div 和一个 #main 内容 div（包括网站标题和导航）。两个 div 都使用内联 CSS 设置了 display:none。

使用 sessionStorage 切换两个 div 之间的可见性。这避免了必须设置 cookie。

function splashCheck() {
    var readValue = sessionStorage['myvariable'];
    if (readValue === "splash") {
        $("#main").css( "display","block" );
    } else {
        $("#hardsell").css( "display","block" );
            var myVariable = "splash";
            sessionStorage['myvariable'] = myVariable;
        }
}
splashCheck()

这非常简单，但我担心两件事：

1. 在 display: none 和 #main div 上有 #hardsell 意味着在 splashCheck() 函数触发之前没有可见的内容。如果 javascript 被禁用，你什么也看不到。

2. SEO：Google 漫游器和其他抓取工具会在此页面上看到什么？没有什么？ （糟糕！）只有 #hardsell 内容？ （也很糟糕！）#main 内容？ （首选！）两套内容？ （可以接受！）

对于在这种情况下 Google 将进行哪些抓取以及不进行哪些抓取，我无法找到明确的答案。据说 Google 漫游器会抓取隐藏内容，例如手风琴，但 Google 文档还表示漫游器“可能存在”动态隐藏部分的问题。

我的担忧毫无根据吗？有没有办法通过 sessionStorage 做到这一点，让 Google 抓取 #main 内容，同时在初次访问时仅向访问者显示 #hardsell？

解决方法

对我的拙劣问题的回答是“如果利用 JavaScript 检测还不错”。正如@EmielZuurbier 在对最初问题的评论中所建议的：

出于兼容性考虑，您可以检查是否启用了 JavaScript，然后使用启动画面。如果 JS 被禁用，则使其可以在没有启动画面的情况下使用。这样每个人都可以使用该网站。

,

您的问题可以表述为：“javascript 内容如何影响 SEO”。 使用 SPA 时经常会问同样的问题，例如 react 或 angular

正如@Emiel Zuurbier 评论的那样，“禁用您的 CSS 和 JavaScript，并刷新页面。这就是 Google 将看到的。”。不是 100% 正确，您真的认为 googles 爬虫无法读取 javascript 内容吗？我们会说，js 内容让爬虫很难读取内容。

回答您的问题：

使用 sessionStorage 来显示/隐藏“启动页面”的主页内容是否对 SEO 不利？ 会话存储，没有。 Javascript 动态内容，是的。

我建议你阅读这篇文章

https://www.magnolia-cms.com/blog/spa-seo-mission-impossible.html#:~:text=SPAs%20are%20not%20inherently%20friendly,play%20nicely%20with%20Google's%20crawler。

根据 SEO 专家 Barry Adams 的说法，基于 React 的 SPA（和其他基于 JavaScript 的 SPA）不能很好地与 Google 的抓取工具配合使用。

,

TLDR;

一旦 HTML 被提供给网络爬虫（即使你是 用 CSS 隐藏某些部分）你应该没问题，并且会有你的 已编入索引的页面。

如果它将使用单页应用程序框架 (SPA) 构建，我建议您使用服务器端渲染 (SSR) 实现，而不是使用 NextJS 或 Nuxt，这将为网络爬虫提供实际的 HTML 内容可以索引。

最重要的是，一旦您以纯 HTML 格式提供内容，crawlable 就可以了。

有计划在 long run 中使 SPA 可索引，但在撰写本文时，最好坚持使用最有效的（包含元数据和 SEO 相关元数据的纯 HTML）或 SSR 实现。

SPA（网络爬虫没有 HTML 内容）

SSR（特别是 Next） - 网络爬虫的内容

Vanilla,HTML/CSS/JS - 网络爬虫的内容