OGP対応
OGP（open graph protocol）に対応すると、TwitterやFacebookなどのSNS、各種ブログ（Wordpressやはてなブログ）にPukiWikiのURLを貼り付けたときにいわゆるブログカードが表示される機能が付加される。SEOにどの程度の効果があるかは不明だが見た目が良くなることからクリック率も向上するのではないかと思われる。
OGPは基本的にHTMLの<head>内にmetaタグとして記載するので、スキンを改変すれば容易にOGPを実装することができる。今回は一般的なOGPの設定のみにとどめて、FacebookやTwitter専用のタグの記載は最小限とした（Facebook専用OGPタグなどを利用するにはFacebookのアカウントを使って登録・認証を行う必要があるなど、若干の手間が生じる）。
OGPを設定する際にはアイキャッチ画像を用いることが多いが、PukiWikiの性質上それぞれのページに個別にアイキャッチ画像を設定するのは難しいので、今回はfavicon画像へのリンク（favicon192x192.png）を用いることとした（したがってPukiWiki内の全ページで共通の画像が表示される）。<head>内に下記のタグを記載する。この og:description の"1,140"の値は4文字目から143文字目を本文として抜粋するように指示したものであるが、よりよいdescriptionが書ける場合はそちらを利用して良い。
descriptionを記載するプラグインもあるが、PukiWiki 1.5系に対応しているかどうか不明であるため今回は使用していない。contentsプラグインで頁の初めに目次を設定していると、文頭から約140文字を切り取るとちょうど目次の項目名がdescriptionに並ぶので良いかもしれない。
<meta property="og:title" content="<?php echo $title ?> - <?php echo $page_title ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo $link['canonical_url'] ?>" />
<meta property="og:image" content="<?php echo SKIN_DIR ?>favicon192x192.png" />
<meta property="og:site_name" content="<?php echo $page_title ?>" />
<meta property="og:description" content="<?php echo $str = str_replace(array("\r\n", "\n"), '', mb_substr(strip_htmltag($body, $all = TRUE), 1, 140, "UTF-8")); ?>…" />
<meta name="twitter:card" content="summary" />
また、<head>にprefixをつけておく。prefixは不要との記事を見ることもあり、たしかにprefixなしでもブログカードは表示されるようである。
<head prefix="og: http://ogp.me/ns#">
OGPイメージを各ページに応じて変更できるようにする
上記のOGP対応だけではOGPイメージは全てのページでサイトのロゴを表示するようになっていてページごとには変更できないようになっている。しかし別で記載したページのURL短縮改造と組み合わせて、【ページ名】.jpgや【ページ名】.pngを画像フォルダに置いておけばこれをOGPイメージとして使用するように設定する。
PHPで画像フォルダに【ページ名】.jpgか【ページ名】.pngがあるかどうかで分岐させて、画像があればそれをOGPイメージに使用し、画像がなければサイトロゴをOGPイメージにする。
<?php
$ogpijpg = 'img/'.substr($canonical_url, -10).'.jpg' ;
$ogpipng = 'img/'.substr($canonical_url, -10).'.png' ;
if(file_exists($ogpijpg)) /* 短縮URLに連動したOGP画像が存在する場合 */ { ?>
<meta property="og:image" content="<?php echo get_script_uri().$ogpijpg ?>" />
<?php } else if(file_exists($ogpipng)) { ?>
<meta property="og:image" content="<?php echo get_script_uri().$ogpipng ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo get_script_uri() ?>skin/favicon192x192.png" />
<?php } ?>
OGP取得用プラグイン
当サイトのOGPを外に発信するのではなく、外部サイトのOGPを取得する場合は、OGP取得用のプラグインなどを利用することができます。いくつかのプラグインがあるようですが、これを使うこともできます。
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-05-02 閲覧数：1558 views.