HTML5 pushstate和SEO链接 [英] HTML5 pushstate and SEO link
问题描述
我尝试在我的网站上实现pushstate历史记录，以便从index.php容器中的single.php页面加载内容。
我的网站有两个主要内容page：index.php和single.php。
在index.php上有一些调用pushstate脚本的链接：
< a class =phplinkhref =/ Formlabs-3D-printertitle =Formlabs 3D printer> Post 12< / a>
< a class =phplinkhref =/ Minimal-Bumper-for-iPhone-5title =iPhone 5的最小保险杠> Post 11< / a>
在我的single.php页面上，我使用isset get方法动态加载与点击链接相对应的内容index.php：
<？php
if（isset（$ _ GET [page]））{
//我为了回应内容
做了一些事情吗？>
在我的.htaccess文件中，我重写了url链接（在index.php链接中的原因是清理）：
期权+ FollowSymLinks
RewriteEngine on
RewriteRule /（[a-zA-Z0- 9 \ - ] +）$ /index.php
RewriteRule /（[a-zA-Z0-9 \ - ] +）$ /single.php?page=$1 [L]
这里是我的pushstate脚本：
$ ajaxSetup（{缓存：假}）。
$（。phplink）。click（function（）{
var $ post_link = $（this）;
load_content（$ post_link.attr（'title'），$ post_link。 attr（'href'））;
返回false;
}）;
window.onpopstate = function（event）{
if（event.state）{
load_content（event.state.title，window.location.pathname，true）;
} else {
var stateObj = {
title：document.title，
url：window.location.pathname，
};
url = window.location.pathname;
load_content（url，url）;
}
}
函数load_content（title，url，skipHistory）{
$ .get（url，function（data）{
document.title = title;
var stateObj = {
title：title，
url：url
};
if（！skipHistory）{
if（typeof window） .history.pushState =='function'）{
window.history.pushState（stateObj，title，url）;
}
}
if（url.substring（1） ！=''）{
$（＃ajaxify_container）。html（loading ...）;
$（＃ajaxify_container）。load（'single.php？page =' + url.substring（1）+'＃container-2'）;
}
else {
$（＃ajaxify_container）。html（''）;
}
}）;
}
我的pushstate脚本用于在链接点击时加载内容（在<$ c $上） c> .phplink 点击）。
它也适用于后退/前进按钮。
第一个问题：当我刷新浏览器（在网址中使用pushstate链接）时，它适用于Google Chrome （将内容从single.php加载到index.php容器中）但在IE10中没有（没有加载，它保留在index.php页面上）。
第二个问题：如果我禁用了javascript来查看googlebot（针对SEO）会发生什么。我无法加载/访问single.php页面，它始终保留在index.php上。所以single.php页面不能被搜索引擎抓取（我想，但我不确定这一点）。
这种行为是正常的，因为我在.htaccess文件中设置了所有这些链接将重定向到index.php。
我这样做因为没有它pushstate在刷新时加载single.php页面。我不想要这种行为。我想刷新它时只需将single.php中的内容加载到index.php容器中。
所以我的主要问题（问题2）是：我不知道怎么做在我的php页面中编写我的脚本或我的链接，以便在我点击时加载我的index.php文件中的内容，我刷新并向后/向前。
在pushstate的正常行为中，在浏览器刷新时，onpopstate可以将页面中的内容加载到另一个页面的容器中（将内容从single.php加载到index.php的容器中）？
我希望有人可以帮助我并解释它是如何工作的。我很难理解链接是如何工作的。
对不起我的英文，我是法国人......
我找到了一种让它工作得很好的方法！
我制作了一个使用pushstate for HTML5 web浏览器的脚本在HTML4网页浏览器中使用hashbang回退（自IE8以来可以正常工作）
为了解决刷新浏览器问题（不使用.htaccess中的重写规则），我添加了一个小脚本在single.php页面的头部，为了在获取窗口的路径名时将index.php重定向（仅当你启用了javascript）。
single.php脚本（在头顶，在头顶！）：
self.name = window.location.pathname;
window.location.replace（。）;
pushstate和hashbang回退的脚本：
if（self.name）{
refreshdocumenttitle = document.title;
refrestitle = self.name;
refreshurl = self.name;
if（typeof（window.history.pushState）=='function'）{
refrestitle = self.name.substring（1）.replace（/ - / g，）;
refreshurl = self.name.replace（＃！，）;
} else {
window.location.hash ='＃！'+ refreshurl.substring（1）;
}
load_content（refrestitle，refreshurl）;
}
$（文件）.on（'click'，'。link'，function（）{
link = $（this）;
if（ ！link.hasClass（'current'））{
$（。link）。removeClass（'current'）;
link.addClass（'current'）;
$ post_link =链接;
load_content（$ post_link.attr（'title'），$ post_link.attr（'href'））;
返回false;
}
返回false;
}）;
window.onpopstate = function（event）{
$（。link）。removeClass（'current'）;
url = window.location.hash;
if（url！=''）{
title = url.substring（2）.replace（/ - / g，）;
url =/+ url.replace（＃！，）;
load_content（title，url）;
}
if（event.state）{
load_content（event.state.title，window.location.pathname，true）;
} else {
if（！self.name）{
if（typeof refrestitle！=='undefined'）{
pathname = window.location.pathname ;
if（pathname ==/）{
document.title = refreshdocumenttitle;
}
}
var stateObj = {
title：document.title，
url：window.location.pathname，
};
window.history.replaceState（stateObj，document.title，window.location.pathname）;
load_content（document.title，window.location.pathname，true）;
}
}
self.name ='';
}
$（窗口）.on（'hashchange'，function（）{
if（typeof（window.history.pushState）！=='function'）{
var hash =/+ location.hash.replace（＃！，）;
if（window.location.hash）{
load_content（hash.substring（1 ）.replace（/ - / g，），hash）;
} else {
load_content（，）
}
self.name ='' ;
}
}）
$（窗口）.trigger（'hashchange'）;
function load_content（title，url，skipHistory）{
$ .get（url，function（data）{
document.title = title;
var stateObj = {
title：title，
url：url
};
if（！skipHistory）{
if（typeof（window.history.pushState）=='function '）{
window.history.pushState（stateObj，title.replace（/ - / g，），url）;
} else {
if（url！=） {
window.location.hash ='＃！'+ url.substring（1）;
}
}
}
if（window.location.hash！ =|| window.location.pathname！=/）{
$（＃ajaxify_container）。html（loading ...）;
$（＃ajaxify_container） .load（'single.php？page ='+ url.substring（1）+'＃container-2'）;
}
else {
$（＃ajaxify_container）。 html（）;
}
}）;
}
在这个脚本中，如果路径名有hashbang或者是这只是一条正常的道路。如果浏览器可以支持pushstate，我将hashbang更改为普通路径名。
如果浏览器不支持pushstate，如果pathname有正常路径名，我会添加一个hashbang。
然后，对于HTML5历史记录，我使用onpopstate和HTML4我使用hashchange来支持back，prev按钮和刷新浏览器（因为我的脚本在single.php页面的头部）。
如果javascript被禁用或者如果浏览器无法处理hashbang或pushstate，单个页面可以正常加载，所有必要的信息都像普通页面一样显示。
所以一切都可以使用或不使用javascript。这是SEO友好!!
Googlebot使用每个动态single.php页面的正确内容抓取了我的所有链接！
I try to implement pushstate history on my website in order to load content from a single.php page inside a index.php container.
My website have two main page : index.php and single.php .
On the index.php there are links that call pushstate script:
<a class="phplink" href="/Formlabs-3D-printer" title="Formlabs 3D printer">Post 12</a>
<a class="phplink" href="/Minimal-Bumper-for-iPhone-5" title="Minimal Bumper for iPhone 5">Post 11</a>
On my single.php page I use isset get method to dynamically load content that correspond to clicked link on index.php:
<?php
if (isset($_GET["page"])) {
//I do some stuff in order to echo content
?>
In my .htaccess file I rewrite the url link (that the reason that in index.php link are cleans):
Options +FollowSymLinks
RewriteEngine on
RewriteRule /([a-zA-Z0-9\-]+)$ /index.php
RewriteRule /([a-zA-Z0-9\-]+)$ /single.php?page=$1 [L]
And here my pushstate script:
$.ajaxSetup({cache:false});
$(".phplink").click(function(){
var $post_link = $(this);
load_content($post_link.attr('title'),$post_link.attr('href'));
return false;
});
window.onpopstate = function(event) {
if (event.state) {
load_content(event.state.title, window.location.pathname, true);
} else {
var stateObj = {
title: document.title,
url: window.location.pathname,
};
url = window.location.pathname;
load_content(url,url);
}
}
function load_content(title,url,skipHistory) {
$.get(url,function (data) {
document.title = title;
var stateObj = {
title: title,
url: url
};
if (!skipHistory) {
if (typeof window.history.pushState == 'function') {
window.history.pushState(stateObj,title,url);
}
}
if(url.substring(1) != '') {
$("#ajaxify_container").html("loading...");
$("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');
}
else {
$("#ajaxify_container").html('');
}
});
}
My pushstate script works to load content on link click (on .phplink click).
It works also for back/forward button.
1st PROBLEM : When I refresh the browser (with an pushstate link in the url) it works on google chrome (load content from single.php to index.php container) but no in IE10 (nothing is loaded, it stay on index.php page).
2nd PROBLEM : If I disable javascript to see what's happen for googlebot (for SEO). I can't load/reach the single.php page, it always stay on index.php. So single.php page can't be crawled by search engine (I suppose, but I'm not sure about this) . This behaviour is normal because I set in my .htaccess file, that "all this links" will be redirect to index.php .
I do this trick because without it pushstate loads single.php page when I refresh. And I don't want this behaviour. I want when I refresh it just load content from single.php into index.php container.
So my main problem (problem 2) is: I don't know how to write my script or my links in my php page in order to load content in my index.php file when I click, I refresh and I back/forward.
In normal behavior of pushstate, does on browser refresh, onpopstate can load content from a page into a container of an other page (load content from single.php into a container of index.php) ?
I hope that someone can help me and explain how it works. I have some difficulty to understand how it work with links.
Sorry for my English, I'm French...
I found a way to make it works great!
I made a script that use pushstate for HTML5 web browser with an hashbang fallback in HTML4 web browser (it works since IE8)
To fix the refresh browser problem (without using rewrite rules in .htaccess), I added a little script on the head of the single.php page in order to redirect (only if you are javascript enable) to index.php while getting the pathname of the window.
single.php script (in the head, at the top of the head!):
self.name= window.location.pathname;
window.location.replace(".");
Script for pushstate and hashbang fallback:
if(self.name){
refreshdocumenttitle = document.title;
refrestitle = self.name;
refreshurl = self.name;
if (typeof(window.history.pushState) == 'function') {
refrestitle = self.name.substring(1).replace(/-/g," ");
refreshurl = self.name.replace("#!", "");
}else {
window.location.hash = '#!' + refreshurl.substring(1);
}
load_content(refrestitle, refreshurl);
}
$(document).on('click','.link', function(){
link= $(this);
if (!link.hasClass('current')) {
$(".link").removeClass('current');
link.addClass('current');
$post_link = link;
load_content($post_link.attr('title'),$post_link.attr('href'));
return false;
}
return false;
});
window.onpopstate = function(event) {
$(".link").removeClass('current');
url = window.location.hash;
if (url != '') {
title = url.substring(2).replace(/-/g," ");
url = "/" + url.replace("#!", "");
load_content(title,url);
}
if (event.state) {
load_content(event.state.title, window.location.pathname, true);
} else {
if (!self.name) {
if (typeof refrestitle !== 'undefined') {
pathname = window.location.pathname;
if (pathname == "/") {
document.title = refreshdocumenttitle;
}
}
var stateObj = {
title: document.title,
url: window.location.pathname,
};
window.history.replaceState(stateObj,document.title,window.location.pathname);
load_content(document.title, window.location.pathname, true);
}
}
self.name= '';
}
$(window).on('hashchange', function() {
if (typeof(window.history.pushState) !== 'function') {
var hash = "/" + location.hash.replace("#!", "");
if(window.location.hash) {
load_content(hash.substring(1).replace(/-/g," "), hash);
} else {
load_content("", "")
}
self.name= '';
}
})
$(window).trigger('hashchange');
function load_content(title,url,skipHistory) {
$.get(url,function (data) {
document.title = title;
var stateObj = {
title: title,
url: url
};
if (!skipHistory) {
if (typeof(window.history.pushState) == 'function') {
window.history.pushState(stateObj,title.replace(/-/g," "),url);
}else {
if( url != "") {
window.location.hash = '#!' + url.substring(1);
}
}
}
if( window.location.hash != "" || window.location.pathname != "/" ) {
$("#ajaxify_container").html("loading...");
$("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');
}
else {
$("#ajaxify_container").html("");
}
});
}
In this script, I check on load if the pathname have an hashbang or if it's just a normal path. If the browser can support pushstate, I change hashbang to normal pathname. If the browser don't support pushstate and if pathname have a normal pathname I add an hashbang.
Then, for HTML5 history I use onpopstate and for HTML4 I use hashchange to support back, prev button and refresh browser (because of my script in the head of the single.php page).
If javascript is disabled or if the browser can't handle hashbang or pushstate, the single page can be loaded normally and all necessary informations are displayed like a normal page.
So everything works with or without javascript. It's SEO friendly!! Googlebot crawled all my links with the right content of each dynamic single.php page!
这篇关于HTML5 pushstate和SEO链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
