谷姐:我们都是谷歌迷
We are all Google fans

为WordPress Qux主题增加Open Graph协议:提高网站点击率

Open Graph 是一种互联网协议,最初由 Facebook 创建,是结构化展示网页数据的标准之一。 该协议可以让网站很好地在Facebook、Twitter、Telegram这样国外社交平台上得到展示,和Google搜索结果中的Rich Snippets类似,有利于提高网站宣传时的点击率。

那么如何为网站开启Open Graph协议呢?博主根据Open Graph官网 https://ogp.me/ 的说明,给网站引入了几个基本的meta标签。

一、步骤简记

步骤简记如下:

1. 新增函数

进入 /www/wwwroot/www.goojie.eu/wp-content/themes/qux/func 编辑 functions-theme.php
新增 _the_og_type 和 _the_og_description 函数

function _the_og_type() {
     if (is_singular()) {
        $the_og_type = "article";
     } elseif (is_home()) {
        $the_og_type = "website";
     }
     echo $the_og_type;
     return;
}

function _the_og_description() {
        global $new_description;
        if( $new_description ){
                echo "<meta property=\"og:description\" content=\"$new_description\">\n";
                return;
        }

        global $s, $post;
        $description = '';
        $blog_name = get_bloginfo('name');
        if (is_singular()) {
                if ($post->post_excerpt) {
                        $text = $post->post_excerpt;
                } else {
                        $text = $post->post_content;
                }
                $description = trim(str_replace(array("\r\n", "\r", "\n", " ", " "), " ", str_replace("\"", "'", strip_tags($text))));
                if (!($description)) {
                        $description = $blog_name . "-" . trim(wp_title('', false));
                }

                $the = trim(get_post_meta($post->ID, 'description', true));
                if ($the) {
                        $description = $the;
                }
        } elseif (is_home()) {
                $description = _hui('description');
        } elseif (is_tag()) {
                $description = $blog_name . "'" . single_tag_title('', false) . "'";
        } elseif (is_category() || is_tax()) {
                global $wp_query;
                $term = get_queried_object();
                $description = _get_tax_meta($term->term_id, 'description');
                if( !$description ){
                        $description = trim(strip_tags(category_description()));
                }
        } elseif (is_archive()) {
                $description = $blog_name . "'" . trim(wp_title('', false)) . "'";
        } elseif (is_search()) {
                $description = $blog_name . ": '" . esc_html($s, 1) . "' 的搜索結果";
        } else {
                $description = $blog_name . "'" . trim(wp_title('', false)) . "'";
        }
        $description = mb_substr($description, 0, 180, 'utf-8');
        echo "<meta property=\"og:description\" content=\"$description\">\n";
}

2. 新增头部meta标签

进入 /www/wwwroot/www.goojie.eu/wp-content/themes/qux 编辑 header.php
<title><?php echo _title(); ?></title>下面新增

<meta property="og:title" content="<?php echo _title(); ?>">
<meta property="og:type" content="<?php echo _the_og_type(); ?>">
<?php echo _the_og_description(); ?>
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="og:site_name" content="<?php echo get_bloginfo('name') ?>-<?php echo get_bloginfo('description') ?>">
<meta property="og:image" content="<?php echo post_thumbnail_src(); ?>">
<meta property="og:image:alt" content="<?php echo _title(); ?>">

二、检查状态

检查状态: 用Facebook的工具 https://developers.facebook.com/tools/debug 或者直接对某篇文章查看网页源码看是否新增了相应meta标签。
查看效果: 可以将链接发送到Telegram或者Facebook,看显示效果。

三、后记

虽然很多Open Graph插件提供了相关标签引入,但是这里由于:
1. 学习的目的
2. 不引入额外插件的宗旨
并没有直接安装Wordpress插件。不过,可能Open Graph插件能够提供更灵活的标签内容,欢迎小伙伴尝试,有问题可留言!

未经谷姐允许不得转载:谷姐靓号网 » 为WordPress Qux主题增加Open Graph协议:提高网站点击率
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

买Google Voice认准【谷姐靓号网】

Google Voice靓号列表Google Voice自助购买
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活