ワードプレスでページを追加するたびに、OGPの画像を設定するのが面倒です。
そういう場合は、アイキャッチ画像を自動でOGP画像として読み込む様にしておけば手間を減らせるよ。
OGPの準備
まずは全ページで共有するOGP用の画像（ogp.pngなど）を準備しましょう。サイズは推奨の1200px x 630pxで制作しましょう。
functions.php
add_image_size('ogp', 1200, 630, true);続いてアイキャッチなどでアップロードされた画像がOGP用の画像を生成するように、functions.phpに画像サイズ設定を追記します。推奨サイズである1200px x 630pxでトリミングされる様にします。
header.php
<?php get_template_part('ogp'); ?>次にOGP用のogp.phpを作り、header.phpにテンプレートタグを記述し、head内に読み込む様にしましょう。直接OGP用のタグを記述しても問題ありませんが、コードが長くなるので管理のしやすさから分けておく方がよいでしょう。
コピペでOK、OGP用の使いまわし設定
ogp.phpの中身は以下のコードをコピペして、
を自分の環境に合わせて書き換えましょう。
ogp.php
<meta property="og:type" content="website" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="fb:app_id" content="アプリid" />
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:card" content="summary_large_image">
<!-- ホーム -->
<?php if (is_home()) : ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:url" content="<?php echo home_url(); ?>">
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/images/ogp.png">
<meta name="twitter:title" content="<?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<!-- 固定ページか個別記事なら -->
<?php elseif (is_singular()) : ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php the_excerpt(); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php
$thumbnail_id = get_post_thumbnail_id();
$eye_img = wp_get_attachment_image_src($thumbnail_id, 'ogp');
echo '<meta property="og:image" content="' . $eye_img[0] . '">';
?>
<?php else : ?>
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/images/ogp.png">
<?php endif; ?>
<meta name="twitter:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php the_excerpt(); ?>">
<?php endwhile;
endif; ?>
<!-- その他のページ -->
<?php else : ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/images/ogp.png">
<meta name="twitter:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<?php endwhile;
endif; ?>
<?php endif; ?>上記コードの動作は、
- トップページではOGP用画像を読み込み
- アイキャッチの設定されている固定ページか投稿ページならアイキャッチをOGP画像に設定
- アイキャッチの無い固定ページか投稿ページならOGP用画像を読み込み
- その他のページではOGP用画像を読み込み
という流れになります。
さらに分岐を追加してページごとの細かい設定を加えたり、urlやdescriptionの設定をWebサイトごとに調整してくださいね。