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

提供: とある社畜の頭脳整理
2019年7月22日 (月) 13:42時点におけるRin-scrooge (トーク | 投稿記録)による版 (ページの作成:「MediaWikiにOGPのメタタグを追加してみるよ。僕が使っているMediaWikiのバージョンから最新はだいぶアップデートされているみた…」)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

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

  • og:type
    トップページなら「website」そのほかは「article」で設定。
  • og:title
    ページのタイトル。
  • og:url
    トップページの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」に追加してみたけど…コメントアウトされた…)