时间:2023-03-17 06:02:01 | 来源:电子商务
时间:2023-03-17 06:02:01 来源:电子商务
眼见着移动互联网的时代已从浪潮之巅渐渐归于平淡,5G 技术即将带来的变革乃至颠覆尚未可知;眼见着微信、头条、阿里等越见丰盈的生态闭环不断蚕食某度的搜索市场。但仍有大把各色业务的 2C 网站们,依然不得不面对 SEO 的问题,不得不面对国内的 SEO 问题。为什么要强调国内,因为横亘于我等“生前”的有世界上最大的“中文搜索引擎”啊(手动滑稽)。这让我一度以为 SEO 是个玄学,你不得不忍受它可能对你忽冷忽热的奇妙态度,却又不忍心就此挥手说再见,大步向前不回头。先来一句“振聋发聩”之言:优质的内容永远都是最好的 SEO。 但如果你就一搞技术的,这就由不得你了。所以,我一搞技术的还能做点啥?
SEO(Search Engine Optimization):搜索引擎优化。网站维护者依循搜索引擎规则对自身网站进行优化,以期站内内容能在用户的搜索结果中占据尽量靠前的排名。时至今日,它依然是将产品推向用户、获取流量的最经济实惠又行之有效的方法之一。
<header> <footer> <main> <section> <aside> <nav>
等标签,我们看一眼就能大体知道,这块内容是要干嘛的。新加入的标签甚至对时间、日期等小语义都有照顾:<time> <data>
等。<div> <h> <p> <a>
等等这些“其貌不扬”的老兄弟们,所以不论是否能够用好新语义化标签,都不能失去本来的“阵地”。在此基础上,“勇猛精进”。<h1>
标签,代表该页面的主标题,其他的 headline 标签则根据实际的内容层级合理安排。<a>
标签,搜索引擎爬虫将根据其 href
属性提供的路径深入到站内的各个角落。<a>
标签构成了一张四通八达的大网,你要尽量保证 Spider 能在“网”上愉快地玩耍,但是也难免有的地方你并不想让它一探究竟,比如去“个人中心”的链接、出站链接等。这时,可以考虑不使用 <a>
标签,通过给元素绑定 click 等事件达到实际的跳页目的;或者也可以考虑给标签加上一个特殊的属性<a href="/" rel="nofollow">首页</a>
,来告诉 Spider “内部道路,游客止步”。<img>
标签,依图片内容及页面内容,给 img 一个 alt
属性,描述这张图片表达的含义并适当植入关键词。一来可以在图片加载失败的时候给用户一定的提示,二来可以告诉搜索引擎这张图片啥意思,方便其索引。<strong>
& <em>
标签包裹一下,以期向搜索引擎表达关键词强调的意味。<body>
标签内出现的语义化标签,也即页面的主体,机器能看,人也能看。而在 <head>
标签内还存在许多给机器看的标签,做 SEO 优化的同学们最熟悉的莫过于其中的 “SEO 三剑客” TDK 了。<title>
标签、<meta name="description">
标签和 <meta name="keywords">
标签。顾名思义,它们分别代表当前页面的标题、内容摘要和关键词,对于 SEO 来说,title 是其中最重要的一员。<title>
标签-
连接站名和几个关键词作为 title,比如:<title>w3cschool - 编程狮,随时随地学编程</title>
;而对于其他页面,则是短下划线 _
连接页面标题、关键词和站名的形式,比如:<title>Web入门微课_编程实战微课_w3cschool</title>
。description
<meta name="description" content="Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。">
。可以看到,正是搜索结果摘要显示的内容。keywords
<meta name="keywords" content="w3cschool,编程狮,web前端开发,菜鸟教程,编程入门教程,w3school,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql">
。它主要为搜索引擎提供当前页面的关键词信息,关键词之间用英文逗号间隔,通常建议三五个词就足够了,表达清楚该页面的关键信息,建议控制在 50 字以内。切忌大量堆砌关键词,毕竟在技术日新月异的今天,搜索引擎如果发现你的 title 信息文不对题都有可能主动帮你修改了,更不必说发现你想在越发无足轻重的关键词身上花的小心思了(似乎没有什么因果关系,手动狗头~)。<head>
标签中,并与 SEO 相关的标签们吧。<meta name="robots">
标签(通常含有 name 属性的 meta 标签都会有一个 content 属性相伴,这我们已经在 D 和 K “剑客”身上领略过了)。默认的,有这样的标签属性设置:<meta name="robots" content="index,follow,archive">
。它跟上文中提到的带有 rel
属性的 a 标签略有相似。<meta name="robots" content="index,follow,noarchive">
。rel
属性的 <link rel="" href="">
标签,它们分别是: - <link rel="canoncial" href="https://www.xxx.com" />
- <link rel="alternate" href="https://m.xxx.com" />
<link rel="canoncial" href="www.shop.com/goods/xxxx" />
,以此彰显第一个链接的正统地位,告诉搜索引擎,其他那俩都是“庶出”,不必在意。假如搜索引擎遵守该标签的约定,则会很大程度避免页面权重的分散,不至影响搜索引擎的收录及排名情况。它的含义与 http 301 永久重定向相似,不同之处在于,用户访问标记了 canonical 标签的页面并不会真的重定向到其他页面。<link rel="canoncial" href="https://www.xxx.com" />
- <link rel="alternate" href="https://m.xxx.com" media="only screen and (max-width: 750px)"/>
||-- home| |-- classify|list| | |-- list|detail | | | |-- detail| | | |
以上,基本上至多经过四级页面就可以从首页抵达产品详情页面。在路由设计的时候应保证用尽量少的路由层级使用户抵达最终的目标页面,不应该无节制地深入,使用户迷失在深似海的站内链接之中;同样的道理,搜索引擎分配在某个网站的资源是有限的,这也保障了搜索引擎能高效爬取到有用的页面。<meta name="robots">
算是“本家”。元信息标签存在于单个页面之中,并作用于它存在的那个页面;而 robots 协议则存在于网站根目录( http://www.xxx.com/robots.txt可被访问 ),作用于整站。User-agent: *Disallow: /
无视规则者依然会潜入你的网站横行无忌,像前些年(可能现在依然是)臭名昭著的YisouSpider。所以 robots 协议仅能作为指导 Spider “良民”在站内活动的行为准则,就像"请勿践踏草坪"一样,不要指望用它来保护站内隐私。想要拒绝流氓爬虫的骚扰,还是要在服务端依赖自身的技术手段。<field>:<optional space><value><optionalspace><#optional-comment>
,即字段、空格、值、空格、注释。其中,空格和注释是可选的,仅仅是为了增加文本可读性。User-agent | Disallow | Allow
三个,还有一个额外的 Sitemap
项,用来指向该站的网站地图所在的地方,是否支持视具体搜索引擎而定。我们通过前三个字段组合来制定一组规则,规则可以有多组。一组规则中,可以由一到多个 User-agent 开头,然后通过 Allow|Disallow 字段指定具体规则,至少有一条。组与组之间通过空行间隔,举个栗子:# first groupUser-agent: BaiduspiderUser-agent: GooglebotDisallow: /article/# second groupUser-agent: *Disallow: /Sitemap: https://www.xxx.com/sitemap.xml
以上: - 允许百度和谷歌的搜索引擎访问站内除 article 目录下的所有文件/页面(eg: article.html 可以,article/index.html 不可以); - 不允许其他搜索引擎访问网站; - 指定网站地图所在。<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.xxx.com/</loc> <lastmod>2019-12-17</lastmod> <changefreq>weekly</changefreq> <priority>0.5</priority> </url> <url> <loc>http://www.xxx.com/detail/xxx</loc> <lastmod>2019-12-17</lastmod> </url></urlset>
<urlset>
标签作为顶级标签,并指定 xml 命名空间<url>
父级标签包裹<loc>
子标签包裹页面链接<lastmod> | <changefreq> | <priority>
三个子标签作为可选项(function() { let bp = document.createElement('script'); const curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = `https://zz.bdstatic.com/linksubmit/push.js`; }else { bp.src = `http://push.zhanzhang.baidu.com/push.js`; } let s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s);})();
通常为了省事,会把它直接扔到公共代码块中全局加载,但这样也带来了一些问题: - 一些页面并不想被推送,然而因为全局公用,还是被推送了 - 一些页面可能早就被收录了,但是一旦页面被访问,链接依然会一遍又一遍被推送function canSubmit(toObj) { const toPath = toObj.path; let canSubmit = false; let isInScope = false; if( toPath === '/' // 首页 || (///search/u.test(toPath) && Number(toObj.query.page) === 1) // 搜索第一页 || ///detail//(article|news)/u.test(toPath) // 详情页 // ... ) { isInScope = true; } if(isInScope && process.env.TEST_ENV === 'prod') { canSubmit = true; } return canSubmit;}
在几年前,百度曾在 百度统计贴吧 发帖称,百度统计代码同样带有自动推送的功能。以上。它们仅仅是我知道的一些,茫茫知识海洋,大概还有许多我不知道的细节等待着继续探索~~~
原文链接举起你的小手,点赞关注交流批评……啦~
关键词: