WordPressにOGPを設定する

2018/2/21 未分類

WordPressにOGPを設定する

テーマヘッダーに記載

まとめてここに書いてもいいのだけど、別ファイルを読み込んでもいいので、私は別ファイルにしています。コードが沢山並んでいるよりわかりやすいので。

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

<?php wp_head(); ?>
<?php //facebook OGPここから// ?>
<?php include TEMPLATEPATH . '/ogp.php';?>
↑次の項目で作るファイルを読み込む
<?php //facebook OGPここまで// ?>
</head>

<body>
<?php //グーグルアナライザー// ?>
<?php include_once("analyticstracking.php") ?>
<?php //グーグルアナライザーここまで// ?>
</head>

<body>
<?php //グーグルアナライザー// ?>
<?php include_once("analyticstracking.php") ?>
<?php //グーグルアナライザーここまで// ?>

<?php //facebookアプリ// ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=123456789012345&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?php //facebookアプリここまで// ?>

<?php //ピンタレストここから// ?>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<?php //ピンタレストここまで// ?>

ogp.php　ファイルを作成

ogp.phe という名前のファイルを作り、下記をコピペして赤い箇所を書き換えて、テーマテンプレートフォルダにアップする。

<!--OGP開始ここから-->
<meta property="og:locale" content="ja_JP">
<meta property="fb:admins" content="123456789012345" />
  ↑↓ユーザーIDかアプリIDのどちらからしいがアプリがいいみたい
<meta property="fb:app_id" content="123456789012345" />
<meta property="og:type" content="blog">
<meta property="og:type"   content="website or blog" />
<meta property="og:url"    content="http://example.com/" />
<meta property="og:title"  content="ページの名前" />
<meta property="og:image"  content="http://example.com/xxx/xxx.jpg" />
<meta property="og:description"  content="概要書く" />
<meta property="og:site_name"  content="サイトの名前" />
<meta property="article:publisher" content="https://www.facebook.com/example" />

<?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="http://............./no_image_200.jpg">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
     echo '<meta property="og:image" content="http://............./no_image_200.jpg">';echo "\n";
}
?> 
<!--OGP開始ここまで-->

関連記事