2

我想<link rel="alternate" href="https://www.example.com" hreflang="en-us" />使用 jQuery 或其他任何东西在我的 bigcommerce 网站中添加这种链接标签......

试过的代码：

1：

if ($("body#home").length > 0) {
  $('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}

2：

var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
  $('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}

3：

if ($("html").hasClass("home")) {
  $("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}

但没有什么对我有用....

4

1 回答 1

2

让我们首先介绍一些背景知识hreflang以及谷歌阅读它的三种有效方式。

  1. 标题中的 HTML 链接元素。在http://www.example.com/的 HTML 部分中，添加一个链接元素，指向http://es.example.com/该网页的西班牙语版本，如下所示： <link rel="alternate" hreflang="es" href="http://es.example.com/" />

  2. HTTP 标头。如果您发布非 HTML 文件（如 PDF），您可以使用 HTTP 标头来指示 URL 的不同语言版本：
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
    要在 Link HTTP 标头中指定多个 hreflang 值，请使用逗号分隔值，如下所示：
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"

  3. 站点地图。您可以在站点地图中提交语言版本信息，而不是使用标记。

资料来源：谷歌“hreflang”用法

因此，方法 2 是不可能的，因为您无法修改或控制 BigCommerce 商店的标题。

这给我们留下了方法 1 或方法 3。

不过这里最大的问题是..
“Google 会索引和处理动态插入的 JavaScript hreflang 链接标签吗？”

不幸的是，在撰写本文时，我需要等待几天才能让 Google 网站管理员工具在我的测试站点上激活，这样我才能确定；而我使用的所有第 3 方hreflang测试站点都失败了。我的直觉是我不会相信它。但是，如果您有一个有效的 Google 网站管理员/搜索控制台帐户，您可以通过以下方式进行测试：
Dashboard > Search Traffic > International Targeting。

但是为了争论，让我们假设它会起作用，所以为了回答你的具体问题，你会像这样使用这种方法......

在<head>...</head>块中，像这样创建一个空的链接标签：<link id="lang1" />
这将使link元素在 DOM 中物理地等待其属性被动态添加。

接下来，在上面创建的链接元素的正下方，让我们创建一个 JavaScript，它将根据当前页面将此空链接标记转换为完整的 hreflang 引用：

<script>
  // If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
  // If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />" 
  window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>

这就是编码方面的内容。如果您运行此程序并检查 DOM（它不会在页面源代码中查看），您可以确认您的链接标记现在读取为：<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />

同样，谷歌是否会处理这个，我不知道。

但这是一个我知道会起作用的替代方案......

我们可以按照上面列出的方法 3，通过您网站的站点地图提交语言版本信息，其中可以指定哪些个别和特定页面具有替代语言版本。

现在，您无权直接修改 BigCommerce 生成的站点地图。但是您可以访问的是：
1. 创建您自己的自定义站点地图文件，并将其上传到您的商店。
2.告诉谷歌使用这个自定义站点地图的 URL，而不是默认的 BigCommerce 一个。

网上有很多关于如何创建站点地图的资源，并且有很多工具可以帮助自动化这个过程。虽然要小心，但如果您使用自定义站点地图，那么每当您向商店添加新页面或产品时，您都需要对其进行维护并手动更新它。

我已经花时间向您指出了一些可以帮助您完成这项任务的特定文档资源。我最终会回到这篇文章，将这些链接中的内容转录到这篇文章中，因为我承认发布链接是不好的做法。一个硬汉可能会说“那你为什么要这样做”，而且我的时间有限，我正在尽我所能提供帮助。

这是来自 Google Docs 的链接，其中包含有关创建具有页面特定语言版本的站点地图的信息。

这是 BigCommerce 文档中的链接，其中包含有关将自定义文件上传到您的商店的信息，然后可以通过您的域/URL 访问该文件。

最后，这里是 BigCommerce 文档的链接，其中包含有关如何指导 Google 使用特定/替代文件作为您商店的站点地图的信息。

请尝试我为方法 #1 编写的代码建议，并使用您的 Google 网站管理员工具对其进行测试，让我们知道当通过 JavaScript 动态插入时，Google 是否成功抓取了 hreflang 链接标签 - 您将为社区提供出色的服务对此没有明确的答案。

请记住，您可以通过登录 Google 网站管理员控制台并导航至Dashboard > Search Traffic > International Targeting


祝你好运！请务必报告。

于 2017-07-03T15:37:06.093 回答