- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-09-07T09:59:30+09:00","default:tgoto","tgoto")
#author("2019-09-07T11:53:47+09:00","default:tgoto","tgoto")
[[pukiwikiカスタマイズ箇所/2018]]に加えて2019年にさらに改変を加えた。
#contents
----
*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を廃止した。
*URL短縮ライブラリの組み込み
URL短縮ライブラリを組み込んで、URLの短縮を試みる。lib/shroturl.phpのアップロード、lib/pukiwiki.php lib/func.php lib/make_link.phpの修正が必要である。他のプラグインの改造などに比べてこのURL短縮ライブラリははるかに構造が複雑で、現在は開発元のサイトの方がPukiWiki 1.5.2まで精力的にアップデート対応をしてくださっているが、今後このアップデートが対応できなくなった場合にはメンテナンスを独力で続けるのは難しそう。。。
参考サイト： https://dajya-ranger.com/pukiwiki/embed-url-shortener/
***lib/pukiwiki.phpの45行目に挿入
> // URL短縮ライブラリロード
> require(LIB_DIR . 'shorturl.php');
> // ページ名上書きセット
> $vars['page'] = get_pagename_from_short_url($vars['page']);
***lib/func.phpの815目に挿入
> {
> return get_base_uri($uri_type) . get_short_url_from_pagename($page); // ※ライブラリの仕様を一部変更し、2019/06/03記事公開当初の記述に戻した
> /* コメントアウト
> global $defaultpage;
> if ($page === $defaultpage) {
> return get_base_uri($uri_type);
> }
> return get_base_uri($uri_type) . '?' . pagename_urlencode($page);
> */
> }
***lib/make_link.php の780行目を下記に変更
> $r_page = pagename_urlencode($page); //780行 修正前
> $r_page = get_short_url_from_pagename($page); //780行 修正後
***lib/make_link.php の802行目の ? を削除
> return $al_left . '<a ' . 'href="' . $script . '?' . $r_page . $anchor . //802行 修正前
> return $al_left . '<a ' . 'href="' . $script . $r_page . $anchor . //802行 修正後
*HTML5対応とmetaタグの変更
**DOCTYPE宣言
-<!DOCTYPE html>に変更
-<html lang="ja">に変更
**<nav> <footer> <article>などのHTML5対応の要素タグを配置
-IE9対応が必要
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
**metaタグの記載
-<meta charset="utf-8"> 文字コードの指定
-<meta name="viewport" content="width=device-width, initial-scale=1"> viewportの指定（2018年までに対応済み）
**canonical URLとshortlinkの記載
URL短縮ライブラリの導入に伴って、同一内容で非短縮URLと短縮URLの2つのページが生じたため、SEO的にもcanonical URLを記載する必要がある。短縮URLは $link['canonical_url'] で取得できるが、非短縮URLはこのままでは $link 配列から直接取得できず、若干不格好になっている（修正の余地あり）。
> <link rel="canonical" href="https://oncology.uvs.jp/?<?php echo $r_page ?>">
> <link rel="shortlink" href="<?php echo $link['canonical_url'] ?>" />
**スマホでページを見た際に数字が並んでいても電話番号としてのリンクを貼らない
-<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''以外''でこれを実行するようにも設定できる。
* その他
** 2カラムへの変更
従来は760px以下のブラウザは1カラム、960px以上のブラウザは3カラムとしてその間を2カラムとしていたが、2019年9月から760pxを境に1カラムと2カラムをレスポンシブに切り替えるデザインとした。
**スタイルシート pukiwiki.css
h1,h2,h3などのborderの変更、行間の拡大などデザイン上の微修正。
**印刷用スタイルシート print.css
必要性が乏しくなってきたため、print.cssを廃止した。
**pukiwiki.ini.php
-nowikinameを0から1に変更（CheckMateなどへの自動リンクを回避するため）
**lib/func.php
** 関連ページの配列 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で動作するプルダウンメニュー