WordPress网站的JSON-LD及熊掌号搜索结果出图改造教程,搞定季风算法&极光算法

此前提到百度极光算法,对时间因子的提交做出了要求,因此需要改造网页,加入JSON-LD结构化数据实现提交。

而极光算法要求的提交格式,和熊掌号的“号主页展现”以及“搜索结果出图”是同样的。JSON-LD也有利于谷歌等搜索引擎识别网页内容。因此改造的利好多多,本教程将同时介绍JSON-LD改造和熊掌号页面改造,其中熊掌号部分会单独标出,只需要JSON-LD可以忽略。

json ld - article, sharing - WordPress网站的JSON-LD及熊掌号搜索结果出图改造教程,搞定季风算法&极光算法

关于熊掌号ID

熊掌号ID(即改造代码内的appid字段)是需要开通熊掌号的,开通流程类似百家号。可以登录百度站长平台(ziyuan.baidu.com)查看。后文介绍的所有出现appid字段的地方,如果你没有熊掌号ID,请直接删除那一行或填写None或留空(三选一即可)。

 

JSON-LD的改造

在你看这部分并改造网站之前,首先请了解:JSON-LD是可以通过一些插件改造的,你可以先尝试一下它们是否和你的主题匹配。另外,在改造前,请备份您的整个主体文件(或至少备份下面要修改的文件),以保证误操作后可以恢复。

由于JSON-LD需要用JS的方式提交:标题、摘要(Description)、URL、图片、发布日期、修改日期等内容,其中有些是内置PHP语句可以直接抓取的,而页面内的图片(链接)以及页面的描述需要我们另外写语句去抓取。

对于描述你可以选择用JS抓取,并引用一个全局变量,但首先JS是明文,会破坏页面代码的简约型,其次部分主题可能不支持自动生成描述。在WordPress中我们可以直接使用PHP,你可以在functions.php中加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//获取文章/页面摘要
//代码来自张子凡的博客,https://zhangzifan.com/
function fanly_excerpt($len=220){
    if ( is_single() || is_page() ){
        global $post;
        if ($post->post_excerpt) {
            $excerpt  = $post->post_excerpt;
        } else {
            if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){
                $post_content = $result['1'];
            } else {
                $post_content_r = explode("\n",trim(strip_tags($post->post_content)));
                $post_content = $post_content_r['0'];
            }
            $excerpt = preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,0}'.'((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s','$1',$post_content);
        }
        return str_replace(array("\r\n", "\r", "\n"), "", $excerpt);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//获取文章中的图
//代码来自张子凡的博客,https://zhangzifan.com/
function fanly_post_imgs(){
    global $post;
    $src = '';
    $content = $post->post_content;  
    preg_match_all('/<img .*?src=["|\'](.+?)["|\'].*?>/', $content, $strResult, PREG_PATTERN_ORDER);  
    $n = count($strResult[1]);  
    if($n >= 3){
        $src = $strResult[1][0].'","'.$strResult[1][1].'","'.$strResult[1][2];
    }elseif($n >= 1){
        $src = $strResult[1][0];
    }
    return $src;
}

 

注:你可以在WordPress后台找到外观→编辑,在右侧点击function.php,在最底部加入上述代码即可。或者通过FTP的形式查找,它一般位于:/wwwroot/wp-content/themes/THEME-NAME/(根据你的主机目录会有所区别)。

剩下的参数我们都可以用内置语句来调取。打开header.php,找到<head>标签,向后继续寻找,在</head>标签之前加入下列语句:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
if(is_single()){
    echo '<script type="application/ld+json">{
    "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
    "@id": "'
.get_the_permalink().'",
    "appid": "你的熊掌号ID,如果没有删掉这行",
    "title": "'
.get_the_title().'",
    "images": ["'
.fanly_post_imgs().'"],
    "description": "'
.fanly_excerpt().'",
    "pubDate": "'
.get_the_time('Y-m-d\TH:i:s').'",
    "upDate": "'
.get_the_modified_time('Y-m-d\TH:i:s').'",
    "data":{
        "WebPage":{
            "title":"'
.get_the_title().'",
            "pcUrl":"'
.get_the_permalink().'",
            "wapUrl":"'
.get_the_permalink().'"
        }
    }
}</script>
'
;}
?>

注意代码内的upDate、WebPage、pcURL、wapURL等参数是为极光算法添加的,如果你只需要进行熊掌号改造,可以删除这四个参数的部分。

pcURL和wapURL分别对应PC站点和移动站点的链接,如果你的页面不是响应式,请按照你自己的网站链接规则改变这两个参数的内容。如果你已经进行过mip改造,可以额外加入mipURL这条。Data这部分参数还有很多扩展空间,谷歌等搜索引擎都有关于它的架构建议,有兴趣可以搜索JSON-LD查看。

注:

  1. 如果你找不到</header>标签,请注意php内是否调用了其他php模板,找到对应的php模板,即可看到</header>标签。
  2. 百度表示移动站是要求提交appid的,pc站并不需要。
  3. 请根据本文提示,将代码加在</header>之前,即<header>标签的结尾,防止header内原本的php调用出现问题。

 

熊掌号改造:ID声明

将下面的代码添加到</header>之前,建议放在上述JSON-LD之前,二者紧挨着就可以。

1
<script src="//msite.baidu.com/sdk/c.js?appid=你的熊掌号ID "></script>

 

熊掌号改造:关注功能

关注功能有3种样式,可以自行尝试。下图是吸顶Bar的样式,很简约,个人比较喜欢。

xidingbar - article, sharing - WordPress网站的JSON-LD及熊掌号搜索结果出图改造教程,搞定季风算法&极光算法

挑选下面的代码,加载<body></body>内合适的位置,如果你只希望文章页面出现,可以加在single.php内。

吸顶bar:

1
<script>cambrian.render('head')</script>

文章段落间bar:

1
<script>cambrian.render('body')</script>

底部bar:

1
<script>cambrian.render('tail')</script>

注:关注功能不是强制添加的,不影响熊掌号收录。而且说实话由于必须安装了百度APP才能用,所以体验并不是很好……

 

熊掌号改造:号主页展现&搜索结果出图

如果你完成了上述的JSON-LD改造,这两块就已经完成了。

号主页展现要求:@context、@id、appid、title、pubDate完整填写。

而搜索结果出图要求:images完整填写(0-3个图片链接)。

xiongzhang - article, sharing - WordPress网站的JSON-LD及熊掌号搜索结果出图改造教程,搞定季风算法&极光算法

测试

完成上述工作后,你可以在百度熊掌号管理页面,点击左侧的粉丝关注→在线校验工具,将内页的链接填在URL框内,将完整的html代码贴在下方的对话框内,即可得知改造是否成功。

chenggong - article, sharing - WordPress网站的JSON-LD及熊掌号搜索结果出图改造教程,搞定季风算法&极光算法

以上就是关于熊掌号和JSON-LD改造的所有内容,祝大家流量翻翻~

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注