Question

我有一个网站，在主页面上我有一个带有图像的div，其中有一个非常漂亮的设计说“通过拨打1 800 blabla来联系我们”。所以我在想，如果我公司的电话号码唯一的地方是带有图像背景的div，搜索引擎将如何识别或找到我公司的号码，

所以我的问题基本上是如何向这个div添加信息：

<div id="phone"></div>

以及我需要为机器人和东西提供信息的任何其他div

Answer 1

使用图像替换技术非常容易。

<div id="phone"><span>11-1111-1111</span></div>

和CSS。（将您的手机div更改为您需要的任何内容，但您需要定义宽度和溢出：隐藏以隐藏文本。

#phone
{
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

#phone span
{
    position: absolute;
    left: -999em;
}

或者，不使用额外的标记（我读到谷歌不赞成以这种方式使用文本缩进的地方，这就是为什么我没有首先使用它，但我找不到它的来源）。

<div id="phone">11-1111-1111</div>

和CSS。

#phone
{
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-indent: -999em;
}

另外：http://css-tricks.com/css-image-replacement/看起来像是一个相当不错的资源。

Answer 2

您可能需要查看hCard microformat specification并创建类似这样的HTML代码：

<div class="call-us vcard">
    <span class="tel">
        <span class="type">business</span>
        <span class="value">+1.800.blabla</span>
    </span>
</div>

call-us classname通过设置其尺寸来格式化div，在视觉上隐藏span.tel标记并将图像添加为背景。搜索引擎会认识到这是一张联系卡（注意vcard类名），他们会正确解析电话号码。

Answer 3

你必须使用这种方法

#ContactInformation {/* your image and restof padding */}
#ContactInformation h2 { display: none; visibility: hidden; }

<div id="ContactInformation">
    <h2>Phone:</h2>
    <label>1 800 blah blah</label>
</div>

实际搜索引擎查看并检查h2标记及其值，但您的用户不会看到 h2 文字。

css div搜索引擎的图像信息

3 个答案: