美文网首页SEO网络营销外包首页投稿(暂停使用,暂停投稿)
【SEO】优化技巧一:导航条当前菜单,不带参数,高亮显示

【SEO】优化技巧一:导航条当前菜单,不带参数,高亮显示

作者: hi_dhl | 来源:发表于2017-09-22 00:01 被阅读49次

1. 搜索引擎工作原理

搜索引擎分为四个部分:抓取,过滤,建立索引,输出结果。
搜索引擎通过个称之为Spider的序从一个网页或多个网页出发,逐步遍历网上的文件。Spider首先解析网页的HTML代码,查找该页面内的超链接,然后根据链接搜索网页,并建立关键字与其所在位置的对照表。搜索引擎为搜索到的网页建立索引并存入数据库中。当用户输入要搜索的关键字时,搜索引擎根据输入的关键字从数据库中查找匹配的网页,并将结果返回给用户。seo优化就是让搜索引擎更好搜索到你想让它搜到的内容. (摘自:http://blog.51yip.com/seo/720.html

2. 为什么做SEO的时候,网站页面最好静态化,地址栏不要带有参数?

对于搜索引擎而言,是不区分动态页面和静态页面的好坏的。
因为动态页面大部分都是带参数的,搜索引擎检索起来有难度的,尤其是url中包含的一些特殊字符?、&、#、=、%,最重要的URL中不能带中文,因为URL会对中文进行编码,一个汉子对应好几个不认识的字符,对搜索引擎是不友好的(注意:url中最好都是有意义的文件名,因为用户搜索时的关键词都是有意义的)
而静态页面更容易收录而已,并且静态页面的访问速度,比动态页面要快很多。

3. 动态页面如何静态化?

为了更好的缓解服务器压力,和增强搜索引擎的友好页面,所以将网页的内容生成静态页面。但是最大缺陷是每次在网站后台修改网页内容都需要重新生成静态页面, 因此我们需要用到伪静态,
伪静态是用正则判断需要跳转到的页面而不是真实页面地址

apache静态化的规则
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{QUERY_STRING} ^(.*)$
RewriteRule ^(.*)/index.html$ $1/index.php
RewriteCond %{QUERY_STRING} ^(.*)$
RewriteRule ^(.*)/about-([0-9]+)-([0-9]+)\.html$ $1/about.php?cid=$2&page=$3
RewriteCond %{QUERY_STRING} ^(.*)$
RewriteRule ^(.*)/news-([0-9]+)-([0-9]+)\.html$ $1/news.php?cid=$2&page=$3
RewriteCond %{QUERY_STRING} ^(.*)$
RewriteRule ^(.*)/(\w+)\.html$ $1/$2.php?
</IfModule>
Nginx静态化的规则
rewrite ^([^\.]*)/index.html$ $1/index.php last;
rewrite ^([^\.]*)/about-([0-9]+)-([0-9]+)\.html$ $1/about.php?cid=$2&page=$3 last;
rewrite ^([^\.]*)/news-([0-9]+)-([0-9]+)\.html$ $1/news.php?cid=$2&page=$3 last;
rewrite ^([^\.]*)/newsshow-([0-9]+)-([0-9]+)-([0-9]+)\.html$ $1/newsshow.php?cid=$2&id=$3&page=$4 last;
rewrite ^([^\.]*)/vote-([0-9]+)\.html$ $1/vote.php?id=$2 last;
rewrite ^([^\.]*)/(\w+)\.html$ $1/$2.php? last;
if (!-e $request_filename) {
    return 404;
}

4. 回到文章的主题,如何做到,导航条当前菜单,不带参数,高亮显示?

我最开始做的时候是传递参数去做判断, 当我做SEO的化的发现了这么一个问题,所以想了一个通用的解决方案,利用Jquery+css来解决这个问题,废话不多说,上代码

JS代码
$(function(){
    var href = window.location.href.split('/')[window.location.href.split('/').length-1].substr(0,4);

    if(href.length > 0){
        $(function(){
            console.error(href+" "+href.length+" "+"ul.h_nav a:first[href^='"+href+"']"+"  "+$("ul.h_nav a:first[href^='"+href+"']").size());
            $("ul.h_nav a[href^='"+href+"']").attr("class","on");
            if($("ul.h_nav a[href^='"+href+"']").size() == 0){
                $("ul.h_nav a[href^='index']").attr("class","on");
            }
        });
    }else{
        $(function(){$("ul.h_nav a:first[href^='index']").attr("class","on")});
    }
})

简单的说下逻辑,获取当前浏览器的地址前4位, 和当前<a>标签 href的值进行匹配,如果一样,当前菜单项高亮

html代码
<div class="top_nav_n1">
    <ul class="h_nav">
        <li ><a href="index.html">首页</a></li>
        <li ><a href="about-2-1.html">关于</a></li>
        li ><a href="contact-9-1.html">联系</a></li>
     </ul>
</div>
CSS代码
.top_nav_n1 .h_nav li{ float:left; width:auto; list-style:none; font-size:1.6rem; margin:0px 18px;}
.top_nav_n1 .h_nav li a{ color:#3e3e3e; font-size: 1.7rem}
.top_nav_n1 .h_nav  a:hover{color:#d7083b;text-decoration:none;}
.top_nav_n1 .h_nav  a.on{color:#d7083b;}

相关文章

网友评论

    本文标题:【SEO】优化技巧一:导航条当前菜单,不带参数,高亮显示

    本文链接:https://www.haomeiwen.com/subject/hdkxextx.html