SEO优化中,针对图片,搜索引擎的蜘蛛是没有办法完全读取的。因此,我们经常会使用ALT语言对图片进行注解,来帮助蜘蛛读取图片信息,这对SEO优化来说相当重要。
那么在网站编辑里,究竟如何来给图片添加ALT标签呢?
“中华手赚网”运营站长裴勇翔就给大家简单介绍一下。
(1)以织梦系统为例,其他网站使用同类型编辑器也可以使用;
在网站后台上传图片时候,会有一个替换文本,这个替换文本便是我们的ALT属性。
由于有很多网站系统没有替换文本选项,没有关系,我们有另外的通用性方式。
(2)以Wordpress后台为例,其他网站使用同类型编辑器也可以使用。
在编辑器页面,点击左上角进行html代码切换,以网站源码方式添加ALT属性。
标签示例:alt="xxx"
结语:ALT属性也是页面关键词优化的重要支撑力量,合理适度的标注图片有利于网站的优化。
创: 前端之巅 前端之巅 今天
作者|Nino Ross Rodriguez
译者|无明
Web 开发人员和内容编辑人员经常会忘记或忽略了 img 标签的 alt 属性,这是一个可以提升网站可访问性和 SEO 性能的重要部分,这个属性通常用来描述图片:
<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >
如果你经常在网络上发布内容,你就应该知道,为图片提供描述性文本是一件很枯燥的事情。当然,如果只有几张图片倒没什么问题,但如果我们说的是数百或数千张图片呢?你该怎么办?
让我们来看看使用谷歌、IBM 和微软等公司提供的计算机视觉和图像识别服务自动为图片生成描述性文本的一些可能性。
alt 属性的文本有什么用?
alt 属性是一小段 HTML 代码,用于描述页面上显示的图片,但在 Web 开发和编辑内容时经常被忽略。它是如此的不起眼,以至于它似乎对普通用户没有任何影响,但它确实具有非常重要的用途:
在了解了这些重要性之后,希望你能够在开发和内容编辑期间加入正确的 alt 文本。但是,试图为大量积压的图像进行详细描述可能是一项艰巨的任务,特别是如果你的时间很紧迫或者奔忙于多个项目之间。
如果有一种方法可以在上传图片时应用 alt 文本该有多好!如果有办法检查页面是否缺少 alt 属性,并自动填充它们,那该有多好!
解决方案来了!
计算机视觉(或图像识别)实际上已经出现了相当长一段时间。谷歌、IBM 和微软等公司都提供了自己的公开 API,开发人员可以利用这些功能来识别图像以及图像中的内容。
有些开发人员已经在使用这些服务,并创建了自己的插件来生成 alt 文本。以 Sarah Drasner 的生成器(https://codepen.io/sdras/details/jawPGa)为例,它演示了如何使用 Azure 的计算机视觉 API 为上传的图片或 URL 链接的图片创建 alt 文本。
Jacob Peattie 开发了一个自动 alt 文本插件(https://wordpress.org/plugins/automatic-alternative-text/),这也是一个使用了 Azure 计算机视觉 API 的 WordPress 插件。它基本上是工作流的一个补充,允许用户上传图片并自动生成 alt 文本。
人工智能的介入
我曾经尝试过一些人工智能服务,我敢说,Azure 计算机视觉生成的结果是最好的。谷歌和 IBM 提供的服务肯定也有他们的专长,它们仍然可以识别出图像并得到正确的结果,但微软的服务非常好,非常准确,以至于我认为没有必要再去考虑其他选项。
创建图像识别插件非常简单。首先,访问微软 Azure Computer Vision(https://azure.microsoft.com/en-au/services/cognitive-services/computer-vision/)。你需要登录或创建帐户,这样才能获取插件所需的 API 密钥。
进入仪表盘后,搜索并选择“Computer Vision”,然后填写必要的信息。
等待平台启动一个计算机视觉实例,在实例启动后就可以使用 API 密钥。
现在开始进入有趣的部分!出于演示的目的,我将使用普通的 JavaScript 代码。对于其他语言,你可以查看文档:
https://westus.dev.cognitive.microsoft.com/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fe
你可以直接复制和粘贴下面的代码,只需要替换占位符就可以了。
var request=new XMLHttpRequest();
request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');
request.send(JSON.stringify({ "url": "[IMAGE_URL]" }));
request.onload=function () {
var resp=request.responseText;
if (request.status >=200 && request.status < 400) {
// Success!
console.log('Success!');
} else {
// We reached our target server, but it returned an error
console.error('Error!');
}
console.log(JSON.parse(resp));
};
request.onerror=function (e) {
console.log(e);
};
好吧,让我们来看看 AI 服务的一些关键术语。
位置:这是在获取订阅密钥之前选择的服务的订阅位置。如果由于某种原因忘记了位置,可以转到“Overview”页面,并在“Endpoint”下找到它。
订阅密钥:这是为插件解锁服务的密钥,可以在“Keys”页面中获得。其中有两个,但使用哪一个并不重要。
图片 URL:这是需要获取 alt 文本的图片的路径。请注意,发送给 API 的图片必须满足特定的要求:
易如反掌
感谢这些大公司为开发人员开放他们的服务和 API,现在任何人都可以相对轻松地使用计算机视觉。作为一个简单的演示,我将下面的图片上传给 Azure Computer Vision API。
这个服务返回以下这些详细信息:
{
"description": {
"tags": [
"person",
"holding",
"cellphone",
"phone",
"hand",
"screen",
"looking",
"camera",
"small",
"held",
"someone",
"man",
"using",
"orange",
"display",
"blue"
],
"captions": [
{
"text": "a hand holding a cellphone",
"confidence": 0.9583763512737793
}
]
},
"requestId": "31084ce4-94fe-4776-bb31-448d9b83c730",
"metadata": {
"width": 920,
"height": 613,
"format": "Jpeg"
}
}
你可以从中选择可能用于图片的 alt 文本。如何构建这个功能取决于你:
请注意,这些服务并非 100%准确。它们有时候会返回低置信度和与主题完全不一致的描述。但是,这些平台也在不断学习和改进。毕竟,罗马不是一天建成的。
我们网站中有很多图片,大到广告图、活动宣传图、产品主图,小到文章配图、图标等等,那么问题来了,搜索引擎只识别文本内容,它怎么知道你网站的图片分别代表什么?答案:alt标签信息。
比如网站LOGO,明眼人一看就知道它就是个LOGO,但是搜索引擎不知道啊,你给logo加上alt标签信息,比如LOGO或者公司名称,这回搜索引擎就知道这么一个回事了。
图片alt标签
图片alt标签信息还有另外一个功能,就是当你网站图片加载错误的时候,alt标签信息就是图片的替代品,显示在图片对应的位置上,供用户了解这张图片代表的字面意思。
图片alt标签
源代码方法:
点击查看HTML源代码,在源代码里面找到相应的img alt="网站中的图片alt标签信息有什么用?怎么给图片添加alt标签信息?"标签,然后在img alt="网站中的图片alt标签信息有什么用?怎么给图片添加alt标签信息?"标签里加入alt信息。
图片alt标签
模块插件方法:
在图片模块设置里,只需要给图片添加标题,便可以自动生成对应的alt标签信息。
图片alt标签
网站中有很多的图片,像图标类小素材图片、广告图、文章配图、活动宣传图等,那必须要都写上alt标签吗?
实际上是没必要的。你给那些你认为有价值的图片添加alt标签即可,没必要全部添加,像图标累的素材图片,我们怎么添加?添加了能获得流量吗?硬生生的写了一个alt标签,甚至融入了关键词,我担心是不是会被认为是过度优化呢?
*请认真填写需求信息,我们会在24小时内与您取得联系。