整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

alt标签是什么?alt标签能否有助于改善SEO排名?

lt标签属于图片中的属性标签,完整的图片属性应该包含src,alt,title三种属性。

虽然alt标签不是直接的排名因素,但是在图片中加入alt标签利于搜索引擎解读图片的内容,并在一定程度上提升关键词排名的效果。

譬如可以在每一个网页的文章中添加4到5张的图片,并完善图片的alt标签属性,添加图片可以加强信息阅读效果以及提高吸引力。

在这篇文章中,我将解释为什么要优化图片中的alt标签和title标签:

alt标签的写法

alt标签在html语言中的写法是这样的:<img src=”图片路径” alt=”图片描述”/>

这里我们要说的一点是,图片描述最好是用简短的语句,描述这张图片的内容,如果是链接,则描述链接的作用,并带上关键词。

不好的习惯是每张图片都没有alt标签。而不可取的是,对于每个标签都采用关键词堆砌,这样就有可能会导致被视为Spam垃圾网站。

注意:“alt标签”是一个通用术语,而不是写法,实际上alt是IMG标签中的一个替代文本属性,简单点来说alt标签就是用来描述图像内容的意思。

HTML代码

完整的图片编码应该包含alt标签和title标签:

<img src =“图片路径” alt =“图片说明” title =“图片提示”/>

图像的alt和title属性通常被称为alt标签或alt文本和标题标签,即使它们不是技术上的标签。

alt文本描述图像上的内容和图像在页面上的功能,例如您网站有数张图片,关于介绍屋苑的室内设计,可以相关图片标签指定的#文本/#标题。用作告诉给搜索引擎这些图片是什么,及介绍什么,并且与您原先的网站设计内文是有关连及呼应,这便是属于其中的网站制作的SEO技巧之一。

每张图片都应该有一个alt文本(个人认为,但是博主比较懒,有些没加),但是部份图片并不需要title属性,因为可能会误导搜索引擎,但是如果已经设置了,并不会产生太大的问题,因为各个搜索引擎都图片编码的识别都有不同追求。

、目录

  • HTML 基本概念
  • HTML 基本结构
  • HTML 基本标签

二、HTML基本概念

2.1、什么是 HTML

  • 超文本标记语言(Hyper Text Markup Language)
  • 描述网页的语言
  • 传输最简单的文本内容
  • 可以表达文字内容之外的语言——HTML1.0

2.2、HTML的发展

  • html1.0—-xhtml1.0( 过渡 )—-xhtml2.0( 放弃 )——html5

三、HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本标签

4.1、标签和属性

  • 双标签:<标签名称></标签名称>
  • 单标签:<标签名 />

4.2、标签的属性

  • 基本格式:<标签名 属性1=“值1” 属性2=“值2”></标签名>
    • 标签可以拥有多个属性
    • 属性必须写在开始标签中,位于标签名后面
    • 属性之间不区分顺序
    • 标签与属性之间、属性与属性之间用空格隔开
    • 每个属性都有默认值,省略属性则表示使用默认值

4.2、HTML全局属性

  • class:规定元素的类名
  • id:规定元素唯一的id
  • lang:设置元素中内容的语言代码
  • style:规定元素的行内样式
  • title:规定元素的额外信息

五、HTML事件

5.1、HTML事件—窗口事件

  • 使用HTML事件触发浏览器中的行为,比如启动某一段JavaScript
  • 使用于body标签中
    • onblur:当窗口失去焦点时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onload:当加载文档时运行脚本

5.2、HTML事件—表单事件

  • form
    • onblur:当窗口失去焦点时运行脚本
    • onchange:当元素改变时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onreset:当表单重置时运行脚本,HTML5不支持
    • onselect:当选取元素时运行脚本
    • onsubmit:当提交表单时运行脚本

5.3、HTML事件—键盘事件

  • 键盘事件
    • onkeydown:当按下键时运行脚本
    • onkeypress:当按下并松开键时运行脚本
    • onkeyup:当松开键时运行脚本

5.4、HTML事件—鼠标事件

  • 鼠标事件
    • onclick:当单击鼠标时运行脚本
    • ondblclick:当双击鼠标时运行脚本
    • onmousedown:当按下鼠标时运行脚本
    • onmousemove:当鼠标指针移动时运行脚本
    • onmouseout:当鼠标指针移出元素时运行脚本
    • onmouseover:当鼠标指针移至元素之上时运行脚本
    • onmouseup:当松开鼠标按钮时运行脚本

5.5、HTML事件—多媒体事件

  • 多媒体事件
    • onabort:当发生中止事件时运行脚本

六、标签

6.1、注释标签

  • 标签: < !-- 注释内容 -- >
  • 作用:在源文档中插入注释。注释不会在浏览器中显示

6.2、文档标题标签

  • 标签:
  • 作用:
    • 定义浏览器工具栏中的标题
    • 提供页面被收藏时的标题
    • 显示在搜索引擎中显示的页面标题

6.3、标题标签

  • 标签:

  • 作用:
    • 用来定义HTML的标题
    • 用例定义最高等级的标题
    • 用例定义最低等级的标题
  • 属性:全局属性、事件属性

6.4、段落标签

  • 标签:
  • 作用:定义段落
  • 属性:全局属性,事件属性

6.5、容器标签1

  • 标签:
  • 作用:对行内元素进行组合,提供了一种将文本或文档的一部分独立出来的方式
  • 属性:全局属性、事件属性

6.7、容器标签2

  • 标签:
  • 作用:
    • 定义了HTML文档中一个分隔区块或一个区域部分
    • 经常与CSS一起使用,用于定义网页布局
  • 属性:全局属性、事件属性

6.8、图像标签

  • 标签:
  • 作用:定义HTML页面中的图像
  • 属性:
    • src:定义显示图像的URL(必选)
    • alt:定义图像的替代文本(必选)
    • title:鼠标悬停图像时显示的文本
    • width:图像的宽度
    • height:图像的高度
    • border:设置图像边框的宽度

6.9、超链接标签

  • 标签:
  • 定义超链接,从一个页面链接到另一个页面
  • 属性:全局属性、事件属性
    • href:规定链接的目标URL

6.10、列表标签

  • 标签:
<ul>
<li></li>
<li></li>
</ul>
  • 作用:
    • 定义无序列表
      * <ul>与<li>一起使用,创建无序列表
  • 属性:全局属性、事件属性

6.11、列表标签 - 有序列表

  • 标签:<ol><li>...</li><li>...</li></ol>
  • 作用:
    • 定义了一个有序列表,列表排序以数字来显示
    • 使用
    • 标签来定义列表选项
  • 属性:全局属性、事件属性

5.12、表格标签

  • 标签:
    • 表格:<table></table>
    • 行:<tr></tr>
    • 单元格:<td></td>
  • 作用:定义表格
  • 属性:全局属性、事件属性
    • border:定义表格是否有边框

6.13、表单域

  • 标签:<form></form>
  • 创建用户输入的HTML表单
  • 属性:全局属性、事件属性
    • action:指定接收并处理表单信息的服务器URL地址
    • method:表单数据提交的方式
    • name:指定表单的名称

6.14、表单标签

  • 标签:
  • 作用:定义了用户可以在其中输入的字段,输入字段可以通过多种方式改变,取决于type的属性
  • 属性、全局属性、事件属性
    • type:规定要显示input标签的元素的类型
      • text:单行文本(不可换行)
      • password:密码输入框
      • radio:单选框(配合name可以实现单选效果)
      • checkbox:复选框
      • button:普通按钮
      • submit:提交按钮
      • reset:重置按钮
      • image:图像形式的提交按钮
      • file:文件域,点击之后打开文件选择器
    • name:控件名称,name相同则表示为同一组数据
    • value:指定input元素的值
    • size:显示大小
    • checked:是否被选中
    • maxlength:控制输入的最大字符长度

6.15、文本标签

  • 标签:
  • 定义一个多行的文本输入控件
  • 属性:全局属性、事件属性
    • cols:规定文本区域内可见的宽度
    • disabled:规定禁用文本区域
    • name:规定文本区域的名称
    • readonly:规定文本区域为只读
    • rows:规定文本区域内可见的行
    • placeholder:规定一个简短的提示,描述文本区域内期望的输入值

6.16、下拉菜单

  • 标签:…
  • 作用:
    • 用来创建下拉列表
    • 中的标签定义了列表中的可用选项
  • 属性:全局属性、事件属性
    • isabled:当属性为true时,会禁用下拉列表
    • multiple:当属性为true时,可选择多个选项
    • name:定义下拉列表的名称
    • size:规定下拉列表中可见选项的数目

霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程,通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力,使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导,BAT 级别的测试管理大咖量身打造职业规划。

天SEO小也要跟大家聊聊图片中alt属性,不要小看这个图片的alt属性,谷歌对于这个属性还是很器重的,对于提升网站排名也有一定作用,不然谷歌也不会花好几篇文章去说明alt属性,这篇文章SEO小也打算把谷歌官方的几篇文章提取出来,来说说图片alt属性以及如何优化。

什么是Alt属性?

我们在做这件事之前,首先需要明白为什么做这件事,Alt属性最重要的功能就是在图片无法显示,作为替代说明文字,比如在网络不好的时候,图片加载比较慢,首先浏览器就会使用alt属性内的文本作为占位标记显示在网页上,让读者有个大体的概念,这个图片表达的内容含义是什么。

Alt属性的作用

Alt属性不同Title属性和其他说明性属性,这个属性是图片所特有的属性,在其他Html标签上是用不到Alt属性的,所以这个属性有两点很重要的作用:

  • 增强网站的用户体验
  • 有利于图片SEO优化,提升网站排名

第一点前面SEO小也已经说过了,就是在图片无法加载的时候,作为图片辅助说明性文字,第二点是最重要的一点,因为做好Alt优化,能够提升网站排名,获得更多流量,虽然各大搜索引擎在积极发展图片识别技术,但是还是无法做到像人类一样准确理解图片的意思,这时候我们就需要使用Alt属性,帮助搜索引擎理解图片,写好Alt属性文本内容,就像写好文章Title一样,能够带来更多的关键词排名,各大搜索引擎都有图片搜索的功能,那些图片就是搜索引擎建立索引,并给予排名的,可以看到那些图片都是有相关信息描述的:

谷歌图片排名描述

怎么写好Alt属性

下面SEO小也简单举个例子,来说明下什么样的Alt文本内容,才是符合SEO要求;首先来看看最简单的Logo图片标签:

<img class="logo" src="seozen-logo.jpg" alt="The SEOZEN logo">

这是SEO小也LOGO的图片属性,可以看到图片文件名是有意义的名称,不是随机的字母或者数字,这是第一个要注意的地方,上传图片之前,要尽量重命名图片,让他语义话,之后Alt属性内部,是英文描述的图片功能,表达的是这个图片是SEO小也的LOGO,如果是国内不做谷歌排名的朋友,这里用中文就好,SEO小也Alt标签一般使用的是英文描述,这是比较好的方式,一般的方式是把图片语义化后的文件名,去掉后缀放到Alt属性里面,这样也是可以的,但是肯定没有功能描述的好。

下面在优化Alt属性的时候,有几点需要注意:

  • 描述的越详细越好。
  • 尽量让描述文本相关性高,言简意赅,不要过长。
  • 把文章关键词使用到其中最好。
  • 避免关键词堆砌问题。
  • 不要用多余的说明文字,比如说『这张图片』。
  • 不要忘记form表单中的图片按钮也要加上Alt属性

关于图片Alt属性的知识暂时分享到,SEO小也感觉还有很多内容要说,但是还没有想好要怎么表达,有什么不懂或者有什么问题可以评论留言。