代码之家 › 专栏 › 技术社区 › Patrick

如何使用图标记将seo的alt和title添加到响应设计中

seo image css html

-2

Patrick · 技术社区 · 7 年前

我如何才能建立一个响应移动第一页与图像优化搜索引擎优化与alt和标题?

此时,我更改css文件中的图像源,如下所示:

section.value-offer > div.container > figure {
    background: url('../Images/Shop/img.childrens.480x320.jpg') top center no-repeat;
    background-size: cover;
    padding-bottom: 66.66666666%;
    height: 0;
}

在html中,我只使用:

<figure></figure>

然后在下一个页面大小的css响应部分:

@media only screen and (min-width : 480px) {
    background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;
}

但我做不到:

<figure alt="Image of Childrens" title="Image of Childrens"></figure>

我不能把img标记和src放在一起,因为我不能只用css来更改它。

2 回复 | 直到 7 年前

codeVerses 7 年前

如果你想让这些图片在任何现代搜索引擎的图片搜索中排名(我猜这就是你的问题的目的),那么你不应该把它们作为css背景图片,因为这不会被它们索引。寻找语义html( <figure> )是一个正确的选择,但根据图像和内容结构,您也可以使用普通的 <img> 标签。如果你需要了解更多关于 responsive images 是的。

我也建议使用前面提到的scrset,尽管ie没有采用这个属性。有件容易的事要做. scrset 属性,但仍使用 src 因此您可以从那里获取默认的ie图像:

<img src="default.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="your_alt">

PIIANTOM FRAGA 7 年前

如果你有搜索引擎优化/跨浏览器(包括IE)的限制,我建议

对这样的html使用mobile-first方法

<figure alt="Image of Childrens" title="Image of Childrens">
<img alt="Image of Childrens" title="Image of Childrens" src="../Images/Shop/img.childrens.480x320.jpg" />
</figure>

这意味着默认情况下,客户端(此处为mobile)将获取专用于mobile的较小图像

然后,对于更大的屏幕(桌面甚至平板电脑),您将拥有这样的应用css

    @media only screen and (min-width : 768px) and (max-width: 1023) {
        section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;
    }
}
   @media only screen and (min-width : 1024px) and (max-width: 1280) {
        section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.1024x720.jpg') top center no-repeat;
    }
}

如果您的媒体查询定义良好,这意味着是的:桌面将下载所有情况下较小的图像+一个大得多的图像。但至少,您可以限制移动设备下载资产的大小,同时假设桌面的连接更加牢固。

推荐文章