HTML5・CSS3対応とHTMLの整理
pukiwikiカスタマイズ箇所/pukiwikiのSEO対策の一環として、pukiwikiのHTMLを整えてゆきます。無駄な部分は削り、またHTML5およびCSS3に準拠したコードに直せるところは直してゆきます。
pukiwiki.skin.phpのもともとの構造はかなり複雑なHTMLを吐き出すので、ページのタイトルをh1タグにする、HTML5化が済んでいるサイトなら本文を<main>や<article>などの要素タグで囲むなどの工夫をしておくなど、robotsから見て構造がわかりやすいHTML構造にするなどの配慮は必要でしょう。
その他にもpukiwikiカスタマイズ箇所/2019にあるような工夫を加えることでpukiwikiのHTML構造を整えておくことも有用です。なお、プラグインが吐き出すHTMLまで含めてすべてのコードを修正するのはかなり大変なので、ここで扱うのはメインのスキンや主要プラグインのHTMLに限定することにします。
DOCTYPE宣言
!DOCTYPE html>に変更
html lang="ja">に変更
HTML5対応の要素タグを配置
HTML5では<div>だけでなく、具体的に何をくくったブロックなのかを明示的に示す<nav> <footer> <article>などの要素タグが使えるようになりました。
なおInternet Explorerなどではこれらの要素タグを認識できないことがあるので、スタイルシートでこれらの要素がブロックであることを示しておきます。
header{display:block;}
IE9までの古いブラウザ対応
IE9までのブラウザでモダンブラウザ用のタグ（HTML5の要素タグなど）を用いるとレイアウトが崩れてしまうので、<head>に下記の記載を加えている。なお、IE9までのブラウザのシェアはかなり下がってきているためこれを記載しなくてもほとんどのユーザーには害はなさそうである。
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
注意点として、2016年1月からGoogle CodeのサーバーのHTML5shivへのリンクは廃止されているので他のCDNにリンクするか、ローカルサーバーにファイルを置いておく必要があることに注意が必要。
meta http-equiv="X-UA-Compatible" content="IE=edge" //当サイトは非実装
上記のX-UA-Compatibleを使うサイトもあるが当サイトはこれは用いていない。現在は必須とは言えなさそうである。詳しくはこちらのサイトを参考に。
https://www.creativevillage.ne.jp/2819
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://oncologynote.jp/?<?php echo $r_page ?>"> //canonicalリンクの記載
<link rel="shortlink" href="<?php echo $link['canonical_url'] ?>" /> //短縮リンクの記載
SEO対策にも通じる
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-05-02 閲覧数：1849 views.