设为首页收藏本站

豆壳DouPHP开发者社区

 找回密码
 立即注册

[共享] SEO神器之关于手机版代码转换MIP模板的流程

[复制链接]
cuihaifeng1234 发表于 2018-8-9 15:41:51 | 显示全部楼层 |阅读模式
MIP是Mobile Instant Pages的首字母缩写,意为移动网页加速器,是百度官方针对移动端搜索引擎开发的一套开放性技术标准,是百度在搜索引擎技术上紧跟谷歌的一次开发,更是移动端搜索引擎用户体验的提升。
MIP是否对SEO有效果?这个问题在去年就被众多大咖拿出来讨论了,总的来说有利有弊,但是利大于弊,且必然是发展的趋势。
douphp手机站如何改造成MIP模板呢?

1、手机模板头部替换成如下
  1. <!DOCTYPE html>
  2. <html mip>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1, minimum-scale=1, maximum-scale=1"/>
  6. <meta name="apple-mobile-web-app-capable" content="yes" />
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8. <meta name="format-detection" content="telephone=no" />
  9. <link rel="apple-touch-icon-precomposed" href="{$site.m_url}data/logo-icon.png" >
  10. <title>{$page_title}</title>
  11. <meta name="keywords" content="{$keywords}" />
  12. <meta name="description" content="{$description}" />
  13. <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
  14. <link rel="canonical" href="{$current_url}">
  15. <style mip-custom>
  16.   {literal}
  17.   /* 初始化
  18.   ----------------------------------------------- */
  19.   body {
  20.    font-family: Microsoft Yahei, \5FAE\8F6F\96C5\9ED1, \5b8b\4f53, Arial, Lucida, Verdana, Helvetica, sans-serif;
  21.    color: #555;
  22.    background-color:#F1F1F1;
  23.    min-width: 320px;
  24.   }
  25.   body, button, input, textarea {
  26.    font-size: 12px;
  27.    line-height: 1.531;
  28.    outline: none;
  29.    margin: 0;
  30.    padding: 0;
  31.    border: 0;
  32.   }
  33.   p, ul, ol, dl, dt, dd, form, blockquote {
  34.    margin: 0;
  35.    padding: 0;
  36.   }
  37.   a {
  38.    text-decoration: none;
  39.    color: #333333;
  40.   }
  41.   a:hover {
  42.    text-decoration: underline;
  43.   }
  44.   ul, ol {
  45.    list-style: none;
  46.   }
  47.   h1, h2, h3, h4, h5, h6 {
  48.    font-size: 12px;
  49.    margin: 0;
  50.    padding: 0;
  51.   }
  52.   input, select {
  53.    vertical-align: middle;
  54.   }
  55.   em, b, i {
  56.    font-style: normal;
  57.    font-weight: normal;
  58.   }
  59.   img {
  60.    vertical-align: middle;
  61.    border: 0;
  62.   }
  63.   label {
  64.    cursor: pointer;
  65.   }
  66.   /* 主体框架
  67.   ----------------------------------------------- */
  68.   #wrapper {
  69.    width: 100%;
  70.    min-width: 320px;
  71.    margin: 0 auto;
  72.    max-width: 640px;
  73.    background-color: #F5F5F5;
  74.    overflow: hidden;
  75.   }
  76.   /* -- header -- */
  77.   #header {
  78.    zoom: 1;
  79.    overflow: hidden;
  80.    background-color: #0072C6;
  81.    height: 45px;
  82.    margin-bottom: 1px;
  83.    color: #FFF;
  84.    text-align: center;
  85.    font-size: 16px;
  86.   }
  87.   #header a {
  88.    color: #FFF;
  89.   }
  90.   #header em {
  91.    line-height: 45px;
  92.   }
  93.   #header .logo {
  94.    float: left;
  95.    padding-left: 11px;
  96.   }
  97.   #header .logo img {
  98.    vertical-align:top;
  99.   }
  100.   #header a {
  101.    display: block;
  102.    width: 45px;
  103.    height: 45px;
  104.   }
  105.   #header a.home {
  106.    float: left;
  107.    background: url(theme/default/images/icon_head.png) no-repeat left top;
  108.   }
  109.   #header a.siteMap {
  110.    float: right;
  111.    background: url(theme/default/images/icon_head.png) no-repeat -45px top;
  112.   }
  113.   #header a.order {
  114.    float: right;
  115.    background: url(theme/default/images/icon_head.png) no-repeat -90px top;
  116.   }
  117.   #header .topSearch {
  118.    float: left;
  119.    width: 50%;
  120.    margin: 8px 0 0 8px;
  121.   }
  122.   #header .topSearch .searchBox {
  123.    border: 1px solid #FFF;
  124.    text-align: left;
  125.   }
  126.   /* -- mainNav -- */
  127.   #mainNav {
  128.    font-size: 13px;
  129.    background-color:#FFF;
  130.   }
  131.   #mainNav ul {
  132.    zoom: 1;
  133.    overflow: hidden;
  134.   }
  135.   #mainNav li {
  136.    float: left;
  137.    width: 25%;
  138.   }
  139.   #mainNav li a {
  140.    display: block;
  141.    text-align: center;
  142.    border-right: solid #EEEEEE 1px;
  143.    border-bottom: solid #EEEEEE 1px;
  144.    line-height: 55px;
  145.   }
  146.   #mainNav li a.last {
  147.    border-right: none;
  148.   }
  149.   /* 首页样式
  150.   ----------------------------------------------- */

  151.   #indexSearch {
  152.    background-color: #EEEEEE;
  153.    height: 30px;
  154.    padding: 10px;
  155.   }
  156.   #indexSearch .searchBox {
  157.    border: 1px solid #DDDDDD;
  158.   }
  159.   /* page
  160.   ----------------------------------------------- */
  161.   #page {
  162.    padding-bottom: 30px;
  163.    background-color:#FFF;
  164.   }
  165.   #page h1 {
  166.    border-bottom: 1px solid #EEEEEE;
  167.    color: #333333;
  168.    font-size: 14px;
  169.    font-weight: bold;
  170.    padding: 0 0 10px 10px;
  171.   }
  172.   #page .content {
  173.    color: #878787;
  174.    line-height: 200%;
  175.    padding: 10px;
  176.   }
  177.   #page .content img {
  178.    max-width:100%;
  179.   }
  180.   /* productList
  181.   ----------------------------------------------- */
  182.   .productList {
  183.    font-size: 13px;
  184.    zoom: 1;
  185.    overflow: hidden;
  186.    background-color:#FFF;
  187.   }
  188.   .productList dl {
  189.    float: left;
  190.    width: 50%;
  191.   }
  192.   .productList dd {
  193.    text-align: center;
  194.    border-right: solid #EEEEEE 1px;
  195.    border-top: solid #EEEEEE 1px;
  196.    padding: 10px;
  197.   }
  198.   .productList dd.clearBorder {
  199.    border-right: none;
  200.   }
  201.   .productList dd .img {
  202.    margin-bottom: 10px;
  203.   }
  204.   .productList dd .name {
  205.    margin-bottom: 6px;
  206.   }
  207.   .productList dd .price {
  208.    color: #999999;
  209.   }
  210.   /* product
  211.   ----------------------------------------------- */
  212.   #product {
  213.    padding-bottom: 30px;
  214.    background-color:#FFF;
  215.   }
  216.   #product .img {
  217.    border-bottom: 1px solid #EEEEEE;
  218.    padding: 10px;
  219.    text-align: center;
  220.   }
  221.   #product .info {
  222.    padding: 10px;
  223.    line-height: 180%;
  224.   }
  225.   #product .info h1 {
  226.    font-size: 16px;
  227.    color: #333333;
  228.   }
  229.   #product .info .defined {
  230.    color: #999999;
  231.    padding: 5px 0;
  232.   }
  233.   #product .info .price {
  234.    color: #FF0000;
  235.    font-size: 16px;
  236.   }
  237.   #product .info .btnBuy {
  238.    margin-top: 20px;
  239.   }
  240.   #product .info .btnBuy .addToCart {
  241.    background:#19B4EA url(theme/default/images/btn_addtocart.png) no-repeat 20px 50%;
  242.    color: #FFFFFF;
  243.    padding: 8px 25px 8px 50px;
  244.    text-decoration: none;
  245.    cursor: pointer;
  246.    font-size:16px;
  247.    -webkit-appearance: none;
  248.   }
  249.   #product .info .tel {
  250.    margin-top: 20px;
  251.    zoom: 1;
  252.    overflow: hidden;
  253.    line-height: 35px;
  254.    background-color: #19B4EA;
  255.    font-weight: bold;
  256.    font-size: 14px;
  257.   }
  258.   #product .info .tel dt {
  259.    float: left;
  260.    width: 82px;
  261.    height: 35px;
  262.    text-align: right;
  263.    padding-right: 3px;
  264.    background-color: #E0E0E0;
  265.    color: #333;
  266.   }
  267.   #product .info .tel dd {
  268.    float: left;
  269.    width: 150px;
  270.    height: 35px;
  271.    color: #FFF;
  272.    padding-left: 10px;
  273.   }
  274.   #product .info .tel dd a {
  275.    color: #FFF;
  276.   }
  277.   #product .content {
  278.    padding: 15px 0;
  279.   }
  280.   #product .content img {
  281.    max-width:100%;
  282.   }
  283.   #product .content h3 {
  284.    height: 35px;
  285.    line-height: 35px;
  286.    color: #777;
  287.    font-weight: bold;
  288.    font-size: 14px;
  289.    border-bottom: 1px solid #EEE;
  290.    padding-left: 10px;
  291.   }
  292.   #product .content ul {
  293.    padding: 10px;
  294.    color: #888888;
  295.    line-height: 200%;
  296.   }
  297.   /* articleList
  298.   ----------------------------------------------- */
  299.   .articleList {
  300.    background-color:#FFF;
  301.   }
  302.   .articleList dl {
  303.    border-top: solid #EEEEEE 1px;
  304.    padding: 13px;
  305.    height:42px;
  306.   }
  307.   .articleList dt {
  308.    margin-bottom: 5px;
  309.    font-size: 13px;
  310.   }
  311.   .articleList dd {
  312.    color: #999999;
  313.   }
  314.   .articleList dd em {
  315.    margin-right:8px;
  316.   }
  317.   /* article
  318.   ----------------------------------------------- */
  319.   #article {
  320.    padding-bottom: 30px;
  321.    background-color:#FFF;
  322.   }
  323.   #article h1 {
  324.    border-bottom: 1px solid #EEEEEE;
  325.    color: #333333;
  326.    font-size: 16px;
  327.    font-weight: bold;
  328.    padding: 0 0 10px 10px;
  329.   }
  330.   #article .info {
  331.    padding: 10px;
  332.    color: #999999;
  333.    font-size: 13px;
  334.   }
  335.   #article .content {
  336.    color: #878787;
  337.    line-height: 200%;
  338.    padding: 10px;
  339.   }
  340.   #article .content img {
  341.    max-width:100%;
  342.   }
  343.   /* 站点地图
  344.   ----------------------------------------------- */
  345.   #catalog {
  346.    zoom: 1;
  347.    overflow: hidden;
  348.   }
  349.   #catalog li a {
  350.    display: block;
  351.    background:#FFF url(images/icon_arrow_right.png) no-repeat right center;
  352.    border-bottom: 1px solid #EEE;
  353.    line-height: 50px;
  354.    height:50px;
  355.    padding-left: 10px;
  356.   }
  357.   /* 提示信息
  358.   ----------------------------------------------- */
  359.   #douMsg {
  360.    text-align: center;
  361.    padding:50px 0;
  362.    background-color:#FFF;
  363.   }
  364.   #douMsg dt {
  365.    color: #0072C6;
  366.    font-size: 16px;
  367.    margin-bottom: 30px;
  368.    font-weight: bold;
  369.   }
  370.   #douMsg dd {
  371.    color: #666;
  372.   }
  373.   #douMsg dd .back {
  374.    display:block;
  375.    width:100px;
  376.    line-height:30px;
  377.    background-color:#19B4EA;
  378.    color:#FFF;
  379.    margin:30px auto;
  380.   }
  381.   /* 全局样式
  382.   ----------------------------------------------- */
  383.   /* -- common -- */
  384.   .clear {
  385.    clear: both;
  386.    height: 0;
  387.    line-height: 0;
  388.    font-size: 0;
  389.   }
  390.   .none {
  391.    display: none;
  392.   }
  393.   #vcode {
  394.    cursor: pointer;
  395.   }
  396.   .cue {
  397.    color: red;
  398.    font-size:12px;
  399.   }
  400.   .fixex {
  401.    position: fixed;
  402.    left: 0;
  403.    bottom: 0;
  404.    z-index: 10000;
  405.    width: 100%;
  406.   }
  407.   /* -- form -- */
  408.   .btn {
  409.    display: inline-block;
  410.    background-color: #0072C6 !important;
  411.    color: #EEE !important;
  412.    padding: 8px 5px;
  413.    text-transform: capitalize;
  414.    cursor: pointer;
  415.    font-weight: bold;
  416.    text-align:center;
  417.    font-size: 14px;
  418.    -webkit-appearance: none;
  419.    width: 97%;
  420.   }
  421.   .btnGray {
  422.    display: inline-block;
  423.    border: 1px solid #CCCCCC;
  424.    color: #555555;
  425.    padding: 6px 5px;
  426.    cursor: pointer;
  427.    font-weight: bold;
  428.    text-align:center;
  429.    font-size: 14px;
  430.    -webkit-appearance: none;
  431.    width: 97%;
  432.   }
  433.   .btnMini {
  434.    display: inline-block;
  435.    border: 1px solid #CCCCCC;
  436.    color: #555555;
  437.    padding: 4px 20px;
  438.    cursor: pointer;
  439.    font-weight: bold;
  440.    text-align:center;
  441.    -webkit-appearance: none;
  442.   }
  443.   .btnRed {
  444.    border: 1px solid #e4393c;
  445.    color: red;
  446.   }
  447.   .btnPayment {
  448.    display: inline-block;
  449.    background-color: red;
  450.    color: #FFF;
  451.    padding: 4px 20px;
  452.    text-transform: capitalize;
  453.    cursor: pointer;
  454.    font-weight: bold;
  455.    text-align:center;
  456.    font-size: 14px;
  457.    -webkit-appearance: none;
  458.   }
  459.   /* -- input -- */
  460.   .textInput {
  461.    padding: 8px 5px;
  462.    border: 1px solid #DDDDDD;
  463.    font-size: 14px;
  464.    -webkit-appearance: none;
  465.    width: 95%;
  466.   }
  467.   .textArea {
  468.    padding: 8px 5px;
  469.    border: 1px solid #DDDDDD;
  470.    font-size: 14px;
  471.    -webkit-appearance: none;
  472.    width: 95%;
  473.   }
  474.   .textAreaAuto {
  475.    border: 1px solid #DDDDDD;
  476.    padding: 0;
  477.    font-size: 12px;
  478.    line-height: 20px;
  479.    resize: none;
  480.    min-height: 40px;
  481.    -webkit-appearance: none;
  482.    width: 96%;
  483.   }
  484.   /* -- incBox -- */
  485.   .incBox {
  486.    margin-bottom: 5px;
  487.    background-color:#FFF;
  488.   }
  489.   .incBox h3 {
  490.    font-weight: bold;
  491.    font-size: 16px;
  492.    color: #0072C6;
  493.    padding:15px 10px 8px 10px;
  494.   }
  495.   .incBox h3 .more {
  496.    float: right;
  497.    font-size: 13px;
  498.    color: #777777;
  499.   }
  500.   /* -- searchBox -- */
  501.   .searchBox {
  502.    position: relative;
  503.    background-color: #FFF;
  504.    height: 28px;
  505.    padding-left: 10px;
  506.    overflow: hidden;
  507.   }
  508.   .searchBox .keyword {
  509.    display: inline-block;
  510.    width: 90%;
  511.    color: #999;
  512.    height: 20px;
  513.    margin-top: 4px;
  514.    border: none;
  515.   }
  516.   .searchBox .btnSearch {
  517.    position: absolute;
  518.    top: 0;
  519.    right: 0;
  520.    border: 0;
  521.    background: #E0E0E0 url(theme/default/images/btn_search.gif) no-repeat;
  522.    width: 28px;
  523.    height: 28px;
  524.    text-indent: -999px;
  525.    cursor: pointer;
  526.   }
  527.   /* -- tree -- */
  528.   .treeBox {
  529.    zoom: 1;
  530.    overflow: hidden;
  531.    padding: 10px 5px;
  532.    background-color:#FFF;
  533.   }
  534.   .treeBox a {
  535.    display: block;
  536.    float: left;
  537.    margin: 5px;
  538.    border: solid #EEEEEE 1px;
  539.    padding: 3px 6px;
  540.   }
  541.   .treeBox a.cur {
  542.    background-color: #19B4EA;
  543.    color: #FFF;
  544.    border: solid #FFF 1px;
  545.   }
  546.   /* tableBasic */
  547.   .tableBasic {
  548.    font-size: 13px;
  549.    padding: 5px 10px;
  550.    background-color:#FFF;
  551.   }
  552.   .tableBasic dl {
  553.    overflow: hidden;
  554.    zoom: 1;
  555.    padding:3px 0;
  556.    height:20px;
  557.   }
  558.   .tableBasic dl dt {
  559.    float: left;
  560.    width: 70px;
  561.   }
  562.   .tableBasic dl dd {
  563.    margin-left: 70px;
  564.   }
  565.   /* formBasic */
  566.   .formBasic {
  567.    font-size: 13px;
  568.    padding: 15px 10px;
  569.    background-color:#FFF;
  570.   }
  571.   .formBasic dl {
  572.    overflow: hidden;
  573.    zoom: 1;
  574.    margin-bottom: 15px;
  575.   }
  576.   .formBasic dl dt {
  577.    margin-bottom:3px;
  578.   }
  579.   .formBasic dl dd label {
  580.    margin-right:25px;
  581.    line-height:38px;
  582.   }
  583.   .formBasic dl .captcha {
  584.    text-transform: uppercase;
  585.    width: 130px;
  586.    display: inline-block;
  587.    vertical-align: middle;
  588.   }
  589.   .formBasic dl .select {
  590.    height: 38px;
  591.   }
  592.   /* -- urHere -- */
  593.   .urHere {
  594.    background-color: #EEE;
  595.    color: #555;
  596.    padding: 10px;
  597.    height:24px;
  598.    font-weight: bold;
  599.    font-size: 15px;
  600.   }
  601.   .urHere a {
  602.    color: #0072C6;
  603.   }
  604.   .urHere b {
  605.    margin: 0 8px;
  606.   }
  607.   /* -- pager -- */
  608.   .pager {
  609.    text-align: center;
  610.    padding: 10px;
  611.    height:36px;
  612.    background-color:#FFF;
  613.    margin-top:1px;
  614.   }
  615.   .pager a, .pager span, .pager em {
  616.    display:inline-block;
  617.    color: #525252;
  618.    padding:0 15px;
  619.    line-height:36px;
  620.   }
  621.   .pager em {
  622.    color: #AAAAAA;
  623.   }
  624.   /* footer
  625.   ----------------------------------------------- */
  626.   #footer {
  627.    background-color: #FFF;
  628.   }
  629.   #footer .goTop {
  630.    display: block;
  631.    margin: 0 auto 20px auto;
  632.    width: 60px;
  633.    text-align: center;
  634.    background: url(theme/default/images/icon_gotop.png) no-repeat center 40px;
  635.    padding-top: 48px;
  636.   }
  637.   #footer ul {
  638.    background-color: #EEEEEE;
  639.    padding: 15px 0;
  640.    text-align: center;
  641.    color: #999999;
  642.   }
  643.   #footer a {
  644.    color: #555555;
  645.   }
  646.   #footer li {
  647.    padding: 5px 0;
  648.   }
  649.   #footer .footNav a {
  650.    margin: 0 5px;
  651.    color: #0072C6;
  652.   }
  653.   #footer .powered {
  654.    font-size: 11px;
  655.   }

  656.   #guestBook {
  657.    padding: 10px 0;
  658.   }
  659.   #guestBook h2 {
  660.    color: #0072C6;
  661.    font-size: 16px;
  662.    font-weight: bold;
  663.    padding: 0 0 10px 10px;
  664.    border-bottom: solid #EEE 1px;
  665.   }
  666.   /* bookList */
  667.   #guestBook .bookList {
  668.    padding: 10px;
  669.    line-height: 180%;
  670.    font-size: 13px;
  671.    margin-bottom: 20px;
  672.   }
  673.   #guestBook .bookList dl {
  674.    margin-bottom: 15px;
  675.   }
  676.   #guestBook .bookList dt {
  677.    color: #333;
  678.    margin-bottom: 3px;
  679.    font-weight: bold;
  680.   }
  681.   #guestBook .bookList dd {
  682.    color: #999;
  683.   }
  684.   #guestBook .bookList p {
  685.    color: #0072C6;
  686.    margin-top: 5px;
  687.    overflow: hidden;
  688.    zoom: 1;
  689.   }
  690.   #guestBook .bookList p em {
  691.    float: left;
  692.    width: 70px;
  693.   }
  694.   #guestBook .bookList p span {
  695.    float: left;
  696.    width: 800px;
  697.   }
  698.   #guestBook .bookList p b {
  699.    color: #999;
  700.    float: right;
  701.   }
  702.   #guestBook .bookList .pager {
  703.    text-align: left;
  704.    padding: 0;
  705.   }
  706.   #guestBook .contact dt {
  707.    float: left;
  708.    width: 110px;
  709.   }
  710.   #guestBook .contact dd {
  711.    margin-left: 140px;
  712.   }
  713.   #guestBook .contact .textInput {
  714.    width: 93%;
  715.   }
  716.   #vcode{
  717.    display: inline-block;
  718.    vertical-align: middle;
  719.   }
  720.   {/literal}
  721. </style>

  722. </head>
  723. <body>
复制代码
2、改造MIP禁用的组件,请参考https://www.mipengine.org/doc/2-tech/1-mip-html.html
举个例子,系统幻灯片inc/slide_show,tpl,改造完成的代码如下:
<mip-carousel
        autoplay
        defer="3000"
        layout="responsive"
        width="640"
        height="400"
        indicator
        buttonController>

<!-- {foreach from=$show_list name=show item=show} -->
<a target="_blank" href="{$show.show_link}">
  <mip-img
          src="{$show.show_img}" width="640" height="400">
  </mip-img>
  <div class="mip-carousle-subtitle">{$show.show_name}</div>
</a>

<!-- {/foreach} -->
</mip-carousel>
3、验证代码是否符合规范

回复

使用道具 举报

Fengtalk 发表于 2018-8-9 15:46:05 | 显示全部楼层
真高产!多谢崔大。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|DouCo.Com ( 闽ICP备07031922号  

GMT+8, 2018-12-13 04:10 , Processed in 0.476617 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.|Style by Coxxs

快速回复 返回顶部 返回列表