SEO分页优化

分页优化这东西原来我也不太明白，不知道这东西还需要什么优化的，但是经理跟我说，搜索引擎好像是不能收录其他分页的列表数据，说这是SEO优化，让我将分页修改成安居客的方式。

先说说layer插件和安居客分页的方式不同：

1、首先layer的插件的样式如下：

<div id="layPage" align="center">

      <div name="laypage1.3" class="laypage_main laypageskin_molv" id="laypage_0">

     <span class="laypage_curr" style="background-color:#ff6600">1</span>

     <a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a>

     <a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a>

     <span>…</span>

     <a href="javascript:;" class="laypage_last" title="尾页" data-page="265">尾页</a>

     <a href="javascript:;" class="laypage_next" data-page="2">下一页</a></div>

</div>

1.1、安居客的分页样式如下：

    <div class="pagination">

          <span class="prev-page stat-disable">上一页</span>

          <span class="curr-page">1</span>

          <a href="https://sh.fang.anjuke.com/loupan/all/p2/">2</a>

          <a href="https://sh.fang.anjuke.com/loupan/all/p3/">3</a>

          <a href="https://sh.fang.anjuke.com/loupan/all/p4/">4</a>

          <a href="https://sh.fang.anjuke.com/loupan/all/p5/">5</a>

          <a href="https://sh.fang.anjuke.com/loupan/all/p6/">6</a>

          <a href="https://sh.fang.anjuke.com/loupan/all/p7/">7</a>

          <span class="ellipsis">...</span>

          <a href="https://sh.fang.anjuke.com/loupan/all/p2/" class="next-page next-link">下一页</a>

   </div>

    --------------------------------------------------------我是Controller方法---------------------------------------------------------

   page: (当前页，每页数量，总数)；

   condition: 查询条件

   page.setPageContainer(PageUtil.layerPage(page,condition));

 

  --------------------------------------------------------我是Util 方法---------------------------------------------------------

package test.core.util;

 

import test.common.WebConstants;

 

public class PageUtil {

public static int getPageSize(int count, int numberOfPage) {

        int result = 0;

 

        // 记录条数小于0时

        if (count <= 0) {

            return 0;

        }

 

        // 计算页数

        result = count / numberOfPage;

 

        // 下一页还存在记录时(未满一页)，页数加1

        if (count % numberOfPage != 0) {

            result++;

        }

        return result;

    }

 

public static int getOffset(int currentPage, int numberOfPage) {

 

        int offset = 0;

        if (currentPage > 0) {

            offset = (currentPage - 1) * numberOfPage;

        }

 

        return offset;

    }

 

/**

* 分页参数错误处理

* @param currentPage 当前页

* @param pageSize 每页个数

*/

public static void handleError(Integer currentPage, int pageSize) {

//若当前页参数为空或为0时，取第一页

if (currentPage == null || currentPage <= 0) {

currentPage = 1;

//若当前页大于总页数，取最大页

} else if (currentPage > pageSize) {

currentPage = pageSize;

}

}

/**

     * TODO(生成分页方法)    

     * @author  作者 E-mail <a href="mailto:[e-mail]"shangxy</a> 

     * @version 1.0 创建时间：2017年7月3日下午6:03:19

     * @param page （总数，每页个数，当前页，拼接城的分页）

     * @param condition 查询条件

     * @return  String

     */

    public static String layerPage(Page page,String condition){

    //分页总数

    int pageTotal = (int) Math.ceil(((double) page.getTotalRowSize()/(double) page.getPageRowSize()));

    //(这里要做判断，只有页数超过2页时才生成分页，调用分页方法)

    if(pageTotal<2){

    return "";

    }

    // url地址

    String web = WebConstants.CURRENT_WEB_CONTENT_PATH;

    String layer="<div class='laypage_main laypageskin_molv'>";

    /* 判断是否是第一页，如果不是那么就存在上一页和首页  */

    if(page.getCurrPageNum()!=1){ 

layer+="<a href="+web+condition+"lg"+(page.getCurrPageNum()-1)+">上一页</a>";

}

    //总数为1到5页

    if(1< pageTotal && pageTotal<6){

for (int i = 1; i <= pageTotal; i++) {

if(i==page.getCurrPageNum()){

layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";

}else{

layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";

}

}

    }else{ /* 分页总数大于6时处理 */ 

    if(page.getCurrPageNum()>3){ /* 判断当前页是否是前三页以外，如果是则存在首页  */

layer +="<a href="+web+condition+"lg1"+" class='laypage_first' title='首页'>首页</a>";

}

    /* 判断当前的位置，是否在末尾3页 和首页前三页 之间  */

    if(page.getCurrPageNum()>3 && (2<(pageTotal - page.getCurrPageNum()))){

    layer+="<span>…</span>";

    for (int i = (page.getCurrPageNum()-2); i <= (page.getCurrPageNum()+2); i++) {

    if(i==page.getCurrPageNum()){

    layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";

    }else{

    layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";

    }

    }

    layer+="<span>…</span>";

    }else if ((pageTotal - page.getCurrPageNum())<=2) { /* 判断当前的位置，是否在末尾三页之内 */

    layer+="<span>…</span>";

    for (int i = (pageTotal-4); i <= pageTotal; i++) {

    if(i==page.getCurrPageNum()){

    layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";

    }else{

    layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";

    }

    }

}else {

/* 判断当前的位置在首页5页之内 */

    for (int i = 1; i <= 5; i++) {

    if(i==page.getCurrPageNum()){

    layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";

    }else{

    layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";

    }

    }

    layer+="<span>…</span>";

}

    /* 判断是最后三页以外，以外存在尾页  */

    if(2<(pageTotal - page.getCurrPageNum())){

    layer +="<a href="+web+condition+"lg"+pageTotal+" class='laypage_last' title='尾页' >尾页</a>";

    }

    }

    /* 判断是否是最后一页，如果不是那么就存在下一页和尾页  */

if(page.getCurrPageNum()!=pageTotal){

layer +="<a href="+web+condition+"lg"+(page.getCurrPageNum()+1)+">下一页</a>";

}

    return layer;

    }

}

 

 --------------------------------------------------------我是page JSP的方法---------------------------------------------------------

    <!-- page分页容器 -->

    <div align="center" class="page">${page.pageContainer}</div>

 

--------------------------------------------------------我是static CSS的方法---------------------------------------------------------

 

.laypage_main a, .laypage_main input, .laypage_main span {

height: 26px;

line-height: 26px

}

 

.laypage_main button, .laypage_main input, .laypageskin_default a {

border: 1px solid #ccc;

background-color: #fff

}

 

.laypage_main {

font-size: 0;

clear: both;

color: #666

}

 

.laypage_main * {

display: inline-block;

vertical-align: top;

font-size: 12px

}

 

.laypage_main a {

text-decoration: none;

color: #666

}

 

.laypage_main a, .laypage_main span {

margin: 0 3px 6px;

padding: 0 10px

}

 

.laypage_main input {

width: 40px;

margin: 0 5px;

padding: 0 5px

}

 

.laypage_main button {

height: 28px;

line-height: 28px;

margin-left: 5px;

padding: 0 10px;

color: #666

}

 

.laypageskin_default span {

height: 28px;

line-height: 28px;

color: #999

}

 

.laypageskin_default .laypage_curr {

font-weight: 700;

color: #666

}

 

.laypageskin_molv a, .laypageskin_molv span {

padding: 0 12px;

border-radius: 2px

}

 

.laypageskin_molv a {

background-color: #f1eff0

}

 

.laypageskin_molv .laypage_curr {

background-color: #00AA91;

color: #fff

}

 

.laypageskin_molv input {

height: 24px;

line-height: 24px

}

 

.laypageskin_molv button {

height: 26px;

line-height: 26px

}

 

.laypageskin_yahei {

color: #333

}

 

.laypageskin_yahei a, .laypageskin_yahei span {

padding: 0 13px;

border-radius: 2px;

color: #333

}

 

.laypageskin_yahei .laypage_curr {

background-color: #333;

color: #fff

}

 

.laypageskin_flow {

text-align: center

}

 

.laypageskin_flow .page_nomore {

color: #999

}