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

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

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

私のワードプレス

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

私のワードプレス

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

  • 当サイトを含めたOGP設定のあるサイトからのリンクを、カードタイプで貼ることができる「ショートコード」を作成しました。

    (カードタイプでのリンクを 受け取る 側の設定)

  • ワードプレスでは、OGP用のプラグインなどを導入しない限り、OGPの設定がありません。 functions.php 内に、下で紹介する関数を入れていただくことにより、OGPの設定を行います。

    (カードタイプでのリンクを 供給する 側の設定)

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

  1. 下のサイト(リンク先)下段に記載のある「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.

  2. 下のショートコード用構文を、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>
    
  3. 外部からのリンクを貼りつけたい投稿もしくは固定ページに、下記ショートコードを記述してください。

    [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() ){
  $og_image = get_the_post_thumbnail_url();
 }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($mydata->post_content,0,56, “utf-8″).”…”;
 }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="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を取得するのにちょっとはまったので、その方法を紹介します。

    大輔べ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です