レ点腫瘍学ノート

Top / pukiwikiカスタマイズ箇所

HTML5・CSS3対応とHTMLの整理

b07ddd8f14.png

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タグの記載

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対策にも通じる

中身の充実したpukiwikiを作れば検索エンジンからの評価も高まり、自然にアクセス数は増加するはずです。また様々なウェブサイト、個人ブログからリンクを貼ってもらうことも有効と思われますが、これも内容が充実すれば自然と結果はついてくると思われます。pukiwikiに限らない一般的な検索エンジンからの評価を向上させるためのSEOについ

この記事に対するコメント

このページには、まだコメントはありません。

お名前:

更新日:2020-05-02 閲覧数:1144 views.