真正的勇士,敢于直面惨淡的人生,敢于正视淋漓的鲜血这是怎样的哀痛者和幸福者?

0x00 问题描述

在分享网站时,发现QQ的内置浏览器无法抓取文章的标题、描述和头图,只有一串链接,顿时觉得很唠。

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图

0x01 寻找原因

为了排除CDN的问题,我使用了几个蜘蛛工具尝试地抓取了我的页面,结果全部顺利地抓取到了。

接下来我使用了某60和某站长工具的抓取诊断工具,也是正常地抓取到了网页,并且所以信息正常,由此猜测:可能是meta类的问题。

作为一个半吊子的安全分析师,这点肯定不能忍,一定要追寻完美!

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图1

0x01 寻找办法

在通过百度等搜索引擎的帮助下,发现了大多数网友的答案都是在网页的

<head></head>

添加<meta itemprop="" content="" />

有了这样的方案,那么我们就要来亲手实践。

0x02 编写代码

因为使用的是WordPress,所以我们这里找到主题编辑器,在线编辑文件

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图2

找到主题页眉,并且找到<head>标签

开始操作

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图3

我这里使用的是nicetheme的主题,所以我直接选择调用主题的函数

为了更加的清晰明了我们添加的代码,所以这里我分成了两段,并且改了下变量名避免与后续的重复

<?php
$m_title = get_the_title();//获取标题
$m_image = pandapro_post_thumbnail_src();//获取头图
$meta_description = pandapro_print_excerpt(150, $post, false);//获取文章描述
?>
<?php 
	if(is_singular('post'))//判断是否是文章 是则显示以下内容
	{
		echo '<meta itemprop="name" content="'.$m_title.'" />';
		echo '<meta itemprop="image" content="'.$m_image.'" />';
		echo '<meta itemprop="description" content="'.$meta_description.'" />';
	}
?>	

将以上代码添加到主题后,点击保存,赶紧刷新页面查看效果!

0x03 问题解决

刷新页面后,搜索自己的<meta>标签是否显示

单击右键查看源码

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图4

好的 这里已经可以清楚地看到 我们添加的meta已经显示出来了,在QQ中分享网站查看效果:

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图5

显示了文章卡片,手机QQ也是一样。

WordPress:QQ无法获取你的文章标题怎么办?一招让你的网页分享变得高大上插图6