H5网站SEO前端处理优化

news/2024/5/13 21:12:48/文章来源:https://blog.csdn.net/weixin_36445197/article/details/108829015
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标签跳转,方便爬虫的进一步抓取

<Linktarget="_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
  • 选项标签的选中状态(如下图)
    1
    状态标签选中变化url代码如下:
<Linkkey={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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_812642.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某网站Redis与MySql同步方案分析

后续文章&#xff1a; 通过Canal保证某网站的Redis与MySql的数据自动同步 1.编写目的 某网站项目引入了redis缓存技术&#xff0c;如何保证Redis与MySql的数据一致性是开发人员需要首要解决的问题。 本文主要包括以下内容&#xff1a; Redis与MySql的数据一致性方案汇总与选…

基于django的视频点播网站开发-step7-我的收藏喜欢功能

从本讲起&#xff0c;我们会讲到个人菜单中另外两个比较重要的功能&#xff0c;“我的收藏”与“我的喜欢”。感兴趣的同学可以点击网站的右上角&#xff0c;即可弹出个人菜单&#xff0c;你就能看到“我的收藏”与“我的喜欢”了。通过学习这两个功能&#xff0c;我们会加深对…

宝塔面板从安装到网站上线全过程

宝塔面板是一款很不错的主机面板程序&#xff0c;支持Linux、Windows系统&#xff0c;可选LNMP和LAMP Web环境&#xff0c;本文介绍从宝塔面板安装到网站上线全过程。本教程以阿里云Linux&#xff08;CentOS 7.4 64位&#xff09;服务器为例&#xff1a;一&#xff1a;SSH登录服…

大型网站技术架构(八)网站的安全架构

2019独角兽企业重金招聘Python工程师标准>>> 从互联网诞生起&#xff0c;安全威胁就一直伴随着网站的发展&#xff0c;各种Web攻击和信息泄露也从未停止。常见的攻击手段有XSS攻击、SQL注入、CSRF、Session劫持等。 1、XSS攻击 XSS攻击即跨站点脚本攻击&#xff08;…

nginx 学习记录:IP+端口号配置网站、隐藏端口号、自签名证书配置Https、强制Https、自定义404...

2019独角兽企业重金招聘Python工程师标准>>> 几点心得 1. 如果没有显式声明 default server 则第一个 server 会被隐式的设为 default server 1. 443后面一定要加ssl,不然http会被重定向到https 1. 静态资源在上游服务器上&#xff0c;而不是当前nginx直接提供学习环…

大型分布式网站架构设计--第1章 面向服务体系的架构

本章目录&#xff1a; 分布式Java应用图&#xff1a; 分布式Java应用&#xff1a;大型系统会被拆分成多个子系统来实现&#xff0c;对于Java来说&#xff0c;这些子系统可能部署在同一台机器上不同的JVM&#xff0c;或者部署在不同机器上&#xff0c;但是这些子系统之间要进行…

ASP.NET网站发布到IIS后验证码不能显示与IIS模式

在VS2012上调试运行都正常&#xff0c;把网站部署到IIS后&#xff0c;登陆界面的验证码不能显示了&#xff08;验证码是通过另一个页面嵌入到登陆页面上的&#xff09;&#xff0c;在网上看到了好多解决方案&#xff0c;启用父路径&#xff0c;验证码的路径问题&#xff0c;登陆…

如何在电脑上测试手机网站(全)

最近公司要开发网站的移动版&#xff0c;让我准备准备知识&#xff0c;话说本人开发移动网站的经验还真不多&#xff0c;最悲剧的事情就是我的手机是个经典的诺基亚&#xff0c;而且公司还不给配手机&#xff0c;这是有多讨厌&#xff0c;没办法&#xff0c;没有手机只能用电脑…

基于WordPress搭建个人网站

文章目录阿里云服务器域名申请和备案安装Xshell和Xftp下载安装安装宝塔面板网站部署忘记密码欢迎来我的小站溜溜弯: life.yuweizhang.top 阿里云服务器 1.登录阿里云服务器官网&#xff0c;然后进行注册&#xff0c; 实名认证&#xff08;如果是学生可以进行学生认证&#xff…

lnmp如何设置二级域名并绑定网站

1. 解析二级域名 我用的是阿里云esc&#xff0c;直接找到域名解析这个页面&#xff0c;然后添加下你要解析的二级域名前面的字母&#xff0c;我的是music&#xff0c;这个可以根据自己的需求来起。 2. 测试二级域名是否成功解析 这个我们直接用万能的ping来测试一下就好了&…

卢松松:SEO 3.0其实早就不是新鲜事

何为SEO3.0? SEO1.0&#xff1a;是否有好的内容? SEO2.0&#xff1a;是否有较高的权重? SEO3.0&#xff1a;是否满足用户需求? 从去年开始陆续看到国内外的SEO专家在谈SEO 3.0&#xff0c;大多的意思都是指SEO以内容为基础去提供使用者最佳的使用经验&#xff0c;我们来…

中秋国庆长假,SEO你在坚持吗?

中秋国庆长假&#xff0c;举国同庆&#xff0c;无数人准备了丰富的游玩和放松计划&#xff0c;苦逼的SEO们&#xff0c;你们又在干嘛呢&#xff0c;在坚持自己的这份爱好么&#xff1f;还是和好多人一样&#xff0c;拼命的去挤下这拥堵的马路&#xff0c;上无数商家设下的购物陷…

SEO职业生涯规划的参考意见

步入SEO行业的人都有一个梦想&#xff0c;都是依靠SEO技术去赚钱。然而笔者观察了附件很多朋友&#xff0c;其中不乏有SEO界大牛人物&#xff0c;其已经利用SEO赚到了钱&#xff0c;也依靠SEO工作维持自己的生活&#xff1b;但也有一些SEO爱好者&#xff0c;他学过SEO&#xff…

中国联通网上营业厅,12306式的网站?

就在今日下午&#xff0c;笔者登陆联通网上营业厅办理套餐变更业务时&#xff0c;发现了下图一个“迷魂阵”似的矩阵&#xff0c;笔者顿时眩晕&#xff0c;不知道点击何处&#xff0c;作为读者的你们&#xff0c;你们看到下图觉得我办理66元A套餐该点击哪里? 于是我发了一条微…

公网ip访问服务器网站(博客)

本博客是关于如何用服务器的公网ip访问在服务器搭建好的网站&#xff0c;本人是在用xampp wordpress搭建博客时&#xff0c;用公网ip无法访问博客&#xff0c;在网上找了很多博客&#xff0c;试了很多方法&#xff0c;还是没有解决&#xff0c;最终无奈&#xff0c;只能想服务…

android混淆 网站,android混淆-关于依赖第三方库

之前写过关于打包混淆的一个帖子《android项目混淆打包注意事项》&#xff0c;它介绍的是对第三方jar包进行混淆&#xff0c;基本上可以解决混淆问题了。还不知道的&#xff0c;可以去看看&#xff0c;地址在这&#xff1a;http://my.eoe.cn/smile_it/archive/3820.html。现在的…

html5手机网站需要加的那些meta/link标签,html5 meta全解

一、大众机型常用meta标签name的设置 1、name之viewport <meta name"viewport" content""> 说明&#xff1a;屏幕的缩放 content的几个属性&#xff1a; width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值&a…

我国十大盗版网站:百度占前三

日前&#xff0c;国务院发展研究中心所属中国企业评价协会在北京召开新闻发布会&#xff0c;发布了《知识产权白皮书出版业》。“白皮书”中称&#xff0c;目前我国网络数字化盗版严重&#xff0c;搜索引擎成为盗版内容的重要出口&#xff0c;其中百度、百度贴吧和百度文库成为…

8 个接私活的网站

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群2019互联网圈不好混&#xff0c;不是每个公司都能像腾讯云每人一部iPhone 11&#xff0c;不少公司今年已经没了年终奖&#xff0c;不要抱怨&#xff0c;因为有的小伙伴估计工作都没了。师长今天给大家推荐…

linq版本E-Commerce网站示例

在家把E-Commerce的代码换成了linq版本的,代码量少了很多,看来做的工作越来越少,程序员的工资又要跌了...代码不保证全部正确,只用于学习,需要的可以看看,运行环境当然是.net3.5了...值得注意的是,当表关系不存在一对一或多对多的时候,你还是需要手动创建实体.如购物车和产品两…