1、TDK优化
新网站一定要提前想好TDK,这将对SEO起到非常重要的左右,因为搜索引擎首先抓取的就是这个。
TDK指的是什么呢?
- T:title 网站的标题,包含网站名称和网站的定位关键词,不宜太长。
- D:description 网站简介,最好保持在50字以内。
- K:keywords 网站关键词,最好保持在2-30字以内。
TDK在页面头部的meta标签,还有一些其他的,比如:author 网站的作者等等。
代码如下:
<head> <title>w3h5 - 前端资源网</title> <meta name="description" content="w3h5资源网是一个WEB前端资源分享网站,提供技术经验和一些常用的网站工具等。"> <meta name="keywords" content="WEB前端,前端资源网,w3h5"></head>
2、习惯使用语义化标签,比如h1、h2…标题标签等。
url采用绝对网址,或者使用网站伪静态,因为搜索引擎是不会抓去动态内容的。
优化HTML、js、css、php等的代码格式。
3、路由跳转优化
使用React或者Vue开发的很多网站都是在click方法里跳转路由,修改为a标签跳转,方便爬虫的进一步抓取
<Link target="_blank" to={`/resource/roommeet/3?p=${getLocalStorage("ParkID")}`} onClick={() => { }}></Link>
4、url优化
上一步中a标签的url爬虫会进行抓取,确保你的url可以包含下个页面需要的所有数据
http://localhost:8000/policy?p=1295034796212309&pr=0&pt=1%2C2%2C3
上述链接中就传了下个页面需要的三个参数
- 数据id
- 选项标签的选中状态(如下图)
状态标签选中变化url代码如下:
<Link key={tag.ID} to={changeUrlParams(window.location.search, { pt: this.changeValues(tag.TagValue, selectPolicyTypeValues) })} className={"classify" + (this.isContains(tag.TagValue, selectPolicyTypeValues) ? " classify-checked" : "")} onClick={() => mtaH5Click(statisticsEvent.policyFiltering)}> {tag.TagName}</Link>
// 判断多选是否包含isContains(tagValue, tagValues: any[] = []) { if (tagValues.length === 0) return false; if (tagValues.indexOf(tagValue) > -1) return true; else return false;}// 多选Value的更替changeValues(tagValue, tagValues: any[] = []) { const newTagValues = this.isContains(tagValue, tagValues) ? tagValues.filter(t => t !== tagValue) : [...tagValues, tagValue]; if (newTagValues.length > 0) return newTagValues.join(","); else return null;}
/** 变更Url参数 */export function changeUrlParams(url: string, params: {}) { let index = url.indexOf("?"), isOnlyP = true, beforeIndexUrl = index > -1 ? url.substring(0, url.indexOf("?")) : url, afterIndexUrl = index > -1 ? url.substring(url.indexOf("?")) : "", pIndex = afterIndexUrl.indexOf("p"); if (pIndex > -1) { const afterP = afterIndexUrl.substring(pIndex); isOnlyP = afterP.indexOf("&") === -1 ? true : false; } for (let key in params) { if (params.hasOwnProperty(key)) { let value = params[key]; const isValueNull = (typeof (value) === "string" && value.trim() === "") || value === null; value = isValueNull ? null : standardEncoding(value); if (afterIndexUrl.indexOf("&" + key + "=") > -1 || afterIndexUrl.indexOf("?" + key + "=") > -1) { if (isValueNull) { const regex = new RegExp("(&" + key + "=)([^&]*)+", "ig"); afterIndexUrl = afterIndexUrl.replace(regex, ""); } else { const regex = new RegExp("(" + key + "=)([^&]*)+", "ig"); afterIndexUrl = afterIndexUrl.replace(regex, function (_matchStr, g1) { return g1 + value; }); } } else { if (afterIndexUrl.indexOf("&") === -1) { if (!isValueNull) { const symbol = isOnlyP ? "&" : "?"; afterIndexUrl = afterIndexUrl + symbol + key + "=" + value; } } else { if (!isValueNull) { afterIndexUrl = afterIndexUrl + "&" + key + "=" + value; } } } } } url = beforeIndexUrl + afterIndexUrl; return url;}