Blogブログ

TORAT | 2020.2.19

WordPressプラグインなしでOGPの設定、SNSシェア時の画像の設定

wordpress

今回はWordPressでプラグインを使わずにOGPの設定、SNSでシェアされた際の表示に関する設定方法をご紹介します。

なぜプラグインを使わないかというとプラグインをたくさん使ってしまうとサイトが重くなったり、アップデート時に不具合や手間がかかったりと不便なことがあるためです。そのため直接ソースコードに記述した方がいろいろと利便性が高いと思われます。

OGPとは

OGPとは「Open Graph Protocol」の略称です。 FacebookやTwitterなどのSNSにシェアされた際に、表示させるページの情報設定（タイトル、URL、要約、アイキャッチ画像、サムネイル画像）を行うことです。この設定を行うことでSNSで拡散された際により魅力的な表示ができ、多くの人に記事を見てもらうためには必要な設定をなります。

Facebookで共有すると以下のように表示されます。

もしOGP設定を行っていないとシステムが勝手に画像や説明文を表示するため意図しない画像や意味のわからない文章が抜粋させることになります。

OGPタグの設置

HTMLに以下のタグを追加します。

<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:type" content="ページタイプ">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="アイキャッチ">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="カードの種類（summaryまたはsummary_large_image）">
<meta name="twitter:site" content="Twitterアカウント名（@を含む）">

og:title – トップページの場合はサイト名、投稿または固定ページの場合はページのタイトルで大丈夫かと思います。
og:description – ページのディスクリプションを記述します。
og:type – 「website」もしくは「article」にします。
og:url – ページのパーマリンクを指定します。
og:image – アイキャッチのURLを指定します。
og:site_name – サイト名にします。
og:locale – 日本語「ja_JP」にします。
fb:app_id – Facebook の開発者 ID
twitter:card – summary または summary_large_image にします。
twitter:site – Twitterアカウント名

テーマ編集からfunctions.phpに追加

※functions.phpを触る前には必ずバックアップをとりましょう。

/**********************
OGP設定
*********************/
function my_meta_ogp()
{
if (is_front_page() || is_home() || is_singular()) {
 
/*初期設定*/
 
// 画像 （アイキャッチ画像が無い時に使用する代替画像URL）
$ogp_image = '画像URL';
// Twitterのアカウント名 (@xxx)
$twitter_site = '@Twitterアカウント名';
// Twitterカードの種類（summary_large_image または summary を指定）
$twitter_card = 'summary_large_image';
// Facebook APP ID
$facebook_app_id = '';
 
/*初期設定 ここまで*/
 
global $post;
$ogp_title = '';
$ogp_description = '';
$ogp_url = '';
$html = '';
if (is_singular()) {
// 記事＆固定ページ
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_description = mb_substr(get_the_excerpt(), 0, 100);
$ogp_url = get_permalink();
wp_reset_postdata();
} elseif (is_front_page() || is_home()) {
// トップページ
$ogp_title = get_bloginfo('name');
$ogp_description = get_bloginfo('description');
$ogp_url = home_url();
}
 
// og:type
$ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';
 
// og:image
if (is_singular() && has_post_thumbnail()) {
$ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$ogp_image = $ps_thumb[0];
}
 
// 出力するOGPタグをまとめる
$html = "\n";
$html .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '">' . "\n";
$html .= '<meta property="og:description" content="' . esc_attr($ogp_description) . '">' . "\n";
$html .= '<meta property="og:type" content="' . $ogp_type . '">' . "\n";
$html .= '<meta property="og:url" content="' . esc_url($ogp_url) . '">' . "\n";
$html .= '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . "\n";
$html .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
$html .= '<meta name="twitter:card" content="' . $twitter_card . '">' . "\n";
$html .= '<meta name="twitter:site" content="' . $twitter_site . '">' . "\n";
$html .= '<meta property="og:locale" content="ja_JP">' . "\n";
 
if ($facebook_app_id != "") {
$html .= '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
}
 
echo $html;
}
}
// headタグ内にOGPを出力する
add_action('wp_head', 'my_meta_ogp');

/初期設定/の項目を編集してください。

$ogp_image = ‘画像URL’; 　アイキャッチ画像がない場合の代替画像のURLを設定します。
$twitter_site = ‘@Twitterアカウント名’; 　Twitterアカウントを入力します。@から始まるIDを入力します。
$twitter_card = ‘summary_large_image’; 　Twitterカードの画像の設定をします。「summary_large_image 」か「 summary」を入力します。
$facebook_app_id = ”; 　Facebok APP IDをお持ちであれば入力します。

OGPが正常に設定されたか確認

Twitterカードの確認

Twitterカードの動作チェックするには下記のデバッグページで動作確認をします。

https://twitter.com/login?redirect_after_login=https%3A%2F%2Fcards-dev.twitter.com%2Fvalidator

facebookの確認

Facebookの動作チェックするには下記のデバッグページで動作確認をします。

https://developers.facebook.com/tools/debug/

追記：single.phpのheadタグ

functions.phpでなくsingle.phpのhead内に追加することで設定することもできます。

投稿記事それぞれのタイトル、アイキャッチを表示させるにはsingle.phpのhead内に以下のようなコードを追加します。

<meta property="og:type" content="blog">
<?php
$image_src = esc_url( get_home_url() );

if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';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";//単一記事URLを表示
} 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を表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
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_src.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$image_src.$imgurl[2].'">';echo "\n";
} else {
//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="'.$image_src.'代替画像のパス">';echo "\n";
}
 else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
echo '<meta property="og:image" content="'.$image_src.'/wp-content/themes/torat/img/alternative/blognull.jpg">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">

記事のtitle、description、URLの表示と画像の設定を行っています。descriptionとURLスラッグは管理画面で設定したものを出力するように設定しました。

画像に関してはサムネイルに設定がある場合はサムネイル画像を。サムネイル設定はないがページ内に画像がある場合は一番上に表示される画像を。投稿にサムネイルも画像もない場合は代替用の画像を表示させるように設定しています。