目次
OGPのコードを用意する
wordpressでOGPを表示させるには、プラグインを使うのが簡単ですが、細かい設定をする場合は、自分で条件分岐をしながら作成しないと出来ないこともあります。OGPの仕様はわりと変更が多いので、自分で理解して持っておくと、変更に対して早い対応が可能かなとも思います。
といっても、自分でも理解できてない部分も多く、ネットで拾ってきた情報をカスタマイズして作成したOGPセットです。
よろしければ、ご利用ください。
twitter:cardの情報も入っているセットになります。
コードサンプル
使い方は、サンプルコードの下の記事に書いてあります。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!-- OGP --> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@■■■TwitterID■■■" /> <meta name="twitter:title" content="<?php bloginfo( 'name' ); ?>" /> <meta name="twitter:url" content="<?php the_permalink() ?>" /> <?php if (is_single() || is_page()) { ?> <?php while (have_posts()) : the_post(); ?> <meta property="og:title" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta name="twitter:description" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" /> <?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?> <meta property="og:image" content="<?php $fileid = get_post_meta($post->ID, OGPFileUpload, false); $file = wp_get_attachment_image_src($fileid[0], 'full'); echo $file[0]; ?>" /> <?php elseif (has_post_thumbnail()): ?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, $size = 'thumbnail'); ?> <meta property="og:image" content="<?php echo $image_url[0]; ?>" /> <?php else: ?> <meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" /> <?php endif; ?> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?> " /> <?php endwhile; ?> <?php } elseif (is_home()) { ?> <meta property="og:title" content="<?php bloginfo('name'); ?>" /> <meta property="og:type" content="blog" /> <meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" /> <meta property="og:url" content="<?php bloginfo('url'); ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <meta name="twitter:description" content="<?php bloginfo('description'); ?>" /> <?php } else { ?> <meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" /> <meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <meta name="twitter:description" content="<?php bloginfo('description'); ?>" /> <?php } ?> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="fb:admins" content="■■■facebookのOpen Graph Tagsコード■■■" /> <!-- /OGP --> |
使い方
上記のコードをコピーするだけでは利用できません。次の準備をしてください。
OGPの利用について
カスタムフィールドを利用して、記事個別でOGP画像をアップロードできるように、設定をしておきます。OGPをアップロードしなければ、それがない時という条件が適応されますが、シェアが生まれやすい記事の場合は、入れたくなりますので、作っておくと良いかと思います。
設定が必要な部分
■で囲っている部分を適宜変更してください。３種類、合計5箇所あります。
- twitterアカウント
- ogp画像までのパス
- FacebookのOpen Graph Tagsコード
分岐の説明
上記のコードの、気になる部分に簡単な解説を入れてみます。サイトの情報を表示させる関数で。nameは、管理画面のサイトタイトル
|
1 |
<?php bloginfo( 'name' ); ?> |
ブログのURL
|
1 |
<?php the_permalink() ?> |
記事ページか、個別ページの場合
|
1 |
<?php if (is_single() || is_page()) { ?> |
記事のタイトル｜サイトの名前
|
1 |
<?php the_title(); ?>｜<?php bloginfo('name'); ?> |
もし、「OGPFileUpload」カスタムフィールドに値が入っている場合に、画像パスを表示させる
|
1 2 3 4 5 6 |
<?php if (get_post_meta($post->ID,'OGPFileUpload',true)): ?> <meta property="og:image" content="<?php $fileid = get_post_meta($post->ID, OGPFileUpload, false); $file = wp_get_attachment_image_src($fileid[0], 'full'); echo $file[0]; ?>" /> |
もしくは、アイキャッチがある場合はサムネイルのサイズで表示する
|
1 2 3 4 5 6 |
<?php elseif (has_post_thumbnail()): ?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, $size = 'thumbnail'); ?> <meta property="og:image" content="<?php echo $image_url[0]; ?>" /> |
それ以外は、全部この画像を表示する
|
1 2 |
<?php else: ?> <meta property="og:image" content="■■■http:///wp-content/themes/news/img/ogp.png■■■" /> |
条件分岐おわり
|
1 |
<?php endif; ?> |
ページの条件おわり
|
1 |
<?php endwhile; ?> |
もしindexページのとき
|
1 |
<?php } elseif (is_home()) { ?> |
サイトの情報を表示させる関数で。nameは、管理画面で設定された「キャッチフレーズ」
|
1 |
<?php bloginfo('description'); ?>" |
第3パラメータ seplocation を使って、タイトルの右側にセパレータ（–）を表示させます。
|
1 |
<?php wp_title('|', true, 'right'); ?> |
現在のページのURLを取得
|
1 |
<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?> |
以上が解説です。
個別の記事ページのOGPimageの設定が、やや特徴的です。
自分のブログに合うように、カスタマイズしていくと良いかと思います。