Post by account_disabled on Dec 30, 2023 5:23:54 GMT
SSR：服务器端渲染，逻辑和内容都在服务器端管理，客户端只负责显示。 消息 增长新闻 - 法国第一届增长新闻 每周 3 篇文章和 1 个成长工具 箭 beber.arnault@wanadoo.fr 箭 SSR 方法的设置比较繁琐，但如果您有大量页面需要索引并且内 WhatsApp 号码数据 容更新频繁，那么这将是最佳解决方案。 对于这个特定案例，我继续采用客户方法，以保持 SPA 的优势，例如灵活性和缩短首字节时间 (TTFB)。知道我只有大约十页需要索引，Googlebot 将能够相当快地完成其工作。 让我们通过解释我对 VUEjs 应用程序所做的修改来接近本文的技术部分，以使其对 SEO 友好并支持 9 种语言。 主要的变化发生在路由器中，这里是代码。 使 VueJs 应用程序变得 SEO 友好且多语言的分步指南，重点关注 CSR 和 SSR。 步骤 1 – 从 URL 中删除哈希值 第一步是在路由器中设置历史记录模式，以便从 URL 中删除哈希值。有关此设置的更多详细信息，请查看官方文档。
第 2 步 – 为每种语言添加一条路线 然后，您必须为每种可用语言创建一条路线。我使用vue-i18n模块进行语言和消息管理。 在路由器中，我只需检查输入的 URL 是否对应于可用语言。否则我会重定向到根域。 这一步很关键，因为它允许我拥有 9 个不同的 URL：每种语言一个。 第 3 步 – 更新标题标签和元描述 更新标题标签和元描述 根据每种语言，必须更新标题和其他元数据。 这也可以从路由器通过从 i18n 函数检索消息、替换标题、描述和规范链接来完成。 第 4 步 – 不要忘记 Hreflang 标签 Hreflang 标签是指示页面在多种语言中的变体的关键。因此，Google 知道根据用户的语言在搜索引擎中显示哪个版本的页面。 在index.html 文件中为每种语言添加一个标签。 为每种语言添加了 hreflang 标签。 第 5 步 – 测试您的页面 为了确保一切正常并且 Google 将为您的页面及其内容建立索引，请运行移动优化测试并输入您应用程序的不同页面。 您将能够看到将在搜索引擎中索引的渲染版本。 Google 索引的移动优化测试。
第 6 步 – 要求 Google 再次抓取您的网址 转至 Google Search Console 请求对您的应用程序 URL 建立索引。 几分钟或几小时后，您的网页最终将出现在 Google 的搜索页面上。 请求在 Google Search Console 上重新建立索引。 要进一步了解，请查看 VUEjs 框架的官方文档，要了解服务器端渲染，请查看NuxtJS。 本文是 Thruu 创始人 Samuel Schmitt 的客座文章。要与 Samuel 取得联系，请访问他的 linkedin、他的 Twitter或直接访问他的网站。
第 2 步 – 为每种语言添加一条路线 然后，您必须为每种可用语言创建一条路线。我使用vue-i18n模块进行语言和消息管理。 在路由器中，我只需检查输入的 URL 是否对应于可用语言。否则我会重定向到根域。 这一步很关键，因为它允许我拥有 9 个不同的 URL：每种语言一个。 第 3 步 – 更新标题标签和元描述 更新标题标签和元描述 根据每种语言，必须更新标题和其他元数据。 这也可以从路由器通过从 i18n 函数检索消息、替换标题、描述和规范链接来完成。 第 4 步 – 不要忘记 Hreflang 标签 Hreflang 标签是指示页面在多种语言中的变体的关键。因此，Google 知道根据用户的语言在搜索引擎中显示哪个版本的页面。 在index.html 文件中为每种语言添加一个标签。 为每种语言添加了 hreflang 标签。 第 5 步 – 测试您的页面 为了确保一切正常并且 Google 将为您的页面及其内容建立索引，请运行移动优化测试并输入您应用程序的不同页面。 您将能够看到将在搜索引擎中索引的渲染版本。 Google 索引的移动优化测试。
第 6 步 – 要求 Google 再次抓取您的网址 转至 Google Search Console 请求对您的应用程序 URL 建立索引。 几分钟或几小时后，您的网页最终将出现在 Google 的搜索页面上。 请求在 Google Search Console 上重新建立索引。 要进一步了解，请查看 VUEjs 框架的官方文档，要了解服务器端渲染，请查看NuxtJS。 本文是 Thruu 创始人 Samuel Schmitt 的客座文章。要与 Samuel 取得联系，请访问他的 linkedin、他的 Twitter或直接访问他的网站。