Windy's Blog http://www.5756653.cn Wed, 17 Jul 2019 08:55:47 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.22 织梦极光算法时间因子改造代码 http://www.5756653.cn/dede-jiguang-gaizao.html Wed, 17 Jul 2019 08:54:39 +0000 http://www.5756653.cn/?p=810 百度出了极光算法，需要改造的代码总结如下： [crayon-642040f079889737379950/] 织梦系统一共有首页、列表、内容这三种类型，所以一共有三段代码： 首页修改： [crayon-642040f079889568078621/] 列表页修改： [crayon […]

织梦极光算法时间因子改造代码最先出现在Windy's Blog。

]]> 百度出了极光算法，需要改造的代码总结如下：

<script type="application/ld+json">
{
"@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id":"当前页面地址，必填",
"appid":"熊掌号ID，纯PC端页面可不填",
"title":"网页的标题，选填",
"images":["当前文章页的第一张图片，选填"],
"description":"当前页面的描述内容，选填",
"pubDate":"文章发布时间，必选",
"upDate":"页面更新时间，必填",
"data":{
"webPage":{
"headline":"页面文章的标题，选填",
"tag":["页面标签，选填"],
"pcUrl":"PC端的URL地址，建议填",
"wapUrl":"移动端的URL地址，自适应与PC端地址一样，建议填",
"mipUrl":"MIP页面的地址，建议有的填 没有就不填",
"fromSrc":"站点名称，注意这里不建议写标题，建议用品牌名，选填",
"datePublished":"内容发布的时间，选填"
}
}
}
</script>

织梦系统一共有首页、列表、内容这三种类型，所以一共有三段代码：

首页修改：

<script type="application/ld+json"> 
{
  "@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  "@id":"{dede:global.cfg_basehost/}",
  "appid":"{dede:global.xiongzhang_id/}",
  "title":"{dede:global.SiteTitle/}",
  "images":["{dede:global.cfg_basehost/}/templets/winow/images/winow-logo.jpg"],
  "description":"{dede:global.cfg_description/}",
  "upDate":"{dede:arclist row='1' typeid='all' orderby='pubdate'}[field:pubdate function='strftime("%Y-%m-%dT%H:%M:%S",@me)' /]{/dede:arclist}",
  "data":{
    "webPage":{
      "pcUrl":"{dede:global.cfg_basehost/}",
      "wapUrl":"{dede:global.cfg_mob_url/}",
      "mipUrl":"{dede:global.cfg_mob_url/}",
      "fromSrc":"{dede:global.cfg_webname/}"
    }
  }
}</script>

列表页修改：

<script type="application/ld+json">
{
  "@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  "@id":"{dede:global.cfg_basehost/}{dede:type}[field:typelink/]{/dede:type}",
  "appid":"{dede:global.xiongzhang_id/}",
  "title":"{dede:field name='typename'/}",
  "images":["{dede:field.typepic runphp="yes"} //这里的typepic是自己添加的栏目缩图
@me = (strpos(@me,'defaultpic')? "{dede:global.cfg_basehost/}/templets/winow/images/winow-logo.jpg" : 'https://www.winowalu.cn'.@me."");{/dede:field.typepic}"],
  "description":"{dede:field.description function='html2text(@me)'/}",
  "pubDate":"{dede:field.pubdate function="MyDate('Y-m-d',@me)"/}T{dede:field.pubdate function="MyDate('H:i:s',@me)"/}",
  "data":{
    "webPage":{
      "pcUrl":"{dede:global.cfg_basehost/}{dede:type}[field:typelink/]{/dede:type}",
      "wapUrl":"{dede:global.cfg_basehost/}{dede:type}[field:typelink/]{/dede:type}",
      "mipUrl":"{dede:global.cfg_mob_url/}/list.php?tid={dede:field.id/}",
      "fromSrc":"{dede:global.cfg_webname/}"
    }
  }
}
</script>

这里特别说一些：如果是封面页不更新内容的建议直接写链接，时间等；如果是列表页需要更新内容的栏目页可以把栏目页发布时间固定，栏目内容更新时间换成如下代码

"upDate":"{dede:arclist row='1' typeid='all' orderby='pubdate'}[field:pubdate function='strftime("%Y-%m-%dT%H:%M:%S",@me)' /] {/dede:arclist}",

说明：typeid=” 栏目ID” 可以直接写栏目ID，建议写ALL

内容页修改：

<script type="application/ld+json"> 
{
  "@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  "@id":"{dede:global.cfg_basehost/}{dede:field name='arcurl'/}",
  "appid":"{dede:global.xiongzhang_id/}",
  "title":"{dede:field.shorttitle/}",
  "images":["{dede:field.litpic runphp="yes"} 
global $cfg_basehost;
@me = (strpos(@me,'defaultpic')? "" : "$cfg_basehost".@me.""); 
{/dede:field.litpic}"],
  "description":"{dede:field.description function='html2text(@me)'/}",
  "pubDate": "{dede:field.senddate function="MyDate('Y-m-d\TH:i:s',@me)"/}",
  "upDate": "{dede:field.pubdate function="MyDate('Y-m-d\TH:i:s',@me)"/}",
  "data":{
    "webPage":{
      "pcUrl":"{dede:global.cfg_basehost/}{dede:field name='arcurl'/}",
      "wapUrl":"{dede:global.cfg_mob_url/}/view.php?aid={dede:field name='id'/}",
      "mipUrl":"{dede:global.cfg_mob_url/}/view.php?aid={dede:field name='id'/}",
      "fromSrc":"{dede:global.cfg_webname/}"
    }
  }
}	
</script>

 

 

织梦极光算法时间因子改造代码最先出现在Windy's Blog。

]]> 用lazyload.js延迟加载图片，并避免对SEO的影响 http://www.5756653.cn/yanchijiazai-seo.html Sun, 28 Apr 2019 16:35:50 +0000 http://www.5756653.cn/?p=798 在做一个项目，一个页面会有不少的图片载入，现在搜索引擎都提倡用户体验，如果因为图片多，导致加载慢影响了用户体验也得不偿失 找到了解决方案： 用lazyload.js延迟加载图片的原理： 图片延迟加载的工作原理 图片延迟加载的工作原理是：当图像区域进入Viewport时在的img标 […]

用lazyload.js延迟加载图片，并避免对SEO的影响最先出现在Windy's Blog。

]]> 在做一个项目，一个页面会有不少的图片载入，现在搜索引擎都提倡用户体验，如果因为图片多，导致加载慢影响了用户体验也得不偿失

找到了解决方案：

用lazyload.js延迟加载图片的原理：

图片延迟加载的工作原理
图片延迟加载的工作原理是：当图像区域进入Viewport时在的img标签的src属性写入图片的路径。这通常是使用JavaScript实现。默认情况下，src属性设置为空或者统一用特定的小图进行填充。
以下是一个简单的图片延迟加载的页面示例：

<!doctype html>
<html>
<head>
    <!-- lazyload.js can be any lazy loading library -->
    <script src="lazyload.js"></script>
</head>
<body>
    <img src="blank.gif" data-img-src="http://qnimate.com/1.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/2.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/3.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/4.png">
</body>
</html>

在这个示例中，lazyload.js会检查图片是否有进入viewport，然后把data-img-src的值分配给img的src属性。

图片延迟加载对于SEO的影响
搜索引擎通常是通过图片的src属性去查找图片的，但在大多数图片延迟加载的页面中，真正的图片路径并不在src属性中。这样搜索引擎就无法抓取和收录延迟加载的图片，查看快照会发现并没有想要显示的图片出现。

优化方案，不使用lazyload.js，用qazy.js
根据上边的描述，如果可以给 src属性写入真正的页面URL，那么问题就可以得到解决。具体的实现方法可参考Narayan的Qazy代码段：https://github.com/qnimate/Qazy。

该代码段的实现原理是：Qazy禁止浏览器在图片未进入viewport时就获取图像。

Qazy脚本需要在网页上尽早加载（尽量放在靠前的位置），以便它可以开始监测图版并延迟加载图片。

Demo：http://labs.qnimate.com/qazy-lazy-loading/
Qazy应用的代码示例：

<!doctype html>
<html>
<head>
<title>Qazy</title>
<script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder </script>
<scriptsrc="https://cdn.rawgit.com/qnimate/Qazy/master/qazy.min.js"></script>
</head>
<body>
<img src="lazy-loading.jpg" data-qazy="true">
<br>
<img src="offline-web-apps.jpg" data-qazy="true">
<br>
<img src="random-color.jpg" data-qazy="true">
<br>
<img src="revel-scroll.jpg" data-qazy="true">
<br>
<img src="wordpress-fields-metaboxes.jpg" data-qazy="true">
</body>
</html>

由于官方的qazy.min.js包含了一个base64加密的loading图片，导致js文件达到了120K，我们可以另外找到一张loading图片，进行base64加密，然后替换掉官方的即可，贴上我修改的qazy.min.js代码，只有5K

function reveal(){for(var A=0;A<view_elements.length;A++){var q=0,g=view_elements[A];do isNaN(g.offsetTop)||(q+=g.offsetTop);while(g=g.offsetParent);var B=window.pageYOffset,Q=window.innerHeight,C=0,g=view_elements[A];do isNaN(g.offsetLeft)||(C+=g.offsetLeft);while(g=g.offsetParent);var I=window.pageXOffset,w=window.innerWidth;q>B&&B+Q>q&&C>I&&I+w>C?(view_elements[A].src=view_elements[A].getAttribute("data-qazy-src"),console.log(view_elements[A].src),view_elements.splice(A,1),A--):console.log("offsetParentTop"+q+" pageYOffset"+B+" viewportHeight"+window.innerHeight)}}function qazy_list_maker(){for(var A=document.querySelectorAll("img[data-qazy][data-qazy='true']"),q=0;q<A.length;q++){view_elements.push(A[q]),A[q].setAttribute("data-qazy","false");var g=A[q].src;A[q].setAttribute("data-qazy-src",g),A[q].src=qazy_image}}var qazy_image=qazy_image||"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIxIDc1IiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1IDUwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEwIiBmaWxsPSIjZjNmM2YzIiB0cmFuc2Zvcm09InNjYWxlKDAuMTU2NDU2IDAuMTU2NDU2KSI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjMgMCAwLjcgMTswLjMgMCAwLjcgMSIgdmFsdWVzPSIwOzE7MCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEwIiBmaWxsPSIjZDhkZGRmIiB0cmFuc2Zvcm09InNjYWxlKDAuNjEwMzggMC42MTAzOCkiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGJlZ2luPSItMC4xNjY2NjY2NjY2NjY2NjY2NnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuMyAwIDAuNyAxOzAuMyAwIDAuNyAxIiB2YWx1ZXM9IjA7MTswIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUgNTApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMTAiIGZpbGw9IiNiOGJhYmQiIHRyYW5zZm9ybT0ic2NhbGUoMC45NzIxNDIgMC45NzIxNDIpIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBiZWdpbj0iMHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuMyAwIDAuNyAxOzAuMyAwIDAuNyAxIiB2YWx1ZXM9IjA7MTswIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+",view_elements=[];
window.addEventListener("resize",reveal,!1),window.addEventListener("scroll",reveal,!1);var intervalObject=setInterval(function(){qazy_list_maker()},50);window.addEventListener("load",function(){clearInterval(intervalObject),qazy_list_maker(),reveal()},!1);

 

 

 

用lazyload.js延迟加载图片，并避免对SEO的影响最先出现在Windy's Blog。

]]> dedeeims整合百度编辑器Ueditor http://www.5756653.cn/dedeeims-with-ueditor.html Thu, 22 Nov 2018 03:12:11 +0000 http://www.5756653.cn/?p=791 这几天突然发现dede后台编辑或修改内容时，由于编辑器的原因，页面容易卡死。寻思着换了这个编辑器，用ueditor去 第一步：下载PHP版本的Ueditor，解压改名ueditor并放入include文件夹中 地址：https://ueditor.baidu.com/websit […]

dedeeims整合百度编辑器Ueditor最先出现在Windy's Blog。

]]> 这几天突然发现dede后台编辑或修改内容时，由于编辑器的原因，页面容易卡死。寻思着换了这个编辑器，用ueditor去

第一步：下载PHP版本的Ueditor，解压改名ueditor并放入include文件夹中 地址：https://ueditor.baidu.com/website/download.html

第二步：修改include/inc/inc_func_funcAdmin.php文件
打开include下的inc文件夹内的inc_func_funcAdmin.php找到140行左右，贴入以下代码(在判断fck编辑器之后加入)

else if($GLOBALS['cfg_html_editor']=='ueditor')
{
 $fvalue = $fvalue==" ? '<p></p>' : $fvalue;
$code = '<script type=”text/javascript” charset=”utf-8″
src=”/include/ueditor/ueditor.config.js”></script>
 <script type=”text/javascript” charset=”utf-8″
src=”/include/ueditor/ueditor.all.js”></script>
<link rel=”stylesheet” type=”text/css”
href=”/include/ueditor/themes/default/css/ueditor.css”/>
<textarea name=”‘.$fname.'” id=”‘.$fname.'”
style=”width:100%;”>’.$fvalue.'</textarea>
<script type=”text/javascript”>var ue = new
baidu.editor.ui.Editor();ue.render(“‘.$fname.'”);</script>’;
if($gtype==”print”)
{
  echo $code;
 }
 else
{
 return $code;
}
}

第三步：修改配置

进入网站后台–>系统–>系统基本参数–>核心设置–>将 Html编辑器的值改为 ueditor ，然后保存。 到了这一步，那么恭喜你，文本编辑器已经替换成功！

修改内容部分代码丢失

有的网站使用百度编辑器发布文章后，重新编辑文章部分代码会丢失。
把百度编辑器的容器 script 改成 textarea 就好了，即把：

<script type=”text/plain” id=”myEditor1″ name=”myEditor1″>{$article.content}</script>

改成：

<textarea id=”myEditor1″ name=”myEditor1″>{$article.content}</textarea>

修改ueditor上传文件的路径
打开include/ueditor/php/config.json
里面的
/ueditor/php/upload/image/
/ueditor/php/upload/video/
/ueditor/php/upload/file/
修改成自己的，如：
/uploads/allimg/
/uploads/video/
/uploads/file/

dedeeims整合百度编辑器Ueditor最先出现在Windy's Blog。

]]> Avada v5.4.X 版破解教程 http://www.5756653.cn/avada-v5-4-x-pojie.html Sat, 29 Sep 2018 13:11:32 +0000 http://www.5756653.cn/?p=784 1、找到\wp-content\themes\Avada\includes\lib\inc\class-fusion-envato-api.php文件，注释掉如下两行代码 [crayon-642040f07b70d208171956/] 2、找到\wp-content\theme […]

Avada v5.4.X 版破解教程最先出现在Windy's Blog。

]]> 1、找到\wp-content\themes\Avada\includes\lib\inc\class-fusion-envato-api.php文件，注释掉如下两行代码

$response_code = wp_remote_retrieve_response_code( $response );
$response_message = wp_remote_retrieve_response_message( $response );

2、找到\wp-content\themes\Avada\includes\lib\inc\class-fusion-product-registration.php

第一处：

if ( is_wp_error( $products ) ) {
// 401 ( unauthorized ) and 403 ( forbidden ) mean the token is invalid, apart from that Envato API is down.
if ( 401 !== $products->get_error_code() && 403 !== $products->get_error_code() && '' !== $products->get_error_message() ) {
set_site_transient( 'fusion_envato_api_down', true, 600 ); //将600修改成0即可
}
return false;
}

第二处：

public function is_registered() {
// Is the product registered?
if ( isset( $this->registered[ $this->product_id ] ) && true === $this->registered[ $this->product_id ] ) {
return true;
}
// Is the Envato API down?
if ( get_site_transient( 'fusion_envato_api_down' ) ) {
return true;
}
// Fallback to false.//将return值返回为true
return true;
}

 

ok，完成之后，你会惊喜的发现，已经成功了，绕过了验证。

注意：本机环境下使用phpstudy集成环境的不用试了，请一定要开启WP远程获取、WP 远程发布，对此我们推荐您使用wamp集成环

境。只有当Avada的系统状态监测，WP远程获取、WP 远程发布打钩才能正确的执行

Avada v5.4.X 版破解教程最先出现在Windy's Blog。

]]> IIS全站把http做301到https，且排除域名的web.config规则 http://www.5756653.cn/iis-301-to-https.html Mon, 27 Aug 2018 07:42:59 +0000 http://www.5756653.cn/?p=774 cdn.alufoil.cn是要排除的域名 要把 http://alufoil.cn、http://www.alufoil.cn、https://alufoil.cn全部做301到https://www.alufoil.cn，并且排除一个域名给cdn加速回源使用。   […]

IIS全站把http做301到https，且排除域名的web.config规则最先出现在Windy's Blog。

]]> cdn.alufoil.cn是要排除的域名

要把

http://alufoil.cn、http://www.alufoil.cn、https://alufoil.cn全部做301到https://www.alufoil.cn，并且排除一个域名给cdn加速回源使用。

 

<rewrite>
      <rules>
        <rule name="LowerCaseRule1" stopProcessing="true"><--把url全部转为小写-->
          <match url="[A-Z]" ignoreCase="false" />
          <action type="Redirect" url="{ToLower:{URL}}" />
        </rule>
        <rule name="CanonicalHostNameRule1" stopProcessing="true"><!--匹配除了www或者cdn.alufoil.cn之外的域名，匹配到了https://alufoil.cn-->
          <match url="(.*)" />
          <conditions>
            <add input="{HTTP_HOST}" pattern="^(www|cdn)\.alufoil\.cn$" negate="true" />
          </conditions>
          <action type="Redirect" url="https://www.alufoil.cn/{R:1}" />
        </rule>
        <rule name="CanonicalHostNameRule3" stopProcessing="true"><!--匹配www.alufoil.cn,80端口，即http://www.alufoil.cn，两个条件精准匹配-->
          <match url="(.*)" />
          <conditions>
            <add input="{HTTP_HOST}" pattern="^www\.alufoil\.cn$" />
            <add input="{SERVER_PORT}" pattern="80" />
          </conditions>
          <action type="Redirect" url="https://www.alufoil.cn/{R:1}" />
        </rule>
      </rules>
 <!--排除https开头的域名-->
      <rewriteMaps>
        <rewriteMap name="MapProtocol">
          <add key="on" value="https" />
          <add key="off" value="http" />
        </rewriteMap>
      </rewriteMaps>
    </rewrite>

规则里是通过服务器变量进行匹配的，比如{HTTP_HOST}、{SERVER_PORT}等

服务器变量参考：https://msdn.microsoft.com/zh-CN/Library/ms524602.aspx

可以通过 Request.ServerVariables(“SERVER_NAME”) 关键词去搜索具体例子

 

下面举个错误的例子：

此代码通过rewriteMaps使得规则只匹配http协议，跳过了https协议，所以导致https://alufoil.cn不生效，不能跳转

<rewrite>
      <rules>
        <rule name="301" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTPS}" pattern="^on$" negate="true" />
          </conditions>
          <action type="Redirect" url="https://www.alufoil.cn/{R:1}" redirectType="Permanent" />
        </rule>
      </rules>
      <rewriteMaps>
        <rewriteMap name="MapProtocol">
          <add key="on" value="https" />
          <!--排除https开头的域名-->
          <add key="off" value="http" />
        </rewriteMap>
      </rewriteMaps>
    </rewrite>

 

IIS全站把http做301到https，且排除域名的web.config规则最先出现在Windy's Blog。

]]> 怎样把SSL证书转为PEM格式？ http://www.5756653.cn/how-to-ssl-pxf2pem.html Thu, 23 Aug 2018 02:57:39 +0000 http://www.5756653.cn/?p=763 相信部分同学遇到过需要把SSL证书pxf转换为PEM格式吧，网上教程要下载openssl安装后来进行转换，但是我装了，在命令行里提示openssl不是可执行的程序，我估计是环境变量没有设置好，懒得这样折腾了，我这里给出个不同的方法，很简单的就能吧你的iis能用的SSL证书转成li […]

怎样把SSL证书转为PEM格式？最先出现在Windy's Blog。

]]> 相信部分同学遇到过需要把SSL证书pxf转换为PEM格式吧，网上教程要下载openssl安装后来进行转换，但是我装了，在命令行里提示openssl不是可执行的程序，我估计是环境变量没有设置好，懒得这样折腾了，我这里给出个不同的方法，很简单的就能吧你的iis能用的SSL证书转成linux能用的PEM的格式。我转换的目的是需要把pem格式中的内容绑定证书到Amazon AWS Certificate Manager中做Cloudfront的CDN功能使用。

前提：

1，有了SSL证书

2，有生成SSL证书时生成的随机密码

只要有以上两个条件，就可以轻松在SSL和PEM之间转换了。

打开：https://www.zzidc.com/ssl/sslTools，选择左侧证书转换工具，源格式pxf，目标格式PEM，上传证书文件，输入PFX证书密码，点击转换证书格式，数秒后会弹出下载窗口，将会下载到一个zip压缩包

解压后有两个文件。一个后缀为pem，另一个后缀为key。用记事本打开pem文件，第一个begin-end之间即为证书正文，第二个begin-end之间即为证书链；pem文件即为私匙

看了我的文章你也会发现把pxf格式的证书转成pem格式是不是很简单啊？

 

怎样把SSL证书转为PEM格式？最先出现在Windy's Blog。

]]> 怎样配置亚马逊Cloudfront进行全球CDN加速amazon AWS http://www.5756653.cn/how-to-set-amazon-cloudfront-cdn.html Thu, 23 Aug 2018 01:03:22 +0000 http://www.5756653.cn/?p=761 亚马逊Cloudfront是国际顶尖的CDN加速服务，网上找了几个配置教程，都是在说道理，没有讲一步步怎么操作，特别是关于域名解析部分，我这里说下配置方法，适合小白操作。 8月谷歌速度算法更新，网站受到影响很大，平日里每周十几二十个精准询盘，自从更新后，每周寥寥几个，对业务影响很 […]

怎样配置亚马逊Cloudfront进行全球CDN加速amazon AWS最先出现在Windy's Blog。

]]> 亚马逊Cloudfront是国际顶尖的CDN加速服务，网上找了几个配置教程，都是在说道理，没有讲一步步怎么操作，特别是关于域名解析部分，我这里说下配置方法，适合小白操作。

8月谷歌速度算法更新，网站受到影响很大，平日里每周十几二十个精准询盘，自从更新后，每周寥寥几个，对业务影响很大。无奈只能随着算法去修改。

网站内容结构经过各种修改，移动端优化到99分了，不过还有些bug，js异步调用会有问题，把首屏关键css写入到html中使得html文件增加了不小，再一个优化就需要CDN加速了。

服务器用的是亚马逊的EC2，所以就选择了亚马逊的Cloudfront来进行全球，这里只说方法，不解释原因。

准备工作：

1.如果开了亚马逊的Cloudfront服务，会自动生成一个域名*.cloudfront.net（以下称这个域名为“B”，称你网站的域名为“A”），需要把你的主站域名cname到这个域名上

2.网站域名修改：①新解析一个cdn.domain.com(称之为“C”)到服务器作为回源域名，Cloudfront需要从这个域名中取得需要缓存的文件，②把域名A的记录CNAME解析为B，让用户访问了你的域名，从亚马逊给到的*.cloudfront.net域名中读取内容，而非你的域名本身。而C域名的用途则是让Cloudfront取得数据的。备注：如果没有这个C，直接从A取数据，想想一下流程，用户访问A，A会cname到B，B又从A取数据，一直这样循环下去，502是必然的

3.做了https的需要下准备好PEM版的证书文件，如果只有pfx格式的，请参考怎样把SSL证书转为PEM格式？

按如下步骤开始设置：

设置完成后，直接提交即可，cloudfront即开始从源域名缓存文件，需要等20分钟左右。

需要把www.yuming.com做Cname解析到生成的xxxx.cloudfront.net域名上,用户才可正确的访问CDN加速后的内容。

证书添加：

https://console.aws.amazon.com/acm/home?region=us-east-1

打开以上网址，点导入证书。

用记事本打开pem文件，第一个begin-end之间即为证书正文，第二个begin-end之间即为证书链；key文件即为私匙，填好，导入即可

怎样配置亚马逊Cloudfront进行全球CDN加速amazon AWS最先出现在Windy's Blog。

]]> google速度算法更新，网站性能如何优化之javascript和css篇 http://www.5756653.cn/google-speed-seo.html Tue, 21 Aug 2018 01:16:05 +0000 http://www.5756653.cn/?p=759 之前看过Yahoo团队写的一篇关于网站性能优化的文章，文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化，他提到了如下几点： CSS性能优化 1、把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速 […]

google速度算法更新，网站性能如何优化之javascript和css篇最先出现在Windy's Blog。

]]> 之前看过Yahoo团队写的一篇关于网站性能优化的文章，文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化，他提到了如下几点：

CSS性能优化

1、把样式表置于顶部

现把样式表放到文档的< head />内部似乎会加快页面的下载速度。这是因为把样式表放到< head />内会使页面有步骤的加载显示。

注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。

把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。

HTML规范清 楚指出样式表要放包含在页面的< head />区域内：“和< a />不同，< link />只能出现在文档的< head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档< head />内加载你的样式表。

2、避免使用CSS表达式（Expression）

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性 必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你 页面的性能产生影响。

3、使用外部JavaScript和CSS

很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一 个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。

对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。

4、削减JavaScript和CSS

精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。我之前的一篇文章关于前端部署的，ant+YUI Compressor 地址是：http://www.haorooms.com/post/ant_yuicom 小工具中也有ant的用法：http://www.haorooms.com/tools/ant_book/

混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来 代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。

除消减外部的脚本和样式表文件外，< script>和< style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本 和样式表，精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加，消减代码将会获得益处。

5、用代替@import

前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。

在IE中，页面底部@import和使用< link>作用是一样的，因此最好不要使用它。

6、避免使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的 呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

javascript性能优化

1、把脚本置于页面底部

脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。

在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了document.write来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。

一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write，它告诉浏览器继续显示。不幸的 是，Firefox并不支持DEFER属性。在Internet Explorer中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。

2、使用外部JavaScript和CSS

同上，css中写了，我之前文章中列举了一下cdn，可以调用外部的。

3、削减JavaScript和CSS

同上，css中写了

4、剔除重复脚本

在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在重复引 用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。如果真的存在这种情况，重复脚本会引起不必要的HTTP请求和 无用的JavaScript运算，这降低了网站性能。

在Internet Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产 生额外的HTTP请求。

除增加额外的HTTP请求外，多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用< script />标签引用脚本的最常见方法就是：

&lt;script type="text/javascript" src="menu_1.0.17.js"&gt;&lt;/script&gt;

在PHP中可以通过创建名为insertScript的方法来替代：

&lt;?php insertScript("menu.js") ?&gt;

为了防止多次重复引用脚本，这个方法中还应该使用其它机制来处理脚本，如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

5、减少DOM访问

使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：

缓存已经访问过的有关元素

线下更新完节点之后再将它们添加到文档树中

避免使用JavaScript来修改页面布局

6、开发智能事件处理程序

有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。

你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。

如何加载JS，JS应该放在什么位置研究

外部JS的阻塞下载

所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理， 当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回 后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.

阻塞下载图：下图是访问blogjava首页的时间瀑布图，可以看出来开始的2个image都是并行下载的，而后面的2个JS都是阻塞下载的(1个1个下载)。

嵌入JS的阻塞下载

嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外部的JS会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS又会是怎样阻塞的了，看下面的列2个代码：

**代码1：** 

&lt; div &gt;
         &lt; ul &gt;
             &lt; li &gt; blogjava &lt;/ li &gt;
             &lt; li &gt; CSDN &lt;/ li &gt;
             &lt; li &gt; haorooms博客 &lt;/ li &gt;
             &lt; li &gt; ABC &lt;/ li &gt;
             &lt; li &gt; AAA &lt;/ li &gt;
         &lt; ul &gt;     
     &lt;/ div &gt;
     &lt; script  type ="text/javascript" &gt;
        // 循环5秒钟
         var  n  =  Number( new  Date());
     var  n2  =  Number( new  Date());
    while ((n2  -  n)  &lt;  ( 6 * 1000 )){
       n2  =  Number( new  Date());
     }
     &lt;/ script &gt;
   &lt; div &gt;
         &lt; ul &gt;
             &lt; li &gt; MSN &lt;/ li &gt;
             &lt; li &gt; GOOGLE &lt;/ li &gt;
             &lt; li &gt; YAHOO &lt;/ li &gt;
         &lt; ul &gt;     
&lt;/ div &gt;

运行后，会发现代码1中，在前5秒中页面上是一篇空白，5秒中后页面全部显示。 代码2中，前5秒中blogjava,csdn等先显示出来，5秒后MSN才显示出来。

可以看出嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。

嵌入JS导致CSS阻塞加载的问题

CSS怎么会阻塞加载了？CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载，下面的测试在非IE6下进行)：

代码1(为了效果，这里选择了1个国外服务器的CSS)：

&lt; html  xmlns ="http://www.w3.org/1999/xhtml" &gt;
         &lt; head &gt;
           &lt; title &gt; js test &lt;/ title &gt;
           &lt; meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   /&gt;  
           &lt; link  type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   /&gt;
         &lt;/ head &gt;
         &lt; body &gt;
             &lt; img  src ="http://www.haorooms.com/images/logo.gif"   /&gt;&lt; br  /&gt;
              &lt; img  src ="http://www.haorooms.com/images/csdnindex_piclogo.gif"   /&gt;
         &lt;/ body &gt;
&lt;/ html &gt;

时间瀑布图：

代码2(只加了1个空的嵌入JS)：

&lt; head &gt;
     &lt; title &gt; js test &lt;/ title &gt;
     &lt; meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   /&gt;  
   &lt; link  type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   /&gt;
   &lt; script  type ="text/javascript" &gt;
         function  a(){}
   &lt;/ script &gt;
&lt;/ head &gt;
&lt; body &gt;
         &lt; img  src ="http://www.haorooms.com/images/logo.gif"   /&gt;&lt; br  /&gt;
         &lt; img  src ="http://www.haorooms.com/images/csdnindex_piclogo.gif"   /&gt;
&lt;/ body &gt;

时间瀑布图:

从时间瀑布图中可以看出，代码2中，CSS和图片并没有并行下载，而是等待CSS下载完毕后才去并行下载后面的2个图片，当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。

有人可能会问，这里为什么不说说嵌入的JS阻塞了后面的资源，而是说CSS阻塞了？ 想想我们现在用的是1个空函数，解析这个空函数1ms就够，而后面2个图片是等CSS下载完1.3s后才开始下载。大家还可以试试把嵌入JS放到CSS前 面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置

1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2、如果嵌入JS放在head中，请把嵌入JS放在CSS前面。
3、使用defer
4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用,关于settimeout

google速度算法更新，网站性能如何优化之javascript和css篇最先出现在Windy's Blog。

]]> og标签对SEO的作用及用法 http://www.5756653.cn/og-label-seo.html Sat, 21 Apr 2018 12:03:19 +0000 http://www.5756653.cn/?p=749 og标签对SEO的作用及用法 meta property=og标签对SEO的作用及用法，如果你仔细观察会发现本站点<head>代码中有一段：”property=”og:image”这段代码是什么意思呢？property=” […]

og标签对SEO的作用及用法最先出现在Windy's Blog。

]]> og标签对SEO的作用及用法

meta property=og标签对SEO的作用及用法，如果你仔细观察会发现本站点<head>代码中有一段：”property=”og:image”这段代码是什么意思呢？property=”og:image可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。
富媒体标签SEO

不理解Meta Property=og标签是什么意思，以及对SEO的影响，看一下下面的介绍。
Meta Property=og标签是什么呢?
og是一种新的HTTP头部标记，即Open Graph Protocol：

The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

即这种协议可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

 Open Graph Protocol应用指南
参与到Open Graph Protocol的好处
● 能够正确的分享您的内容到SNS网站

● 帮助您的内容更有效的在SNS网络中传播
Meta Property标签的应用
● 按照您网页的类型，在<head>中添加入meta标签,并填上相应的内容
● 如果一个页面上有多个需要标识出的内容怎么办？

您可以重复meta标签，将认为og:type 标签是每一段内容的起始处，例如：
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”云优化：让营销更精准”/>
<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C4″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XMTIyMTY5NzMy&isAutoPlay=true/v.swf”/>
<meta property=”og:width” content=”500″ />
<meta property=”og:height” content=”416″ />
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”云优化：让营销更精准_AA”/>
<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C44444″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XXXXXXXXXXXXMTIyMTY5NzMy&isAutoPlay=true/y.swf”/>
<meta property=”og:width” content=”600″ />
<meta property=”og:height” content=”716″/>

● 安装SNS网站插件如人人网插件，同样会出现Meta Property标签，卸载后可以去除。

 使用Open Graph Protocol应注意
meta property=og代码的功能并不等同于网页的meta name标签，两者针对的对象不一致，功能不同。

如果网站上要使用Open Graph Protocol，那么，meta property=og和meta name、Title标签应同时赋值。
文章开头举例的B2C网站，<head>如下：
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>Cool Gadgets at the Right Price – Worldwide Free Shipping – ******</title>
<meta property=”og:title” content=”**’sFacebook” />
<meta property=”og:type” content=”product”/>
<meta property=”og:url” content=”http://www.******.com” />
<meta property=”og:image” content=”http://www.******.com/logo.gif”/>
<meta property=”og:site_name” content=”******.COM” />
<meta property=”og:description” content=”CoolGadgets at the RightPrice – Worldwide Free Shipping – ******”/>
<meta property=”fb:admins” content=”100001422224225″ />
<meta property=”fb:page_id” content=”241333394220″/>
<link href=”/css/reset.css” rel=”stylesheet”type=”text/css” />
<link href=”/css/default/all.16666.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”/shop.js”></script>
<script type=”text/javascript” src=”/scripts/all.16666.build.js”></script> )
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<meta name=”description” content=”Online shopping for cool gadgets at the right price. ” />
<meta name=”keywords” content=”cool gadgets, cheap gadgets, free shipping” />
</head>

如果你用上了Meta Property标签，你得在后台设置好，不然，就是空白.

     Open Graph Protocol对SEO的影响
有些人使用所谓的网站质量在线检测，检测后结果提示Meta Property=og这段代码有问题，特别是一些SEO的检测，更是提示“特别错误”！然后删除Meta Property=og代码，检测正常。
因此担心Meta Property=og这段代码会对网站照成不良影响。
其实Open Graph Protocol并不会对SEO照成不良影响，相反，应用的合理，非常有利于网站的推广。

前一阵子在分析竞争对手时，看到某个英文外贸B2C页面<head>代码中有一段：<meta property=”og:title” content=”**’s Facebook” /> 

<meta property=”og:type” content=”product”/> 

<meta property=”og:url” content=”http://www.******.com” /> 

<meta property=”og:image” content=”http://www.******.com/logo.gif” /> 

<meta property=”og:site_name” content=”******.COM” /> 

<meta property=”og:description” content=”Cool Gadgets at the Right Price – Worldwide Free Shipping -******” /> 

<meta property=”fb:admins” content=”100001422224225″ /> 

<meta property=”fb:page_id” content=”241333394220″ /> 

不理解Meta Property=og标签是什么意思，以及对SEO的影响，就查了些资料。

Meta Property=og标签是什么呢?

og是一种新的HTTP头部标记，即Open Graph Protocol：

The Open Graph Protocol enables any web page to become a rich object in a social graph. 

即这种协议可以让网页成为一个“富媒体对象”。

用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

Open Graph Protocol应用指南

参与到Open Graph Protocol的好处

● 能够正确的分享您的内容到SNS网站

● 帮助您的内容更有效的在SNS网络中传播

Meta Property标签的应用

● 按照您网页的类型，在<head>中添加入meta标签,并填上相应的内容

● 如果一个页面上有多个需要标识出的内容怎么办？

您可以重复meta标签，将认为og:type 标签是每一段内容的起始处，例如：

<meta property=”og:type” content=”video”/> 

<meta property=”og:title” content=”云优化：让营销更精准”/>

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C4″/>

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/> 

<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XMTIyMTY5NzMy&isAutoPlay=true/v.swf”/>

<meta property=”og:width” content=”500″ /> 

<meta property=”og:height” content=”416″ /> 

<meta property=”og:type” content=”video”/> 

<meta property=”og:title” content=”云优化：让营销更精准_AA”/> 

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C44444″/> 

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/> 

<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XXXXXXXXXXXXMTIyMTY5NzMy&isAutoPlay=true/y.swf”/> 

<meta property=”og:width” content=”600″ /> 

<meta property=”og:height” content=”716″/> 

● 安装SNS网站插件如人人网插件，同样会出现Meta Property标签，卸载后可以去除。

Protocol Element 协议元素

说明: 

1. Null 表示是否允许为空

2. Mult 表示是否允许重复

3. Y 允许

4. N 禁止

Base Element基本类型

og:type 网页资源类型标识

Null Mult
N N

content enum: 

● video 视频

● audio 音频

● link 链接

● photo 图片

● product 产品

og:title 标题描述

Null Mult
N N

og:image 缩略图

Null Mult
Y Y
 

og:url 当前内容链接

Null Mult
Y N

rr:appid 如果您的网站是CONNECT到renren.com的，请提供该ID 

Null Mult
Y N

Video Element 视频

og:videosrc 视频资源链接，例如可是播放视频的flash地址

Null Mult
N Y

og:width 视频的宽度

Null Mult
Y Y

og:height 视频的高度

Null Mult
Y Y

例如：

<meta property=”og:type” content=”video” /> 

<meta property=”og:title” content=”云优化：让营销更精准” /> 

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C4″/>

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/> 

<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XMTIyMTY5NzMy&isAutoPlay=true/v.swf”/>

<meta property=”og:width” content=”500″ /> 

<meta property=”og:height” content=”416″ /> 

<meta property=”og:type” content=”video”/> 

<meta property=”og:title” content=”云优化：让营销更精准” /> 

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464AC21FF0B3ED00F48F151F43D4BF-5F0F-BD39-76EA-E5E20A1887C4″/>

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/> 

<meta property=”og:videosrc” content=”http://player.youku.com/player.php/sid/XMTIyMTY5NzMy&isAutoPlay=true/v.swf”/>

<meta property=”og:width” content=”500″/> 

<meta property=”og:height” content=”416″/>

Audio Element 音频

类似http://domain/some.mp3 直接从mp3获取信息，以下指从音乐播放网页获取

og:audiosrc 音乐资源链接，例如可是播放歌曲的flash地址

Null Mult
N Y

og:artist 音乐家

Null Mult
Y N

例如：

<meta property=”og:type” content=”audio” /> 

<meta property=”og:title” content=”小酒窝” /> 

<meta property=”og:image” content=”http://…./xx.jpg” /> 

<meta property=”og:url” content=”http://somedomain.com/aaamp3.html” /> 

<meta property=”og:audiosrc” content=”http://somedomain.com/audioplayer.swf?s=xxx.mp3″ /> 

<meta property=”og:artist” content=”林俊杰A,林俊杰B” />


Commen Page Element 普通网页

og:abstract 内容摘要

Null Mult
N N

og:contentid 内容主体的ID，用来标识当前页面主要内容所处的HTML标签的ID 

Null Mult
Y N

例如：

<meta property=”og:type” content=”link” /> 

<meta property=”og:title” content=”文艺青年摄影装逼完全指南v2.4*冲片+针孔教程” /> 

<meta property=”og:image”content=”/yingxiao/UploadFiles_4687/201603/20160308141820615.png” /> 

<meta property=”og:url”content=”http://www.douban.com/group/topic/10560486/” /> 

<meta property=”og:abstract” content=”前言：本人从00年开始玩数码相机，之后一直致力于从事摄影装逼这一光荣的职业，在此将自己多年总结的经验传授给大家，让大家在这条光辉的道路上少走弯路，一逼到底。鉴于咱们入单反装逼的文青们一开始预算都不多，本文将会主要侧重于如何在有限的器材的情况下装逼最大化，你要是已经有若干红圈儿金圈儿SBEX什么的，想必此篇文章的主旨你早已心领神会，就算你说自己不装逼，就像有人混豆瓣还死活不承认自己是文青。本文中所有图片，除了特别注明，均为本人亲自拍摄，是本人装逼之路的真实见证。欢迎转载，但是最近更新可能会比较频繁，请把原帖地址” /> 

<meta property=”og:contentid” content=”topic” />


Graphic Element 图片

og:photo 图片列表

Null Mult
Y Y

og:width 图片宽度

Null Mult
Y Y

og:height 图片高度

Null Mult
Y Y

例如：

<meta property=”og:type” content=”photo” /> 

<meta property=”og:title” content=”发国·招贴(2)” /> 

<meta property=”og:image”content=”/yingxiao/UploadFiles_4687/201603/20160308141820588.jpg”/> 

<meta property=”og:url” content=”http://www.douban.com/photos/photo/487762954/” />

<meta property=”og:photo”content=”/yingxiao/UploadFiles_4687/201603/20160308141820502.jpg”/> 

<meta property=”og:photo”content=”/yingxiao/UploadFiles_4687/201603/20160308141820407.jpg”/>


Product Element 商品

og:price 产品价格

Null Mult
N N

og:description 产品描述

Null Mult
Y N

og:nick 店铺名

Null Mult
Y N

og:postfee 运费

Null Mult
Y N

例如：

<meta property=”og:type” content=”product” /> 

<meta property=”og:title” content=”蚁族—大学毕业生聚居村实录”/> 

<meta property=”og:image”content=”/yingxiao/UploadFiles_4687/201603/20160308141820694.jpg” /> 

<meta property=”og:url”content=”http://product.dangdang.com/product.aspx?product_id=20684969&ref=book-02-L”/>

<meta property=”og:price” content=”18.80″ /> 

<meta property=”og:postfee” content=”5.00″ /> 

<meta property=”og:description” content=”“蚁族”，是对“高校毕业生低收入聚居群体”的典型概括。该群体高知、弱小、聚居，是继三大弱势群体（农民、农民工、下岗职工）之后的第四大弱势群体：他们受过高等教育，主要从事保险推销、电子器材销售、广告营销、餐饮服务等临时性工作，有的甚至处于失业半失业状态；他们平均月收入低于两千元，绝大多数没有“三险”和劳动合同；他们平均年龄集中在22—29岁之间，九成属于“80后”一代；他们主要聚居于城乡结合部或近郊农村，形成独特的“聚居村”。他们是有如蚂蚁般的“弱小强者”，他们是鲜为人知的庞大群体。” /> 

<meta property=”og:nick” content=”当当网” />


使用Open Graph Protocol应注意

Meta Property=og代码的功能并不等同于网页的meta name标签，两者针对的对象不一致，功能不同。

如果网站上要使用open graph protocol，那么，Meta Property=og和Meta Name、Title标签应同时赋值。

文章开头举例的B2C网站，<head>如下：

<head> 

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /> 

<title>Cool Gadgets at the Right Price – Worldwide Free Shipping – ******</title> 

<meta property=”og:title” content=”**’sFacebook” /> 

<meta property=”og:type” content=”product”/> 

<meta property=”og:url” content=”http://www.******.com” /> 

<meta property=”og:image” content=”http://www.******.com/logo.gif”/> 

<meta property=”og:site_name” content=”******.COM” /> 

<meta property=”og:description” content=”Cool Gadgets at the Right Price – Worldwide Free Shipping – ******”/> 

<meta property=”fb:admins” content=”100001422224225″ /> 

<meta property=”fb:page_id” content=”241333394220″/> 

<link href=”/css/reset.css” rel=”stylesheet” type=”text/css” /> 

<link href=”/css/default/all.16666.css” rel=”stylesheet” type=”text/css” /> 

<script type=”text/javascript” src=”/shop.js”></script> 

<script type=”text/javascript” src=”/scripts/all.16666.build.js”></script> 

<meta http-equiv=”Content-Type”content=”text/html;charset=utf-8″ /> 

<meta name=“description” content=”Online shopping for cool gadgets at the right price. ” /> 

<meta name=“keywords” content=”cool gadgets, cheap gadgets, free shipping” /> 

</head> 

如果你用上了meta property标签，你得在后台设置好，不然，就是空白.

Open Graph Protocol对SEO的影响

有些人使用所谓的网站质量在线检测，检测后结果提示Meta Property=og这段代码有问题，特别是一些SEO的检测，更是提示“特别错误”！然后删除Meta Property=og代码，检测正常。

因此担心Meta Property=og这段代码会对网站照成不良影响。

其实Open Graph Protocol并不会对SEO照成不良影响，相反，应用的合理，非常有利于网站的推广。

og标签对SEO的作用及用法最先出现在Windy's Blog。

]]> 老毛子固件彩蛋你知道吗？ http://www.5756653.cn/laomaozi-caidan-kaiqi-ss.html Mon, 09 Apr 2018 07:20:42 +0000 http://www.5756653.cn/?p=746 荒野无灯，灯大的老毛子固件(Padavan )很不错，路由都是刷的这个估计，稳定，安全，功能上基本满足需求。 但由于一些特殊原因，有些功能不得不被取消，其实是没有执行，固件里还是有的，路由更新了新版本之后你会发现有些常用的功能都没了 登进路由器后台，高级设置–系统管理 […]

老毛子固件彩蛋你知道吗？最先出现在Windy's Blog。

]]> 荒野无灯，灯大的老毛子固件(Padavan )很不错，路由都是刷的这个估计，稳定，安全，功能上基本满足需求。

但由于一些特殊原因，有些功能不得不被取消，其实是没有执行，固件里还是有的，路由更新了新版本之后你会发现有些常用的功能都没了

登进路由器后台，高级设置–系统管理–控制台：

在文本框里输入以下命令，每次一行，要点刷新，最后F5刷新后台页面，你会发现多了一些功能

注：红色背景的不是命令，无需执行

 s------s 
nvram set google_fu_mode=0xDEADBEEF
 KMS 
nvram set ext_show_lse=1

nvram commit

 

老毛子固件彩蛋你知道吗？最先出现在Windy's Blog。

]]>