SEO和体验并重的超链接设计

news/2024/5/21 13:19:51/文章来源:https://blog.csdn.net/weixin_34212189/article/details/91769164

为什么80%的码农都做不了架构师?>>>   hot3.png

如果你要了解PJAX,请看:
AJAX + window.history.pushState/onpopstate (需要HTML5支持)
https://github.com/defunkt/jquery-pjax

我下面说的是锚点链接(书签链接)这个方案:
AJAX + window.location.hash/onhashchange (兼容IE8)

拿首页分页链接来说:

<a href="/index.php?page=3" onclick="page(3);return false;">3</a>

搜索引擎的爬虫会根据href访问/index.php?page=3获取第3页数据,利于SEO.
用户在浏览器里右键选择"在新标签页中打开"也能正常访问到/index.php?page=3.
如果用户在页面直接点击链接,则触发click事件,
由JS通过AJAX加载并渲染局部数据,
以及设置location.hash为/index.php#/page/3.

location.hash = "#/page/3";

浏览器能够自行记住location.hash历史记录,
我们只需监听location.hash改变的事件hashchange(支持IE8,不支持IE7/6)
就能实现用户点击浏览器返回按钮时重新加载页面的效果.

$(window).on("hashchange", function(){alert(location.hash); //假如输出#/page/2var arr = location.hash.split("/"); // ["#", "page", "2"]switch(arr[1]) {cace "page":ajax_page(arr[2]); //AJAX局部加载第2页数据//location.href = "/index.php?page="+arr[2]+"&"+new Date().getTime(); //直接访问第2页break;case "post":ajax_post(arr[2]); //post.php?id=1024&ajax=1478791719965break;}
});

分页:
index.php?page=3
index.php#/page/3
ajax_page(3); //index.php?page=3&ajax=1478791719965
文章页:
post.php?id=1024
post.php#/id/1024
ajax_post(1024); //post.php?id=1024&ajax=1478791719965
URI中带有参数ajax的请求,PHP返回JSON数据:

{"title":"标题","main":"<div id=\"main\">正文(JS统计需要放这里)<\/div>"}

参数ajax的内容是时间戳,避免浏览器使用缓存.
可以考虑把参数ajax的内容设为"年月日时分"的组合,让数据在浏览器缓存1分钟.
2016-08-01 08:06:00
2016-08-01 08:07:00
像PJAX一样,ajax_page是用户点击触发的,所以并不需要获取keywords那些SEO的东西,只需更新标题和内容即可.

<title>标题</title>
<div id="main">正文(JS统计需要放这里)</div>
document.title = data["title"];
$("#main").html(data["main"]);

 

转载于:https://my.oschina.net/eechen/blog/784973

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

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

相关文章

HTML5+CSS3 效果网站集合

1、jquery插件库 HTML5制作3D樱花漫天飞舞 http://www.jq22.com/jquery-info3547 2、17素材网 http://www.17sucai.com/pins/tag/532.html 3、jquery之家 http://www.htmleaf.com/html5/ 心怀梦想,勿忘初心

微软ASP.NET网站部署指南(9):部署数据库更新

1. 综述 无论什么时候&#xff0c;程序都有可能像代码更新一样更新数据库。本章节你将进行数据库改动&#xff0c;測试。然后部署到測试环境和生产环境。 提醒&#xff1a;假设依据本章节所做的操作出现错误信息或一些功能不正常的话&#xff0c;请务必check Troubleshooting页…

向网页设计师推荐15个很棒的网站

网络上各种各样的社区网站数不胜数&#xff0c;但专注于创意设计的很少。今天这篇文章收集了15个非常好的专注于设计的网站推荐给设计师们&#xff0c;不管是学习先进的设计理念&#xff0c;还是寻找免费资源与工具&#xff0c;这些网站都是很不错的去处&#xff0c;记得推荐和…

个人建站

建站准备&#xff1a; 1.一台公网服务器 2.一个域名 说下我自己吧&#xff0c;为什么会想建站呢&#xff0c;首先对小程序感兴趣的时候&#xff0c;发布自己的小程序需要备案过的域名&#xff0c;其次希望之后做的东西能有个桥梁去连接&#xff0c;自己有时候琢磨点东西会方…

开发网站性能分析及优化

2019独角兽企业重金招聘Python工程师标准>>> 从程序角度分析网站&#xff0c;都是个人拙见&#xff0c;记录看看。 1、网站打开体验&#xff0c;速度慢的优化方案&#xff1a; 优化方案 前端架构优化&#xff1b;调整浏览器缓存、并发、异步特性&#xff1b;…

大学三年,我靠每天在这些网站学习,进入了梦寐以求的大厂

国内 1.慕课网(https://www.imooc.com/) 慕课网的资源还是比较丰富的&#xff0c;而且免费的不少&#xff0c;初次踏进编程这坑就是从他开始。里面还有很多大佬的录制&#xff0c;如Android大佬郭霖。 2.极客学院(https://www.jikexueyuan.com/) 极客学院收费的居多&#xff…

这个神奇的网站,竟让我学会了所有数据结构

在无意中发现了一个神奇的数据结构演示网站。他以动画的形式演示数据的存储、查找、删除过程&#xff0c;相信配合上动画&#xff0c;各种数据结构也会轻松拿下。 https://www.cs.usfca.edu/~galles/visualization/Algorithms.html 一、栈 二、各种排序 三、红黑树 四、队列

关于基于MVC网站架构的思考

关于MVC的定义 比较完整的参考&#xff1a;https://www.wikidata.org/wiki/Q44860 MVC是一种设计模式Software Design Pattern&#xff0c;不管在桌面应用亦或是网站程序中&#xff0c;都是比较常用流行的一种架构设计。M代表Model&#xff0c;V代表View&#xff0c;C代表Con…

关于使用PHP网站作采集用途的看法(其一)

记得几年前&#xff0c;“我”还是有点洞察力的“萌新”&#xff0c;曾有人建议“我”为网站修改“自动采集”功能。这的确是一个很好的想法&#xff0c;不需要额外的编程语言和IDE工具&#xff0c;自动增加网站内容的同时&#xff0c;还能为网站编辑减轻不少负担并提高编辑的创…

Python + Selenium:自动翻页爬取某图片网站指定图集

简单来说&#xff0c;爬取工作前期任务是了解目标网站的体系结构和“反爬策略”&#xff0c;然后是根据现有软硬件资源环境条件设计代码&#xff0c;反复迭代测试&#xff0c;最终实施部署。 之前&#xff0c;写过爬取图片网站的PHP和Python代码spi之类&#xff0c;通过读取HT…

Python + Selenium: 爬取某社交门户网站新闻栏目焦点

以前通过直接获取的HTML文本内容分析过&#xff0c;但是明显毫无结果。彼时深切体会到要想测试爬取“普通”反爬虫策略级别以上的网站内容&#xff0c;必须从浏览器内核级别入手。因为只有彻底模拟浏览器的行为&#xff0c;才无法被机器人100%识别为爬虫而遭到限制或拒绝服务。…

多层次应对HTTPS网站超时:selenium.common.exceptions.TimeoutException

现在网络越来越普及&#xff0c;带宽速度普遍也有较大提升。伴随网络的普及&#xff0c;同时快速增长的还有网民的数量和网络流量。网站超时响应的“通病”&#xff0c;仍然是无法完全避免的。尤其是在网络流量高峰期访问HTTPS网站&#xff0c;使用类似Selenium的浏览器内核驱动…

阿里云轻量服务器部署PHP网站(基于Lamp)

一&#xff1a;首先登陆阿里云账户购买轻量服务器&#xff08;这里就不详细介绍啦&#xff09;【轻量服务器会提供PHP,Apache,Mysql,不需要我们自己安装&#xff0c;方便很多】 如果是选择阿里云ecs服务器的话可以参考&#xff1a;https://blog.csdn.net/qiaosym/article/deta…

[转载]使用IntelliJ IDEA开发SpringMVC网站(一)开发环境

访问GitHub下载最新源码&#xff1a;https://github.com/gaussic/Sp... 文章已针对IDEA 2016做了一定的更新&#xff0c;部分更新较为重要&#xff0c;请重新阅读文章并下载最新源码。另外&#xff1a;文中的附图部分仍然为旧版本&#xff0c;请参照自身版本进行配置。 前言 由…

ASP.NET 2.0中轻松实现网站换肤

&#xff1a; 查看个人网站 查看详细资料 &#xff1c;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&#xff1e; &#xff1c;html xmlns"http://www.w3.org/1999/xh…

JQuery 的跨域方法 可跨任意网站

因发现有不少博友发园内短信问及JS的跨域问题&#xff0c;我想很多程序员的脑海里面还认为JS是不能跨域的&#xff0c;其实这是一个错误的观点&#xff1b;有很多人在网上找其解决方法&#xff0c;教其用IFRAME去解决的文章很多&#xff0c;真有那么复杂吗&#xff1f;其实很简…

推荐一个可以往blog里面加入旅行线路图的travel map网站

今天无意中发现这个网站&#xff0c;Free Travel Map Widget&#xff0c;可以很方便的做一个travel map&#xff0c;然后生成html代码放到blog里面。效果可以看看我之前的泰国和欧洲的blog更新&#xff0c;加了map。转载于:https://www.cnblogs.com/fresky/archive/2010/11/03/…

高性能网站建设之减少Http连接数

关于CSS背景图合并工具&#xff0c;请大家参看随笔&#xff1a;Css背景图合并工具功能增强&#xff08;V0.1&#xff09; 在对大访问量网站进行性能优化时&#xff0c;其中有一点是尽量减少http连接数&#xff0c;道理很明了&#xff0c;减少了单个PV的http连接数&#xff0c;…

通过脚本方式导出SharePoint网站集用户及其角色列表

这是课堂上的一个例子&#xff0c;分享出来给大家参考用。如果你管理一个或者多个网站集&#xff0c;那么这个脚本将有助于你快速地了解用户信息。 管理员们&#xff0c;懂点脚本还是很有用的哦&#xff0c;呵呵 将下面的脚本保存为一个ps1文件function Get-UsersWebPermission…

php与mysql网站开发..._Mysql 与 php动态网站开发 入门教程,mysql网站开发_PHP教程...

Mysql 与 php动态网站开发 入门教程&#xff0c;mysql网站开发这个系列的教程由表单开始写&#xff0c;因为表单可以把数据库和web 之间的交互表现得很明显。提交表单 &#xff0c;数据库记录注册信息。本教程属于基础教程。大神请略过。对于php和mysql之间的稳固性很受程序员的…