各ページのチェック項目
faviconのチェック
ページにきちんとfavionが表示されているか確認してください。
最低限下記で設定されて入れば表示されます。
<link rel="icon" type="image/png" href="/path/favicon.png">
色んなものに対応したい場合は下記を設定してください。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
なお、上記のサイズを一括で書き出してくれるサイトがあります。
ブラウザやプラットフォーム別でプレビューで確認できるのでオススメです。
OGPの設定（Open Graph Protocol）
OGPが正しく表示されているか確認してください。
またシェアボタンがある場合、下記のチェックもしてください。
- アカウント設定
- ハッシュタグの設定
- シェアの文言
OGPを表示させるには、下記をページ内に記述してください。
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<title>普通のタイトル</title>
<meta name="description" content="普通のディスクリプション">
<meta property="og:title" content="OGPのタイトル">
<meta property="og:description" content="OGPのディスクリプション" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://foo.com" />
<meta property="og:image" content="http://foo.com/bar.jpg" />
<meta property="fb:app_id" content="1234567890123456" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@foo_bar" />
<meta name="twitter:creator" content="@foo_bar" />
表記チェック
誤字脱字がないかチェックしましょう。 個人的によくやる方法はテキストをWordにコピペして、エラーを見て誤字脱字をチェックします。
Webサービスとしては下記のようなものがあります。
- http://enno.jp/
- 英単語にも対応しているので、日本語の文章内で英単語のスペルミスがあった場合もお知らせしてくれます。（無料）
- 文字数制限はありません。
- https://www.kiji-check.com/
- 略語の使用の有無や二重否定や助詞不足など、細かい設定を決めた上で文章の校正が行えます。
- 漢字の開きに関する指摘も行ってくれます。
- 文字数制限は1万字です。
ダミーチェック
ダミーの文言/画像がないか確認しましょう。 とくに写真などで透かしが残っている画像場合はマズイので厳重に確認してください。
ブラウザチェック
対応ブラウザのチェックをしてください。
なお、私は下記のようなブラウザを対応しています。参考までに
PC
- Google Chrome 最新版
- Firefox 最新版
- Safari 最新版
- Internet Explorer 11 以降
- Microsoft Edge
スマートフォン
- Android/Google Chrome 最新版
- iOS/Safari 最新版
※ ※Androidの標準ブラウザについては、機種によって仕様が異なるため、動作保証対象外です。
HTMLバリデートチェック
HTMLが正しい構造化をチェックします。
The W3C Markup Validation Service
アドオンの場合は下記を使います。
JavaScriptエラー
Consoleを見てJavaScriptがエラーを出していないか確認します。
altのチェック
画像にaltが設定されているかチェックします。
altがない場合でもaltを省略せず、alt=''としてください。
エクステンションを使う場合は下記がオススメです。
リンクチェック
リンクに間違いがないか確認します。 404になってないかは下記で確認できます。
リンクチェッカー(リンク切れチェックツール) dead-link-checker.com
エクステンションを使う場合は下記がオススメです。
404/エラーページ
ページがなかったときに404のページを用意しているかチェックします。 またPHPなどのプログラムで書かれたサイトの場合はエラー時にどんな文言が出るのかもチェックしてください。