2016年1月17日

WordPressブログのOGPを設定する、Twitter CardsやSNS共有について。

スポンサードリンク

 多くのサイトが、SNS共有ボタンを投稿下に設置しています。
今回はWordPressで、OGPをプラグイン無しで設定する方法です。

OGPの設定をする、WordPress


 OGPって何?という方は、
話すと長いので、ググッておいて下さい。

簡単に言うと、SNSで共有される時に
どの情報をどのように表示するかという事。


[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法
http://yossense.com/ogp/


続・「Stinger5」にOGPを追加してみた
http://yuapon38.net/%E7%B6%9A%E3%83%BB%E3%80%8Cstinger5%E3%80%8D%E3%81%ABogp%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F-952.html



 ではカスタマイズしていきます。
私のテーマはStinger5です。
他のテーマの方は参考程度にご覧下さい。


header.php→

<head>を探す→

以下に変更

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">


 次に、
</head>

の直前に、以下のコードを追加。

(このままコピーしないで下さい。UTF-8Nに変換して下さい。)


<!--OGP開始-->
<meta property="fb:admins" content="【1】fb:adminsのIDを入力" />
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="blog">
<?php
if (is_single()){// 投稿記事
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//投稿記事パーマリンク
} else {//投稿記事以外(ホーム、カテゴリーなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURL
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
if (has_post_thumbnail()){//アイキャッチがある場合
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
     echo '<meta property="og:image" content="【2】画像が一切ない記事ページで表示させたい「デフォルト画像のURL」">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合(ホーム、カテゴリーなど)
     echo '<meta property="og:image" content="【3】ホームとかカテゴリページで出したい画像のURL">';echo "\n";
}
?>
<!--OGP完了-->



以上です。


 赤い背景をつけている箇所は、
ご自身の情報に替えて入力してくださいね。

画像のところは、

<?php echo get_template_directory_uri(); ?>/images/no-img.JPG" alt="no image" title="no image" width="100" height="100" ">

を例文に。
あとはご指定の画像の名前に替えて下さい。


 さて、コードがとても多いので、
header.phpが見にくくなりますね。

それが嫌な方は、

 <?php get_template_part('header-ogp'); ?>
として、
header-ogp.phpファイルを作り、その中にコードを記述。

子テーマ内にFTPフォルダでアップロードすればOKです。

これは初心者はちょっとハードルが高いので、
分からなければスルーしましょう。

WordPressでTwitter Cardsの設定をする


 OGP設定が済んだら、
次はツイッターカードですね。


 OGPの設定箇所と同じように、

</head>

の直前に、以下のコードを追加。

(このままコピーしないで下さい。UTF-8Nに変換して下さい。)


    <!-- twitter cards -->
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:card" content="summary">
    <!-- /twitter cards -->


これでOKです。
実際に共有してみて、表示のされかたをチェックしてみましょう。

ちなみに分岐させることもできます。
投稿と固定ページでわけるとかができます。
それぞれに適したカードタイプやメタタグを入力していきます。
そこまでこだわらなくても、上記タグだけでも問題ありませんでした。

WordPress Twitterカードを導入

Twitter Developer Documentation


その他、参考にしたサイト

[ WP ] Twitter Cards(ツイッターカード)をプラグイン無しで設置設定する方法
http://yossense.com/twitter-cards/


【エンゲージメント率150%UPも!?】注目機能Twitter Cards!内容詳細と導入方法まとめ
http://smmlab.jp/?p=18753

Twitter Cards申請をして表示をチェック


 最後にTwitter Cardsの申請をします。
これで完成です。


こちらからどうぞ。
https://cards-dev.twitter.com/validator


私の過去記事も参考にどうぞ。

Twitterカードを作成して、共有をもっとアレンジしよう。



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク