5分で完了、WordPressテーマへそのまま追加できるOGPタグ

IMG_0144facebookなどSNSへブログ記事を投稿する際、写真や概要をきちんと表示してくれるOGPタグ。
なかなかこれというのができず悪戦苦闘しましたが、ようやく。
備忘録としてシェア。

WordPressテーマ、header.phpの内に、以下をcopy&pasteします。

 

 

 

 

<!– ここからOGP –>

<?php if(is_home()): ?> <!– ←でブログのトップページを判定 –>
<meta property=”og:type” content=”website”>
<meta property=”og:title” content=”<?php bloginfo(‘name’); ?>”>
<meta property=”og:url” content=”ブログトップURL”>
<meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”>
<meta property=”og:image” content=”表示したい200*200px以上の画像URL”>

<?php elseif(is_page()): ?> <!– ←で固定ページを判定 –>
<meta property=”og:type” content=”website”>
<meta property=”og:title” content=”<?php the_title(); ?>”>
<meta property=”og:url” content=”<?php echo get_permalink(); ?>”>
<meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”>
<meta property=”og:image” content=”表示したい200*200px以上の画像URL”>

<?php else: ?>  <!– ←上記の条件にもれたページ(記事ページ) –>
<meta property=”og:type” content=”article”>
<meta property=”og:title” content=”<?php the_title(); ?>”>
<meta property=”og:url” content=”<?php echo get_permalink(); ?>”>
<meta property=”og:description” content=”<?php echo mb_substr(str_replace(array(“rn”, “r”, “n”), ”, strip_tags($post-> post_content)), 0, 100).’…’; ?>”>
<?php endif; ?>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),’large’); ?>
<?php if(is_single() && has_post_thumbnail() ): ?>
<meta property=”og:image” content=”<?php echo $image_url[0] ?>”>
<?php elseif(!is_home() && !is_page() ): ?>
<meta property=”og:image” content=”投稿に画像がない場合に表示する200*200px以上の画像URL”>
<?php endif; ?>

<!– ここまでOGP –>

fb ID、アプリID、twitterアカウントは不要でしたので、クライアントへ特にお願いすることもなく作業完了できそうです。

JetPackを利用している場合、JetpackからOGPタグを生成されないようにする必要があります。
以下記事などご参照で。

決定版!JetpackプラグインのOGPタグを削除する方法いろいろ