你一定不知道,在前端代码规范上,还有 SEO 代码规范,作为学习前端的你稍后了解呢?SEO 代码规范一方面是为了获取流量,如果你能运用得炉火纯青,在移动端和 PC 端网站应用上,那么你就可以找老板谈谈了,有了排名,有了流量,就可以拿提成了!
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,为自己的网站获取免费流量;
以用户体验为核心,为目标用户提供高质量的内容;
对页面的代码和网页阅读体验,网站性能等进行优化,符合搜索引擎的规则,提升搜索引擎网页的自然排名。
T 深入浅出 SEO 优化规范
网站首页:
品牌词 - 产品中文全称、特色服务、xxxx
<title>品牌名-正品低价、品质保障、配送及时、轻松购物 !title>
list 页面:
产品和主题概述 - 品牌词
<title>广州装修公司排行,联系地址-品牌词title>
detail 页面:
具体产品或内容主题概述 - 品牌词
<title>广州番禺区百姓装潢设计_收费标准-品牌词title>
注:强调重点即可,重要的关键词出现不要超过 2 次,而且要靠前,不同页面的 title 要有所不同
150 字以内
不超过 150 个字符,描述内容要和页面内容相关。
对页面内容的高度概括,不可过分堆砌关键词,不同页面的 description 要有所不同
<metaname="description"content="品牌名-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>
Keywords 为产品名、专题名、专题相关名词,之间用英文半角逗号,隔开 ,告诉搜索引擎本页的重点、关键词。
<metaname="Keywords"content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜"/>
书写顺序
代码顺序按照 标题 -> 描述 -> 关键字 依次
索引方式
robot terms 是一组使用逗号,分割的值
通常有如下几种取值:none,noindex,nofollow,all,index 和 follow。确保正确使用 nofollow 和 noindex 属性值。
<metaname="robots"content="index,follow"/>
content 内地数字代表时间(秒),既多少时间后刷新。
如果加 url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
<metahttp-equiv="refresh"content="0; url="/>
语义化的好处
符合 W3C 规范
代码结构清晰,方便阅读,有利于团队合作开发
语义化代码让搜索引擎容易理解网页,有利于搜索引擎优化(SEO)
语义化内容标签如下:
TIP
img要加上alt属性加以说明
标题使用caption标签
h1一个页面只可有一个,首页多用于包含 logo,其他页面用于主标题
h2模块标题
h3段落的小节标题
h4, h5, h6基本上不使用
5、强调内容的重要性
strong和em都表示强调
strong 显示为粗体 em 显示为斜体,且 strong 的强调程度要比 em 更高
<em>强调文本em><strong>强调文本strong>
<mark>mark>
<p>文章发表于<timedatetime="2022-06-01 12:00">2022-06-01time>p>
<address>address>
<figure><figcaption>标题/说明figcaption>figure>
br只用于文本内容的换行
输入法输入banquan,按序号选择版权符号
TIP 语义化标签在 SEO 优化中的应用
<header>header><section><h2>标题h2><p>段落内容p>section><section><h2>标题h2><imgsrc="./img/pic.jpg"width=""height=""alt="图片说明"/>section><section><h2>标题h2><p>段落内容p>section><footer>footer>
注:对页面中的内容进行分块,一个section元素通常由标题以及内容组成不推荐那些没有标题的内容使用 section 标签
<article><header><h2>标题h2><p>发表日期:<timedatetime="2022-06-01 12:00">2022-06-01time>p>header><p>文章内容段p><p>文章内容段p>article>
对比:它比section具有更明确的语义,代表一个独立的、完整的相关内容块,可以包含一个或多个section
aside:独立于内容的一部分,且可以被单独的拆分出来而不会使整体受影响,常用于定义页面侧边栏
只能有一个:用来呈现文档或应用的主体部分,一个页面只能有一个main标签
页面中的 header
<header><h1role="logo"><ahref="/">文字Logoa>h1><nav><ahref="/">首页a><ahref="/product">产品介绍a><ahref="/about">关于我们a>nav>header>
分块中的 header
<section><header><h2>标题h2><p>信息介绍p>header><p>分块内容段p>section>
文章中的 header
<article><header><h2>标题h2><p>发表日期:<timedatetime="2022-06-01 12:00">2022-06-01time>p>header><p>文章内容段p>article>
注:article、section、aside、nav 标签都可以拥有自己的 header 和 footer 标签
增强语义性:用来增强语义性,当现有的 HTML 标签不能充分表达语义的时候,可以借助role属性来说明
注:
重要内容尽量靠前放
搜索引擎抓取HTML的顺序是从上到下的,而有的搜索引擎对抓取的内容长度有一定的限制
重要内容不要用 JS 输出
搜索引擎不会抓取JS的生成内容
其他
页面结构尽量扁平化,目录结构不宜过深,最好不超过三级,每级都有面包屑导航,成树状结构分布。否则不利于搜索引擎抓取
做404页面,不仅提高蜘蛛体验,也提高用户体验
相关标签: