Facebook の OGP (Open Graph Protocol）に対応したいい感じのメタタグを WordPress のヘッダに出力する方法です。
OGP については amachang さんの以下のエントリで詳しく解説されています。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記
まずは、テーマの header.php にある <html> タグに xmlns:og="http://ogp.me/ns#" を追加してください。
その後で、テーマの functions.php に、以下のコードを追記しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | function ogp_tags() { global $wpmp_conf; $title = ''; $thumb = ''; $excerpt = ''; if (is_home()) { $url = trailingslashit(get_bloginfo('wpurl')); $excerpt = get_bloginfo('description'); } elseif(is_singular()) { $id = get_the_ID(); $post = &get_post($id); $url = get_permalink(); $title = trim(wp_title('', false)); if (function_exists('has_post_thumbnail') && has_post_thumbnail($id)) { $thumb = preg_replace("/^.*['\"](https?:\/\/[^'\"]*)['\"].*/i","$1",get_the_post_thumbnail($id)); } else { $attachments = get_children(array( 'post_parent' => $id , 'post_type' => 'attachment' , 'post_mime_type' => 'image' , 'orderby' => 'menu_order' , )); foreach ($attachments as $attachment) { $image_src = wp_get_attachment_image_src($attachment->ID); $thumb = (isset($image_src[0]) ? $image_src[0] : ''); unset($image_src); break; } unset($attachments); } if (empty($thumb) && preg_match_all('/<img .*src=[\'"]([^\'"]+)[\'"]/', $post->post_content, $matches, PREG_SET_ORDER)) { $thumb = $matches[0][1]; } unset($matches); $excerpt = ( !post_password_required($post) ? $post->post_excerpt : __('There is no excerpt because this is a protected post.') ); if (empty($excerpt)) { $excerpt = mb_strimwidth(preg_replace('/[\n\r]/', '', strip_tags($post->post_content)), 0, (isset($wpmp_conf["excerpt_mblength"]) ? $wpmp_conf["excerpt_mblength"] : 200), '...', 'UTF-8'); $excerpt = apply_filters('get_the_excerpt', $excerpt); } } else { $url = site_url($_SERVER['REQUEST_URI']); } $out = '<meta property="og:site_name" content="' . esc_html(get_bloginfo('name')) . '" />' . "\n"; if (!empty($url)) { $out .= '<meta property="og:url" content="' . esc_html($url) . '" />' . "\n"; } if (!empty($title)) { $out .= '<meta property="og:title" content="' . esc_html($title) . '" />' . "\n"; } if (!empty($thumb)) { $out .= '<meta property="og:image" content="' . $thumb . '" />' . "\n"; } if (!empty($excerpt)) { $out .= '<meta property="og:description" content="' . esc_html($excerpt) . '" />' . "\n"; } echo $out;}add_action('wp_head', 'ogp_tags'); |
これで、いい感じのメタタグが追加されるはずです。
ちなみにPosts Listに追加されるメタタグは、こんな感じです。
1 2 3 4 5 | <meta property="og:site_name" content="dogmap.jp" /><meta property="og:url" content="https://dogmap.jp/2011/01/12/posts-list/" /><meta property="og:title" content="Posts List" /><meta property="og:image" content="https://dogmap.jp/wp-content/uploads/2011/01/screenshot-160x160.png" /><meta property="og:description" content="今まで書いた記事一覧を生成するショートコードを提供するプラグインです。@kai4den さんが、こんなことを言っていたのでサクッと作りました。さくら VPS への引っ越し祝いと言うことで。ダウンロードは以下からWordPress Plugins/JSeries » Posts List (記事一覧作成)ダウンロードした posts-list.php を wp-cont..." /> |
次バージョンの Head Cleaner プラグインにも実装しておきます。
ピンバック: Tweets that mention Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp -- Topsy.com