OGPをつかったカードタイプのリンク

当サイトでは、はてなブログのブログカード、もしくは、twiterカードのように、カードタイプの形で、リンクを張ることができるように、<head>内に、OGP（Open Graph protocol）メタタグを設定しています。

例えば、下のカードは、当サイトトップページへのリンクです。

私のワードプレス

twentysixteen twentyseventeen をシンプルにカスタマイズ

当投稿では、次の二点をご紹介します。

当サイトを含めたOGP設定のあるサイトからのリンクを、カードタイプで貼ることができる「ショートコード」を作成しました。
（カードタイプでのリンクを 受け取る 側の設定）
ワードプレスでは、OGP用のプラグインなどを導入しない限り、OGPの設定がありません。 functions.php 内に、下で紹介する関数を入れていただくことにより、OGPの設定を行います。
（カードタイプでのリンクを 供給する 側の設定）

手順（カードタイプでリンクを受け取る側の設定）

下のサイト（リンク先）下段に記載のある「php consumer」のリンク先から「OpenGraph.php」を、functions.php と同じフォルダ内にダウンロード。

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

下のショートコード用構文を、functions.php に記載してください。

<?php
/*
 * Add Short Code API
 */
// ogp tag
add_shortcode('my_ogp','my_ogp_func');
function my_ogp_func($atts, $content = null){
 $a = shortcode_atts( array(
  'url' => 'https://www.facebook.com/mtacorporation/',
 ), $atts );

require_once('OpenGraph.php');
	
$graph = OpenGraph::fetch($a['url']);

ob_start();
	
?>

<div class="ogp-form">
 <p class="ogp-title"><a href="<?php echo $graph->{"url"};?>"><?php echo $graph->{"title"};?></a></p>
 <p class="ogp-description"><?php echo $graph->{"description"};?></p>
 <figure>
  <img src="<?php echo $graph->{"image"};?>" />
  <figcaption><?php echo $graph->{"site_name"};?></a></figcaption>
 </figure>
</div>
	
<?php
return ob_get_clean();
}
?>

style sheet は次のようにしています。

<style>
.ogp-form {
 position:relative;
 border:1px solid #ccc;
 padding:0.5em 20px;
 max-width:360px;
 margin:1em 0;
}
.ogp-title {
 font-size:x-large;
 margin:0 0 0.5em 0;
}
.ogp-description {
 margin:0 0 0.5em 0;
}
.ogp-form figure {
 margin:0;
}
.ogp-form figure img {
 width:100%;
 margin:0;
}
</style>

外部からのリンクを貼りつけたい投稿もしくは固定ページに、下記ショートコードを記述してください。
```
[my_ogp url="ココに取り込みたいサイトアドレスを記載"]
```

備考

OGPの基準では、title, type, image, url の4つのメタタグは、必須の為、必ず取得できますが、site_name description は、オプションなので、サイトによっては、設定がありません。その場合、site_name description は表示されません。
一度に多くのカードタイプのリンク設定を行うと、ページ読み込みが重くなります。

手順（カードタイプでのリンクを供給する側の設定）

下の構文を functions.php に記述することにより、<head>内に、OGP（Open Graph protocol）メタタグを設定することができます。

<?php
/*
* Add ogp tags on head
* 
*/
add_action('wp_head','my_head');
function my_head(){
 $og_site_name = get_bloginfo('name');
 $og_title = get_bloginfo('name');
 $og_url = get_site_url();
 $og_description = get_bloginfo('description');
 if ( has_post_thumbnail() ){
  $mydata = get_post(); /* (added on 20180106) */
  $og_image = get_the_post_thumbnail_url($mydata->ID, 'full'); /* amended on 20180106 */
 }else{
  $og_image = get_header_image();
 }

 if (is_home() && 'page' == get_option( 'show_on_front' )  ){
  $mydata = get_post(get_option( 'page_for_posts' )); 
  $og_title = $mydata->post_title."（投稿一覧ページ）";
  $og_url .= "/".$mydata->post_name."/";
 }elseif ( is_single() || is_page() && !is_front_page() ){
  $mydata = get_post();
  $og_title = $mydata->post_title;
  $og_url .= "/".$mydata->post_name."/";
  $og_description = mb_substr(sanitize_text_field($mydata->post_content,0,56), "utf-8")."..."; /* amended on 20180106 */
 }elseif ( is_category() ){
  $mydata = get_the_category();
  $og_title = $mydata[0]->name."カテゴリー";
  $og_description = $mydata[0]->description;
  $og_url = get_category_link( $mydata[0]->term_id );
 }elseif ( is_tag() ){
  $tag_name = single_tag_title( "", false );
  $tag = get_term_by('name', $tag_name, 'post_tag');
  $og_title = $tag_name."タグ";
  $og_url = get_tag_link($tag->term_id);
  $og_description = tag_description();
 }else{
 }

 ?>
 <meta property="fb:app_id" content="(put FB app id here)" /> /* (added on 20180106) */
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="<?php echo($og_site_name); ?>" />
 <meta property="og:title" content="<?php echo($og_title); ?>" />
 <meta property="og:url" content="<?php echo($og_url); ?>" />
 <meta property="og:image" content="<?php echo($og_image); ?>" />
 <meta property="og:description" content="<?php echo(sanitize_text_field($og_description)); ?>" />
 <?php
 }

?>

設定の詳細

page

og:title

og:description

og:image

ブログページ(*1)

ブログサイトのタイトル(*2) + 「（投稿一覧ページ）」という文字

ブログサイトのキャッチフレーズ(*2)

ヘッダー画像

投稿ページ / 固定ページ

投稿 / 固定ページのタイトル

記事内から抜粋

アイキャッチがある場合はアイキャッチ。それ以外は、ヘッダー画像。

カテゴリー / タグページ

カテゴリー / タグの名前 + 「カテゴリー」もしくは「タグ」という文字

カテゴリー / タグの説明

ヘッダー画像

フロントページと
それ以外のページ

ブログサイトのタイトル

ブログサイトのキャッチフレーズ

ヘッダー画像

*1 : 投稿一覧を表示するページ。このページをフロントページに設定している場合は、フロントページの設定で表示
*2 : 「管理画面」→「設定」→「一般」で設定した値

備考

投稿一覧ページのアドレスを取得するのに手間取りました。最終的には、get_option 関数を利用しました。
タグのリンク取得も苦労しましたが、次のサイトを参考にさせていただきました。

WordPressでタグの名前からURLを取得する方法

WordPressのタグアーカイブで、タグ名を表示するのは簡単だったのですが、URLを取得するのにちょっとはまったので、その方法を紹介します。

大輔べ

追記 2018/01/06

FB上での表示でエラーが発生していましたので、修正しました。

FB app ID を追加。
(put FB app id here)にご自身のIDを記入してください。
フルサイズのアイキャッチ画像を取得するように変更。
投稿ページの Description を Sanitize しました。

追記 2018/03/26

レンタルサーバー移行後(?)文字化けが発生していましたので修正しました。
もしも文字化けが発生した場合、次のサイトを参考に修正をお願いいたします。

OpenGraph.phpの文字化け対応する方法メモ - とりあえずphpとか

https://github.com/scottmac/opengraph こちらを使ってogpを解析しようとしたら文字化けしたので対応方法をメモ85行目辺りでloadHTMLにhtmlを渡している文字を変換修正前 static private function _parse($HTML) { $old_libxml_error = libxml_use_internal_errors(true); $doc = new DOMDocument(); $doc->loadHTML($HTML); ・・・修正後 static private function _parse($HTML) { $…