レ点腫瘍学ノート

pukiwikiカスタマイズ箇所/2019 の履歴ソース(No.6)

#author("2019-09-07T01:33:36+09:00","default:tgoto","tgoto")
[[pukiwikiカスタマイズ箇所/2018]]に加えて2019年にさらに改変を加えた。

*Pukiwiki 1.5.2へのアップデート
これによりlibフォルダ内にあるlib/html.phpなどは再修正を強いられることになった。なお、検索などが高速化したとのことだが100ページ程度の当wikiではこれまでもサイト内検索は一瞬であったため、あまり恩恵を実感できるほどの違いはない。

ja.lng.php, lib/html.phpなどはpukiwikiカスタマイズ箇所/2018に記載したのと同様の修正を再度加えた。

* PukiWikiのSSL対応

サイト全体をSSL対応とした。コスト削減のためにレンタルサーバーで提供されている無料SSLを用いている。
最近のモダンブラウザの仕様ではSSLに対応していないサイトでは「安全ではないサイトです」というような警告が表示されるものもある。またSEO的にもHTTPS対応しているか否かが評価対象となるという話もある。10年ほど前までは個人のウェブサイトにSSLを導入するには数万円の費用を要することもあったが、最近は個人用であれば安価なSSLも利用可能となっている。

** 当サイトの具体的な実施内容

- SSL化したサイトでは、サイト内リンク(画像などのページ内要素も含む)が全てSSL化されていることが必要である。ページによって https:// ではなく http:// へのリンクがのこっていると「安全ではないサイトです」の警告が表示されてしまうこともある。
- サイトをSSL化した場合は .htaccess でhttpへのアクセスをhttpsへ転送する設定をしておくと良い。
- Google search consoleでは、ドメインごとDNSで登録しているのではなくサーバに置いた認証ファイルかmetaタグなどでサイトのプロパティを登録している場合、SSL化に伴ってhttpとは別のhttpsのサイトを登録しなおす必要があることがある。

* PukiWikiのSEOとは

SEOには裏技はなく、サイトの内容を充実させることが王道であることは間違いない。また様々なウェブサイト、個人ブログからリンクを貼ってもらうことも有効と思われる。

**個別のカスタマイズ内容

- metaタグのkeywordは最近のGoogleではほとんど参照されていないということである。したがってあえて記載する必要はないかもしれない。
- metaタグのdescriptionは、記載すれば検索エンジンで検索された時にページの要約として表示されるため無意味では無さそうであるが、Googleの場合は本文の丸写しであればdescriptionは書く意味がないという話もある。PukiWikiの場合は本文の丸写しではないdescriptionを各ページごとに記載するのはシステム的に難しく、当サイトでも記載していない。
- ページのタイトルをh1タグにする、HTML5化が済んでいるサイトなら本文を<article>の要素タグで囲むなどの工夫をしておく。
- サイトのレスポンシブ対応(あるいはモバイルフレンドリー化)は必須である。
- [[Google Pagespeed Insight:https://developers.google.com/speed/pagespeed/insights/]]でウェブページの表示速度などを測定することができる。これで高得点であることはサイトの高評価につながる。なお、PukiWiki自体はwordpress などに比べるとずっと表示速度は速く、当サイトもサーバが不安定でない限りほぼ99点〜100点であることが多い。

**サイトマップ

-標準のプラグインsitemap.inc.php(またはrss.inc.php)を使う。sitemapプラグインで出力するサイトマップでなくても、RSSもGoogleにはサイトマップとして認識させることができる。ただし標準のrss.inc.phpを使う場合はデフォルトでは最近の更新15件しか表示されないため、pukiwiki.ini.php内のRSSの表示記事数を増やしておく(rss_maxを記事数に対して十分大きな値、たとえば1000程度にしておく)。
-このsitemap.inc.phpは https://oncology.uvs.jp/?cmd=sitemap で、rss.inc.phpは https://oncology.uvs.jp/?cmd=rss で表示させることができるので、これらのURLを[[Google Search Console:https://search.google.com/search-console]]でサイトマップとして登録しておくと数日以内にGooglebotがクロールに来るはずである。なお、Google Search Consoleに登録する際は http:// と https:// は別のURLとして区別されるため入力を間違えないように。

* Pukiwikiスキンの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# article: http://ogp.me/ns/article#">

* pukiwiki.skin.php

** 2カラムへの変更

従来は760px以下のブラウザは1カラム、960px以上のブラウザは3カラムとしてその間を2カラムとしていたが、2019年9月から760pxを境に1カラムと2カラムをレスポンシブに切り替えるデザインとした。

**HTML5対応とmetaタグの変更

-DOCTYPE宣言
--<!DOCTYPE html>に変更
--<html lang="ja">に変更
-<nav> <footer> <article>などのHTML5対応の要素タグを配置
-metaタグの記載
--<meta charset="utf-8"> 文字コードの指定
--<meta name="viewport" content="width=device-width, initial-scale=1"> viewportの指定(2018年までに対応済み)
-Internet Explorer 互換優先モードの救済
--<meta http-equiv="X-UA-Compatible" content="IE=edge">
-スマホでページを見た際に数字が並んでいても電話番号としてのリンクを貼らない
--<meta name="format-detection" content="telephone=no">

**FrontPageだけトップにロゴとサイト名を表示させる

特定ページだけで表示される機能の実装 http://design.kyusan-u.ac.jp/OpenSquareJP/?pukiwiki/Customize#q=%E4%BB%A5%E5%A4%96 で記載されている機能を使って、タイトルが「FrontPage」となっているトップページだけでページタイトルを非表示とし、一方でロゴとサイト名を表示させることにした。
具体的には

> <?php if ( $title == 'FrontPage' ) { ?> AAA <?php } else { ?> BBB <?php } ?>

としておくとページタイトルがFrontPageに合致するページのみでAAAが実行される一方でBBBは実行されない。このAAAやBBBには好みのHTMLや <?php echo $title ?> などを挿入すると、FrontPageだけで特定の画像を表示したり、逆にh1ページタイトルを非表示にしたりできる。一方で <?php if ( $title != 'FrontPage' ) { ?> とすればFrontPage''以外''でこれを実行するようにも設定できる。

*スタイルシート
**pukiwiki.css
h1,h2,h3などのborderの変更、行間の拡大などデザイン上の微修正。
**print.css
必要性が乏しくなってきたため、print.cssを廃止した。

*その他

**pukiwiki.ini.php
-nowikinameを0から1に変更(CheckMateなどへの自動リンクを回避するため)

**lib/func.php
-308行目 return '<span class="page_passage" data-mtime="' . $date_atom . '"></span>'; の</span>の直後に<br />を挿入して「このページに関連するページ」の各項目を改行させて縦に並べるようにした。
> return '<span class="page_passage" data-mtime="' . $date_atom . '"></span><br />';

*今後の予定
-javascriptで動作するプルダウンメニュー