FacebookでWordPressのOGPが思ったとおりに反映されない（プラグイン不使用）

2016年11月14日2017年11月19日

いま、WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)
という本の157ページを読みながらFacebookのOpen Graph Object DebuggerでOGPのWordPressにおけるOGPの記述に問題がないか確認しています。プラグインは使っていません。

本の通りに写経しているから、「問題あらへんやろう〜」と思っていたのですが、残念ながら問題大ありでした。Warnings That Should Be Fixed　がいろいろと表示されます…。

レスポンスコードが表示されない

まずWhen and how we last scraped the URL。レスポンスコードがありません。上手くいっているなら「206」が表示されるはず（たぶん）。

og:hogehogeの表示がおかしい

次にBased on the raw tags, we constructed the following Open Graph properties。’og:’の表示が矛盾していたり、表示されなかったりするものがあります。

表示が矛盾している（<meta property="og:type" content="article">）
og:type　website

表示されない
og:description
og:image

現在のheader.php

OGPに関わる、header.phpのコードは以下の通りです。

[php]
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>
<?php wp_title( ‘|’, true, ‘right’); ?>
<?php bloginfo(‘name’); ?>
</title>
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"

<?php if ( is_single() ) : // 記事の個別ページ用のメタデータ?>
<meta property="og:type" content="article">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:type" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php echo wp_trim_words ($post->post_content, 100, ‘…’); ?>">
<?php endif; // 記事の個別ページ用のメタデータここまで?>

<?php if (has_post_thumbnail() ) : // サムネイル画像に関する情報?>
<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘large’); ?>
<meta property="og:image" content="<?php echo $postthumb[0]; ?>">
<meta property="og:image:width" content="<?php echo $postthumb[1]; ?>" />
<meta property="og:image:height" content="<?php echo $postthumb[2]; ?>" />
<?php elseif (preg_match(‘/wp-image-(\d+)/s’, $post->post_content, $thumbid) ) : // サムネイル画像がない場合?>
<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘large’); ?>
<meta property="og:image" content="<?php echo $postthumb[0]; ?>">
<?php else : ?>
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/picnic.jpg">
<?php endif; // サムネイル画像に関する情報ここまで?>

<?php wp_head(); ?>
</head>
[/php]

現在のページの状況

現在のページ(single.php)を検証するとこんな感じです。

[php]
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>
おいしい朝ごはんを食べたい！ | Picnic </title>
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link rel="stylesheet" href="http://wocker.dev/wp-content/themes/mytheme/style.css"