将标题属性替换为工具提示的跨度对 SEO 来说是个坏主意吗？答案

【问题标题】：Replacing Title Attribute With Spans For ToolTips A Bad Idea For SEO?将标题属性替换为工具提示的跨度对 SEO 来说是个坏主意吗？
【发布时间】：2014-09-23 18:27:43
【问题描述】：

我目前正在为工具提示实现纯 CSS，并开始重新考虑它。

我决定使用纯 CSS 方法将代码与文本的比例降至最低，更好地控制它们的显示方式和更好的用户体验。但是使用没有任何 JavaScript 的纯 CSS 解决方案需要从锚标记中删除 title 属性。 这显然有缺点（？）。

这让我想到：SE 是否已经演变为查看锚标签中的 span 标签来代替 title 属性？

通过删除 title 属性可以防止浏览器显示工具提示的默认行为（因此在使用纯 CSS 时不会向用户显示两个工具提示）但 title 属性对搜索引擎很重要和 SEO。

知道搜索引擎一天比一天更聪明，我看到很多工具提示设计使用都是通过属性检查器以这种方式实现的。

所以：

我还应该包含 title 属性吗？ - 我看到了好与坏
在给定的锚点中使用包含相同文本的 span 和 title 会受到惩罚吗？ - 这很糟糕
即使跨度标记在锚点内，它也算作文本吗？ 很酷，但很可能是
如果 title 属性被省略，span 会取而代之吗？ 更好地让跨网成为更好更快的地方，但很可能不会

同时拥有两者最终会增加文件大小并且代码比率也会增加。如果 SE 可以搜索锚点之间的 span 标签作为标题描述，那就太棒了。

所以我根据任何当前（或内部）知识以及我上面的问题问你，下面的哪些代码 sn-p 对 SEO 来说是坏的还是最好的？

JS 和/或 CSS 的老派方式：

<a class="[add my tooltip and remove the browsers]" href="#" title="description of link">The Link</a>

或

我见过很多开发者使用的一个动作：

<a href="#">The Link<span>description of link</span></a>

或

但应该是：

<a href="#" title"description of link">The Link<span>description of link</span></a>

显然，SEO 权重也需要考虑很多因素，所以我希望每个人的意见都尽可能彻底 - 每个人都可能从中学到一些东西（？）。

谢谢

【问题讨论】：

这个问题似乎是题外话，因为它是在寻求 SEO 建议。

标签： javascript css performance attributes seo

【解决方案1】：

使用

<a href="#" title="description of link">The Link<span>description of link</span></a>

总是有利的，搜索引擎（主要是谷歌）对链接的内容感兴趣，因此 href 标题起着至关重要的作用。它不仅可以向用户传达链接详细信息，还可以让 SE 使用其属性读取您的链接，而无需按照链接进行分类。

SE 机器人对 spans 的读取仍有争议，但 title 属性是肯定的。

【讨论】：

【解决方案2】：

为什么不试试这样的：

    $(document).ready(function (e) {

        $(".ToolTipClass").click(function (e) {
            ConfirmOK("ToolTip", $(this).prop("alt"));
        });

        function ConfirmOK(Title, Message) {
            $('<div style="padding:10px;max-width:500px;word-wrap:break-word;">' + Message + '</div>').dialog({
                draggable: false,
                modal: true,
                resizable: false,
                title: Title,
                minHeight: 75,
                closeOnEscape: false,
                buttons: {
                    OK: function () {
                        $(this).dialog("destroy");
                    }
                }
            });
        }
    });

将上述代码粘贴到您的 masterpage 的 document.ready 事件处理程序中，然后您只需将任何内容的类设置为“ToolTipClass”并将其 alt 属性设置为您希望在对话框中显示的任何文本。

您可以在任何东西上使用此代码，但我更喜欢使用“信息”图标，因为它们是普遍可识别的。所需的代码量非常少 - 您仍然可以为您的 SEO 问题释放 title 属性。

【讨论】：