IE6-8 is Not Supported

プラグイン無しで WordPress に OGP & Twitter Cards を設定する方法

サイト作りに OGP 設定がほぼ必須になってきたので、通常の OGP & Twitter Cards の設定に加え WordPress 用の記述 (わりと適当) をまとめておきます。参考までにどうぞ。

1. function.php に説明文を取得する記述をする

WordPress の場合、記事ごとに説明文やサムネイルを変える必要があるので functions.php に記述をしておきます。以下は本文の一部を抜粋して改行をなくした状態で表示するための設定です。サムネイルの設定はおそらく既にしていると思うので今回は省略。

// TEXT LENGTH SETTINGS
function textexcerpt($length) {
	global $post;
	$content = mb_substr(strip_tags( $post -> post_content), 0, $length);
	$content = $content . "...";
	$content = str_replace(array("\r\n","\r","\n"), '', $content);
	return $content;
}

2. OGP

通常

こちらは最低限あったほうがよい OGP 設定。

<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">

WordPress

こちらは WordPress 用。トップとシングルのみ判定していますが、条件分岐を追加すれば個別ページの設定も可能です。サムネイルが無い場合のパスを img/no-image.jpg にしているのでここは各々調整してください。

<meta property="og:type" content="<?php if(is_home()): ?>blog<?php else: ?>article<?php endif; ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="<?php if(is_home()): ?><?php bloginfo('name'); ?><?php elseif(is_single()): ?><?php the_title(); ?> - <?php bloginfo('name'); ?><?php endif; ?>">
<meta property="og:description" content="<?php if(is_home()): ?><?php bloginfo('description'); ?><?php elseif(is_single()): ?><?php echo textexcerpt(200); ?><?php endif; ?>">
<meta property="og:url" content="<?php if(is_home()): ?><?php bloginfo('url'); ?><?php endif; ?><?php if(is_single()): ?><?php echo the_permalink();?><?php endif; ?>">
<meta property="og:image" content="<?php if(is_home()): ?><?php bloginfo('template_url'); ?>/img/share-thumb.png<?php elseif(is_single()): ?><?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); if ( has_post_thumbnail()) { echo $image_url[0]; } else { echo get_bloginfo('template_url').'/img/no-image.jpg'; } ?><?php endif; ?>">

Facebook のシェアで OGP を確認することが多いと思いますが、Facebook 側のキャッシュで上手く反映されない場合があるので、そんなときは Debugger を使いましょう。

3. Twitter Card

Twitter Cards は Twitter Developer でサイトを承認されていないと表示されませんので、まずはここから表示方法を選び URL を登録します。このサイトの例だと1日くらいで承認メールが届きました。

通常

普通のサイトでよく使われる項目。summary 以外を選んだ場合、当然項目が変わります。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site">
<meta name="twitter:creator" content="@creator">
<meta name="twitter:domain" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">

WordPress

OGP で使った条件分岐を使って同じことをします。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site">
<meta name="twitter:creator" content="@creator">
<meta name="twitter:domain" content="">
<meta name="twitter:title" content="<?php if(is_home()): ?><?php bloginfo('name'); ?><?php elseif(is_single()): ?><?php the_title(); ?> - <?php bloginfo('name'); ?><?php endif; ?>">
<meta name="twitter:description" content="<?php if(is_home()): ?><?php bloginfo('description'); ?><?php elseif(is_single()): ?><?php echo textexcerpt(200); ?><?php endif; ?>">
<meta name="twitter:image:src" content="<?php if(is_home()): ?><?php bloginfo('template_url'); ?>/common/img/webrawl-icon.png<?php elseif(is_single()): ?><?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); if ( has_post_thumbnail()) { echo $image_url[0]; } else { echo get_bloginfo('template_url').'/common/img/no-image.jpg'; } ?><?php endif; ?>">

とりあえず、トップと記事でタイトル / サムネ / 説明文 を変えれればいいよーって人向けの記述でした。何かもっといい方法とかあれば教えてください!

ads by google