MediaWikiにOGPのメタタグを追加してみる

MediaWikiにOGPのメタタグを追加してみるよ。僕が使っているMediaWikiのバージョンから最新はだいぶアップデートされているみたいなので…Ver.1.22.6をベースに話を進めるよ。ちなみに今回設定したOGPは以下のプロパティを設定したよ。

• og:type
  トップページなら「website」そのほかは「article」で設定。
• og:title
  ページのタイトル。
• og:url
  トップページのＵＲＬ。
• og:site_name
  サイトの名称。このサイトなら「Rin Knowledge Database」。
• og:image
  サイトアイコン（イメージ）へのURL。（facebookのことを考えて200px以上のイメージ）

Vector.phpの編集

きっと、うまくやればExtensionでできるんだろうけど…と思ってみて探しに探したけど、良い感じのExtensionが見つからなかったんだ。しかも、Extensionを作れる自信がないので、いっそのことって事で「Vector.php」を直接編集したんだ。

1. 以下のディレクトリのVector.phpをさがす。
   

   【Mediawikiをインストールしたディレクトリ】/skins/Vector.php

2. FTPのソフトなどを使ってダウンロードする。（直接編集できる人はこの手順は必要ないよ）
3. エディタなどでファイルを開く。（さまざまな文字コードに対応したエディタを使ってね）
4. 以下の部分を探してね。（「SkinVector」クラスの「initPage」メソッドだよ。）

   public function initPage( OutputPage $out ) {
   	global $wgLocalStylePath;
   
   	parent::initPage( $out );
   
   	// Append CSS which includes IE only behavior fixes for hover support -
   	// this is better than including this in a CSS file since it doesn't
   	// wait for the CSS file to load before fetching the HTC file.
   	$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
   	$out->addHeadItem( 'csshover',
   		'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
   			htmlspecialchars( $wgLocalStylePath ) .
   			"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
   	);
   
   	$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
   }
   

5. 上記のソースを以下のように修正してね。

   public function initPage( OutputPage $out ) {
   	global $wgLocalStylePath;
   
   	parent::initPage( $out );
   
   	// Append CSS which includes IE only behavior fixes for hover support -
   	// this is better than including this in a CSS file since it doesn't
   	// wait for the CSS file to load before fetching the HTC file.
   	$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
   	$out->addHeadItem( 'csshover',
   		'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
   			htmlspecialchars( $wgLocalStylePath ) .
   			"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
   	);
   
   	/* OGPtag ここから追加 */
   	if(strcmp($out->getPageTitle(), 'メインページ') == 0)
   	{
   		$out->addHeadItem('og:type','<meta property="og:type" content="website">');
   	}
   	else
   	{
   		$out->addHeadItem('og:type','<meta property="og:type" content="article">');
   	}
   	
   	$out->addHeadItem('og:title', '<meta property="og:title" content="' . $out->getPageTitle() . '">');
   	$out->addHeadItem('og:url', '<meta property="og:url" content="http://rinknowledge.com/">');
   	$out->addHeadItem('og:site_name', '<meta property="og:site_name" content="Rin Knowledge Database">');
   	$out->addHeadItem('og:image', '<meta property="og:image" content="http://rinknowledge.com/images/c/c2/Logo_200_200.png">');
   	/* OGPtag ここまで */
   
   	$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
   }
   

6. 文字コードをUTF-8にして保存してね…
   僕はUTF-8で保存しないと、追加したIF文が機能しなかったんだよ…。もしかしたら他に解決方法があるかもしれないよ…
7. ファイルを元の場所にアップロードしてね。（直接編集している人は必要ないよ）
8. サイトのページを開いて、OGP用のメタタグがついていることを確認してね。

参考サイト

MediaWikiにmetaタグの追加 - サクラタロウmeta
Windows環境でのPHPの文字化け対策 | web開発日報
Extension:Advanced Meta - MediaWiki　…　テーブルを作るので却下
Extension:MetaTags - MediaWiki　…　MediaWikiのバージョンミスマッチで動かなかった…
Extension:Add HTML Meta and Title - MediaWiki　…　titleタグをいじる理由が良くわからなかったので却下
Extension:WikiSEO - MediaWiki　…　ページ毎にタグ（またはテンプレート）を設定しないとだめらしいので却下（「MediaWiki:Sitenotice」に追加してみたけど…コメントアウトされた…）