Set meta data for Typecho articles so that link previews have title, intro and thumbnail

Leave a Comment / 21/04/2022 /

foreword

When using Slack, Mattermost, DingTalk, Feishu, after sending out the link to the Typecho blog post in the chat, I see that there is no beautiful link preview information. In fact, I found that many domestic websites have not done this optimization, and foreign websites support it better.

Read the title again? Reminder: the same for wordpress

Another point, the editing area of ​​WeChat does not support link preview at all. Do you want this function? Zhang xiǎo ? : think beautiful ?

The information of the meta tag is metadata describing the HTML document. These metadata are not displayed on the client side, but are parsed by the browser. The elements inside the meta tag are usually used to specify the description of the web page, keywords, the last modification time of the file, the author and other metadata. It can be used by browsers (how to display content or reload pages), by search engines (keywords), or by other web service calls. The <meta> tag is generally located in the <head> area of ​​an HTML document.

Open Graph Protocol, referred to as OG protocol. It is a web page meta information (Meta Information) tagging protocol announced by Facebook at the 2010 F8 developer conference. It belongs to the category of Meta Tag and is a Meta tag for social sharing. It is to mark the type of the page and describe the content of the page. Linking my blog post to a Slack chat doesn’t generate a nice preview because it doesn’t support the og protocol.

For more information, read the html meta and Facebook The Open Graph protocol in the References section at the bottom of this article.

The detailed description begins below.

Last night, I found that the link of the GitHub repository can generate a beautiful link preview in the chat box after the preview link function is turned on in software such as Slack and Mattermost. I have to say that GitHub’s work is very refined and the information is very complete.

20220421213330

So I tried my Typecho article link, embarrassed haha.

20220421213513

I think back to when I used DingTalk too -_-

So I started to modify it. The goals I want to achieve are:

  1. Show the title of this site
  2. Display the title of the article
  3. Display the description of the article
  4. Display the first image of the article, or use the site logo if the article does not have an image

After a lot of hard work, it came true! The effect is as follows

20220421213748

Let’s talk about the implementation process and code.

To achieve the fourth point of the above goal, you need to write a method in functions.php to get the first image of the article, return the direct link of the image, introduce this function in header.php , and pass in the cid of the article (that is, the article table primary key).

Considering that the pictures quoted in the article do not necessarily come from this site, I will directly return the direct link of the picture, because I see that the pictures of some blogs are all placed on the server of his blog, so some people use relative links, looks like /usr/uploads/.../xxxx.jpg

 function getPostFirstImg($cid) { $db = Typecho_Db:: get(); $rs = $db -> fetchRow($db -> select('table.contents.text') -> from('table.contents') -> where('table.contents.cid=?', $cid) -> order('table.contents.cid', Typecho_Db:: SORT_ASC) -> limit(1)); $imgUrl = []; $num = preg_match_all("/http(.*?)(.jpg|.png)/", $rs['text'], $imgUrl); if ($num == 0) { // 这是我博客的站点logo 图片direct link return 'https://img.gejiba.com/images/078696031158bfa46081354582567662.png'; } else { return $imgUrl[0][0]; } }

Then add the following code in the appropriate place in header.php

 <meta property="og:site_name" content="<?php $this->options->title() ?>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<?php $this->permalink() ?>" /> <meta property="og:title" content="<?php $this->title() ?>" /> <meta property="og:description" content="<?php $this->description(); ?>" /> <meta property="og:image" content="<?php echo getPostFirstImg($this->cid); ?>" /> <meta property="og:category" content="<?php $this->category(',', false); ?>" /> <meta property="article:author" content="<?php $this->author(); ?>" /> <meta property="article:publisher" content="<?php $this->options->siteUrl(); ?>" /> <meta property="article:published_time" content="<?php $this->date('c'); ?>" /> <meta property="article:published_first" content="<?php $this->options->title() ?>, <?php $this->permalink() ?>" /> <meta property="article:tag" content="<?php $this->keywords(',');?>" />

quote

This article is reprinted from: https://hellodk.cn/post/1014
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment