当前位置:首页 > 阿里国际站 > 正文内容
五月1日

时间:2017-05-01 11:00

国际站必须看得懂的HTML代码

0
分类:阿里国际站 | 评论:0人 | 浏览:84次   

大家每天都忙着找关键词,忙着写标题,忙着做各种的优化。目的就是想把自己的产品排名到前面,获得更多的曝光,带来更多的询盘。在这个过程中我们是客服同事也是一名搜索优化人员,但是作为搜索优化人员我们往往忽视一个重要的东西,它就是代码。特别是新人同学更容易忽略这一块。在做搜索优化中,我们必须要了解这些阿里用得到的基础代码,至少看得懂它,知道它是做什么的。今天就给大家分享一下阿里里面需要我们看得懂的代码和它的用法。希望能帮助到大家。

Html是来描述网页的一种超文本标记语言,它不是什么程序语言,仅仅是简单的做网页标记用的语言,简单易学。它是以html标签的形式成对出现的。示例:<html></html>。不区分大小写。接下来给大家列举一下阿里中我们需要看得懂的标签。

<html>,<title>,<meta>,<p>,<span>,<strong>,<table>,<tr>,<td>,<a>,<img>

一,<html>

<html></html>,这个标签是HTML代码开始和结束的标记。其实这个在阿里中我们是用不到的,但是在这里我还是要说一下,就是因为所有的HTML标签都应该出现在它的里面,我们可以任意打开一个网页,进入代码页面去观察一下,每一个正常的页面我们都能够发现它的踪迹。这里不讲太多,只是让大家知道它的作用。

二,<title>

这个是一个非常非常非常重要的标签。它的重要性并非我们需要去怎么怎么修改它。它的内容一般会出现在浏览器的标题栏和状态栏。它是一个页面的标题,也是一个网页页面的概述。所以在搜索引擎优化中,它是非常非常的重要的一个元素。在阿里里面每个产品页面的<title>里面的内容就是我们的产品标题和关键词。我们可以到后台截图看一下.如图:


从这里我们可以清晰的看到<title></title>这对标签里面的内容,第一个箭头所指示的是产品标题的名称。后面三个箭头是产品的三个关键词。我们还可以看到在后面关键词的前部阿里自动加了buy………on alibaba.com.这是阿里做的优化。这些东西我们只要能看懂就可以喽,寻找对手的关键词就可以从这里入手哦。打开它的方法很简单,在产品页面任意空白处点击鼠标右键,然后点击打开网页源代码按钮,即可打开代码页面。<title>标签都出现在网页的上部,很容易找到它的。这个标签,我们只需要了解它就可以了,我们只要认识它,就可以方便的找到对手的标题和关键词了。

三,<meta>

这个标签所出现的位置也是网页的上部。它本身是不包含任何信息的。在这里我们主要讲解它的一个作用,搜索优化。SEO优化中,<meta>是非常非常重要的。我下一下它的内容,大家应该就可以理解它的重要性了。<meta  name=”keywords” content=”Retro Mdf Pleaue Oil Painting, High Quality Mdf Pleaue Oil Painting,Mdf Plaque With Painting,Retro Mdf Plaque Painting,Yiwu Ziwei Daily Necessities Co., Ltd.” />

<meta name=”description” content=”Retro Mdf Pleaue Oil Painting , Find Complete Details about Retro Mdf Pleaue Oil Painting,Mdf Pleaue Oil Painting,Mdf Plaque With Painting,Retro Mdf Plaque Painting from Painting &amp; Calligraphy Supplier or Manufacturer-Yiwu Ziwei Daily Necessities Co., Ltd.” />

这里首先要说的是这个标签是单独出现的,格式是<meta  …   />.  接下来我们看上面的<meta>,我们看它的name,name的键值是  keywords。这个很好理解的哦,就是关键词的意思。既然它的名字是关键词,当然它的内容我们就可想而知了。我们再看第二个<meta>的name是description,这里面是这个页面的简要描述。这样一看就很容易理解了,它主要的作用是搜索引擎优化。我们仔细看它content里面的内容,跟我们的关键词和标题有很大的关系,从这个上面我们可以看出来,在产品发布的时候关键词和标题是多么重要了。在这里,这个标签我们只需要看得懂,知道它是干嘛的即可。因为优化这里的过程就是我们修改标题和关键词的过程。我们是不能单独修改这两个部分的。

四,<p>

<p>标签主要是用来定义段落的,这个标签在我们详情描述里面可以经常看到的哈,我们的文字段落的定义就可以用它来实现哈。好吧,我还是用实例的方式来说明吧。

<p style=”text-align: center;”>oil painting</p>

可能新手朋友一眼看到这个不太了解这段代码为什么要这样写。首先我告诉大家它的显示效果是文字内容居中显示。红色的oil painting 就是我们里面写的文字内容。前面的style = “text-align:center;”  这个是<p>标签支持的样式风格,style =“”是样式风格在标签中的通用写法,大家只要记住即可。Text-align:center  这个代表的是文本的对齐方式。它的值是 center,意思就是居中显示哈。当然它也可以是left 或者right。由于style 里面有很多很多的值,这里就不一个一个的讲解了。大家只要能知道<p>标签是干嘛用的即可。

 五,<span>

<span>标签在阿里详情描述里面也是出现很多的标签。它本身没有什么实际效果,我们应用它的主要原因就是要对内容添加样式,即style。如果我们不在<span>标签中添加样式,它就没有什么视觉上的区别,也没有很特别的意思。下面举例说明它的用法。我们可以把它用在<P>标签内来改变指定的文字样式。如:

<p> <span style=”background-color:#FF0; font-family:’微软雅黑’; font-size:16px; color:#F00;”>abstract  handmade</span>  seascape  oil painting</p>

先截图让大家看一下这段代码显示的效果,如图:


abstract  handmade  seascape  oil painting   是我的文本。<span>标签我是加在abstract handmade  这两个单词上的。里面添加了一些样式,从最后显示的效果大家就能够清晰的看出来,文字背景为黄色,文字颜色是红色,文字的字体是微软雅黑,字号大小是16px。这些代码我们不但需要看得懂,最好是能够自由使用。因为当我们熟练的时候,我们不但能使用,而且还可以根据自己的需要添加和删除一些代码,那些无用的代码我们尽量要删除,这样可以减小搜索服务器的压力,对我们的搜索排名是有一定的优势的哦。还有就是规范合理的代码书写和排列也是对我们的搜索排名有好处的哈。

六,<strong>

这个标签是一种效果标签,从字面意思可能大家就可以理解,它是把文本加粗的一种标签。这是文本的一种强调形式。用这个标签告诉搜索引擎,这里是我的重点,在搜索优化的时候,这个标签内的内容就会有多一些的权重值。所以,我们在优化的时候,标题和关键词出现在详情描述中的时候,我们尽量要把他们加粗显示哦。

七,<table>,<tr>,<td>

这三个标签我写在一起的原因是他们是组团出现的哈。它就是做表格的三个不可缺少的标签<table>定义的是表格开始,</table>表示表格结束。<tr><td>分别定义行和列。接下来我用代码和图片的形式来展现它的效果:

<table   class=”aliDataTable”  style=”width: 80%;” border=”1″>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

然后如图看效果:


这里我要简单说一下的是 <table>里面的 内容:class=”aliDataTable”  style=”width: 80%;” border=”1″。其中class=”aliDataTable” 是阿里给出的表格样式,我们可以直接使用,就是这个灰色边框效果显示的表格样式。当然我们也可以不用阿里给出的样式,我们可以自己来定义边框的颜色样式。style=”width: 80% 是这个表格的宽度,显示80%的意思是 我们阿里产品详情描述显示宽度是750,也就是说750宽度属于是100%,那么80%的意思就是这个表格的宽度是600. Border=“1”的意思是边框的宽度是1像素。关于表格,我们在阿里详情描述中我建议一定要使用。而且尽量使用阿里给出的表格样式,即这种灰色边框的显示模式,当然如果你觉得不好看,可以自定义边框和表格背景等等风格,但是这样会加入大量的样式代码,加重搜索引擎的负担。但是好的一点是视觉效果会非常非常的漂亮。

  八,<a>

<a>标签的功能是定义超链接,这个是一个非常非常重要的标签。有的朋友想在产品的详细描述中加入其他产品的链接,或者是在图片上加入其他产品的链接,这个时候就必须用到这个标签了。下面用代码和图样的形式来说明:

<a href=”www.alibaba.com” target=”_blank”>abstract oil painting</a>

在网页上显示的风格如图:


这个时候如果我们点击上图里面的  abstract oil painting   我们就会打开阿里巴巴的主页。如上面的代码<a>……</a>里面红色文字是我的文本文字。我就是在这些文字上加的超链接。href=www.alibaba.com   这个代码说明我加入的超链接是  www.alibaba.com   也就是阿里巴巴国际站的首页网址。target=”_blank”  的意思是点击后在新窗口打开页面。如果想在图片上加入超链接,我们只需要把红色文本换成<img>标签且链接图片即可实现图片上加入链接哈。在阿里的实际操作过程中,我们可以在关键词上加入超链接来导向我们的相关产品来增加关键词对这个关键词的关注度,来增加它的权重。

 九,<img>

<img>标签表示是在网页中插入图片信息。这里需要说明的是这个标签也是单独出现的。它的代码格式是:

<img src=”图片链接地址” alt =”图片优化关键词” width=”120″ height=”120″ />

这个标签的功能实现主要是 src =”#”。这里的#号代表的是图片的链接地址,只要加入这个地址,图片就可以在网页上显示出来。Width 和height 是控制图片在网页中显示的宽度和高度的。单位是像素。这里的Alt 是阿里进来刚开放的功能。它的功能是对图片的搜索优化,当我们在阿里详细描述中插入图片的时候,Alt 的默认值是图片的名称,如果你的图片是数字编号,比如:001,那么Alt的值就是001。这个时候就需要我们切换成HTML的编辑模式对图片的Alt值进行修改,修改成我们优化的关键词或者其他跟图片相关的文字信息。

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量