SEO优化幕后功臣非前端工程师莫属
表面上看来一个成功的SEO优化策略是因为专案经理规划领导有方,但若是没有幕后的工程师执行,恐怕效果是大打折扣!
HTML 5 的语意标记,对前端工程师/前端设计师来说,是不知不可的网路行销课程网页设计基础,决定了网页配置的逻辑;对于 SEO优化从业人员来说,虽然 HTML 5 的作用不是让网页可以被搜寻引擎自动撷取资料,但是却可以让搜寻引擎理解网页每个部份 (Section,在此有人翻成区块) 的排列逻辑、以及每个部份的作用等等,例如透过<header>告知搜寻引擎哪里是页头、<nav> 告知搜寻引擎哪里会列出导览内容等等,还 可以用来搭配 Schema 语意标记,协助搜寻引擎正确完成索引。
常见的 HTML 语意标记如下表所示:
标签名称 |
说明 |
<section> 区块 |
<section>主要是告知搜寻引擎「这是一个段落」,包覆的对象不以文章为限。 里面含标题<h1>-<h6>与内容<p>, 主要用途是告知搜寻引擎一个区块的主要内容 (内容就是这个<section>的标题) |
<article> 文章区块 |
<article>跟<section>性质相近,都有含标题<h1>-<h6>与内容。 但是相较于<section>,更强调所包覆的对象是「文章」 |
<header> 表头 |
以前用<div>架构会像这样写<div class="header">、<div class="footer">, HTML5 则可以分别使用<header>与<footer>标签来取代。在任何区块下的架构, 如果需要详细区分表头表尾时,就可使用<header>以及<footer>来架构,用于<body>标签下是最普遍的, 因为<body>的架构较大,需要清楚区分表头与表尾。 |
<footer> 表尾 |
|
<aside> 侧边栏位 |
逻辑上跟<header>以及<footer>的使用方式一样,只是位置是强调在「侧边」。 多用于WordPress、部落格、新闻网站常见的右边侧边栏, 显示最新文章、文章排行榜、其他连结、广告、推荐文章等等的讯息区块,就很适合用<aside>来做布局。 <aside>的语意算是跟本文无关的区块,也就是额外资讯,通常放的是跟主要文本无关的其他额外资讯 |
<main> 主要区块 |
在 HTML5 中用来放置这个页面主要的资讯,有点像以前的<div class="content"> 。 且每个页面中只能有一个<main>标签,且不能被置于在<nav><article><aside><footer><header>之中。 但是<article><aside><section>则可以可安被置于<main>当中。 |
<nav> 主要区块 |
网站内的导航区块,都适合使用<nav>来做架构,像是主选单、表尾选单等。 |
排版范例
如同以下的范例,<header>的内容就会出现在网页的页头;<nav>则是导览项目;<main>则是网页的主要区块,包含了<article>和<aside>,<article>内又分成不同的区块(<sector>);<footer>则出现在页尾。
<header></header> <nav></nav> <main> <article></article> <sector></sector> <sector></sector> <aside></aside> </main> <footer> Updated on <time></time> </footer> |
既然语意标签和过去的<div>有相同的排版特性,那为什么要使用语意标签呢?最大的目的,是让搜寻引擎或是其他软体工具,可以更清楚的了解网页中每个区块的设计目的,让网页更容易被搜寻引擎"了解",因此有增强网页SEO优化的效果。
推荐阅读: