Menu

Get Socialize

SERP中URL如何做结构化数据?wordpress设置规范面包屑导航的代码技巧

推广说 2018年9月5日 1275 没有评论

URL结构化数据可能有很多人没有听说过。但是凡是用过Google都会注意到,当你搜索词汇,下方结果中必定有URL,并且Google会用 “深绿色” 给标注出来。如下图这样:

Google会用 “深绿色” 给标注 URL

对,就是上图绿色的部分。这里很多人都或说,什么?URL这个也能优化?

没错,URL做没做结构化数据效果是不一样的。这篇文章当中会告诉大家,URL如果做到标准的结构化。

别急,我们先从基础开始说。

先来看一张做过URL结构优化的网站:

做过URL结构优化的网站

有没有发现区别没有?很酷对不对?

对的,URL结构化了,其实搜索引擎在展现上图的时候,会把网站的结构也展示在了用户面前。这样的网站更加利于展现,同时对网站排名的CTR(点击通过率)有影响,可以间接的提升网站的排名。

是什么东西会出现这样标准的URL结构呢?

其实看标题就知道,规范的面包屑导航

如果你不知道什么是面包屑导航,可以看下维基百科的定义

为什么要说规范的面包屑导航呢?其实网站模板各不相同,导致搜索引擎可没办法聪明的判断是哪个才是你得面包屑。所以,必须得把面包屑导航代码标准化、规范化,搜索引擎才有可能识别。这样在SERP页面才会展示出标准的URL结构。

WordPress网站如何制作标准的URL结构?

首先,你需要如下几个东西

  • 你得找到你自己网站的文章或者产品页面模板
  • 你得和我一样对php有一点了解
  • 你得会点英文(废话)

第一点:找到文章或者产品页面模板

一般来说,文章页面产品页面模板在wordpress后台左侧,外观->编辑中查看。

一般命名为 single.php或者是content.php(这个需要根据模板查看)

找到之后下面就要写代码了。

一般来说,我们文章页的URL结构,会以下面的方式进行展示:

Brand Name > Category > Post title

由于面包屑导航都是可以点击的,所以一般会如下这边设置导航的文字展现。

Brand Name(首页链接)> Category(对应产品的分类链接)> Post title(不设置链接)

Brand Name的代码部分很好写

  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="你的首页链接">
        <span itemprop="name">你的品牌词</span></a>
    <meta itemprop="position" content="1" />
  </li>

获取文章&产品对应category的链接代码,不是特别难,如下:

  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="<?php
$category = get_the_category();
$link = get_category_link( $category[0]->term_id );
$catename = $category[0]->name;
echo $link.'">';
echo '<span itemprop="name">'.$catename.'</span></a>'
?>
    <meta itemprop="position" content="2" />
  </li>

Post title部分的代码,相比分类简单一些:

  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="<?php echo get_permalink();?>">
      <span itemprop="name"><?php the_title(); ?></span></a>
    <meta itemprop="position" content="3" />
  </li>

然后把这三个代码何在一起,并且加入对应的ol标签(ordered list标签),同时加入 “>” 这样的符号,然后还可以加上一个Breadcrumb标识的div标签,得到最终的代码:

<div id="breadcrumbs">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="你的首页链接">
        <span itemprop="name">你的品牌词</span></a>
    <meta itemprop="position" content="1" />
  </li>
>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="<?php
$category = get_the_category();
$link = get_category_link( $category[0]->term_id );
$catename = $category[0]->name;
echo $link.'">';
echo '<span itemprop="name">'.$catename.'</span></a>'
?>
    <meta itemprop="position" content="2" />
  </li>
>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemtype="http://schema.org/Thing"
       itemprop="item" href="<?php echo get_permalink();?>">
      <span itemprop="name"><?php the_title(); ?></span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>
</div>

大功告成!

当然,你可以需要在style.css当中去给你得面包屑导航添加一些样式:

#breadcrumbs{
	background-color: silver;
}
#breadcrumbs>ol{
	font-size:14px;
	list-style:none;
}
#breadcrumbs>ol>li{
	display:inline-flex;
}

如此,最终效果:

URL格式化最终效果

【!注意!】这段代码需要放在文章或者是产品页面的模板当中!

一般我是习惯放在文章标题下方,文章正文内容上方的。想知道为什么?可以看下这个付费的直播课,你就知道为什么了。

推荐观看:【案例分析】机械类-材料类优秀网站案例分析

当让为了然搜索引擎出现结构化URL的效果,那么你需要把之前的的URL全部提交一遍。啥?你还不会提交?下面两节课你看完肯定就会了:

接下来,就交个大家自主尝试咯~

发表评论

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