データクオリティとか納品時のクオリティってどの程度必要なの？って思ってる方も多いと思います。Githubでチェックリストが公開されていたので、その中から優先度の高いものをピックアップしてみました。
基本
「HEAD」は、文書のヘッダ部分を指定するためのタグであり、<head>タグで囲まれた内容はそのhtmlファイルの内容・情報を宣言します。<html>タグと<body>タグの間に書きます。<title>タグ以外は<head></head>の内の内容は、通常、ブラウザの画面上には表示されません。HEADでは<title>、<meta>、<link>などのHTMLファイルのさまざまな情報が指定・定義されます。スタイルシート（CSS）やJavaScriptなどの外部ファイルを、<head></head>内に記述して読み込ませることもあります。
DOCTYPE宣言
言うまでもないと思いますが、これは必須です。
<!doctype html>metaタグ3種
必ず上部に入れるべき3つのmeta情報。
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Title
こちらも言わずと知れた「
<title>Page Title</title>Description
Descriptionです。はそのサイトの説明です。検索結果の一覧で表示されます。こちらもtitle同様、省略される可能性があるのでdescriptionの文字数は100文字〜120文字程度が望ましいとされています。descriptionとは、検索エンジンに伝えるページの概要になります。また、スマホ検索も考慮して、なるべく前半にページの内容をまとめる必要があります。そしてわかりやすさも重要です。
<meta name="description" content="Description of the page less than 150 characters">Favicons
ブラウザのタブなどに表示されるマークです。Favicons（ファビコン）はサイトのシンボルマークとして欠かせません。ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称です。 favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語を縮約したものです。ロゴマークをおくサイトが多く、近年は綺麗に生成できるサイトがあり便利です。
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">Apple Touchアイコン
初代iPhoneから使用されているiOSのホーム画面アイコンです。必須度は低めですが、ファビコンのiOS用となるアイコンです。iOSのスマホ画面のブックマークアイコンになるため、必要なすべての寸法をサポートするためには少なくとも200x200px寸法のApple Iconファイルを作成します。
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">Windows Tiles
Internet Explorer 11 のライブ タイルを作って、ユーザーの関心を引いたりサイトの操作性を高めたりします。スタート画面にピン留めするときにタイルです。これも必須度は低めですが、IEでのピン留めの画像の設定ができます。小サイズは標準のタイルのサイズ70 x 70、最小画像サイズ56 x 56、推奨される画像のサイズ128 x 128、小サイズと中サイズのタイルはスタート画面で既定で使用できます。
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>Canonical
重複ページが複数存在するときに「どのページ（URL）が最も大切かをGoogleに伝える役目があります。このタグを使わない、または適切に使用しないでおくと、もしかしたらGoogleにGoogleに「コピーコンテンツ」とみなされたり、あるいはユーザーがせっかく貼ってくれるリンク（被リンク）が分散してしまったり、といった悪影響が生じます。SEO対策として正しく使用したいですね。
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">HTML tags
Language attribute
lang 属性は、要素の内容がどのような言語で記述されているかを表します。この属性を使用できる要素はすべての HTML5 要素に対してとなります。html 要素に指定して、文書が日本語で書かれていることを表した場合は
<html lang="en">Direction attribute
dir属性は、要素のコンテンツのテキスト方向を指定します。ltrは左から右を意味し、左から右に書かれた言語（英語など）に使用され、rtlは右から左を意味し、右から左に書かれた言語（アラビア語など）に使用されます。autoはユーザーエージェントが決定します。
<html dir="rtl">Alternate language
ウェブサイトの言語タグが指定され、現在のページの言語に関連しています。ユーザーが サーチエンジンやソーシャルブックマークなどで見つけたとき、その人の言語環境に合ったURLへ導いてくれます。Googleは検索ユーザーに正しい言語・地域別のウェブページ（URL）を検索結果に表示することができるとのことです。
<link rel="alternate" href="https://es.example.com/" hreflang="es">Googleのガイドラインはこちら
Conditional comments
必要に応じてIEに条件付きコメントが表示されます。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となりました。なので「IEそのものを検出する（[if IE] など）」コメントは「IE9以下を検出する」と言うコメントと同義になります。
<!--[if expression]> HTML <![endif]-->RSS feed
RSSとは、ニュースサイトやブログなど、Webサイトの見出しや要約をまとめてくれる技術です。RSS技術を使って配信される「RSSフィード」を使って、見る側のユーザーはWebサイトの更新情報や記事の要約などを素早くチェックすることができます。配信する側はWebサイトからRSSフィードを配信する必要があります。ブログやオウンドメディアを運営されている場合はぜひRSSを配信してください。
CSS Critical
CSSクリティカルは、最初のスクロールせずに見えるコンテンツページの表示に必要なスタイルシート。これをインラインでHTMLに埋め込むことによって、クリティカルレンダリングパスの最適化が図れます。
CSS order
CSSの読み込み順としてすべてのCSSファイルは、
内のJavaScriptファイルの前に読み込まれるように設定すること。（JSファイルがページの上に非同期で読み込まれることがある場合を除きます）。Social meta
FacebookのOGとTwitterカードは、どんなウェブサイトでも、載せておくことが望ましいようです。OGタグやTwitterカードの使い方や設定方法は別記事で紹介いたします。
Facebook Open Graph
いわゆる「OGタグ」といわれるやつです。Open Graphオブジェクトにはプロパティが含まれています。プロパティとはさまざまな方法でオブジェクトを説明する要素です。Open Graphタグによって表されるか、Object APIを使用して作成されたオブジェクト内で属性化されます。画像は少なくとも600 x 315ピクセルである必要がありますが、1200 x 630ピクセルが推奨されます。
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Twitter Card
Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。 （引用：Twitter Developers）
Twitterで企業アカウントを運用されている方は、自社ホームページのコンテンツを紹介する時など、通常の投稿よりも目を引きやすい形式になるため、クリック率を高めることができます。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">HTMLについて
HTML5 Semantic Elements
HTML5 セマンティック要素が適切に使用されていること。
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>。
Error pages
いわゆるwordpress等だとページがない時などに表示される「404」ページとなんらかのエラー時に表示される「5xx」ページなどの用意が必要です。こういった専用ページはSEO的にも準備しておいた方が良いとのこと。ここで一つ注意すべきは「5xx」ページについては「CSSがページ内に記載されていること」が必要であるということです。
Noopener
ちょっとしたフィッシングサイト対策になります。「<target=”_blank”>」でリンクをひらかせる場合に「<rel=”noopener”>」をつけておくとフィッシング詐欺の手法Tabnabbing(タブナビング)の防止に効果的です。Firefoxの旧バージョンに対応させるには「<rel=”noopener noreferrer”>」を使うとのことです。「<target=”_blank”>」を使う際には絶対記述しといたほうがよいですね。
Tabnabbing(タブナビング)とは？？
Tabnabbing(タブナビング)は非アクティブのタブをユーザが気づかないうちにフィッシング目的でなんらかのサービスや金融機関（銀行など）のログインページに書き換えてしまうフィンシング手法の一つです。
Clean up comments
ページを本番環境に送信する前に、不必要なコードを削除する必要があります。いわゆるゴミコードですね。コードだけではなく不要なファイルもきっちり削除していくようにしましょう。
HTML testing
W3C compliant
HTMLコードの問題点を特定のためにW3CバリデーターでW3C準拠サイトとしてのチェックを行なってください。
HTML Lint
ツールを使って自分のHTMLコードに問題があるかどうかを分析することが必要です。現在はエディタにLinterが付いているケースも多くあるので、そちらを利用して確認しましょう。
Link checker
いわゆるリンク切れをきっちりチェックしましょうということです。リンクチェックには以下のサイトがおすすめです。
WordPressを使っている場合プラグインの利用をおすすめします。
Adblockers test
広告ブロックが有効になっていても、ウェブサイトにコンテンツが正しく表示されルカどうか確認しましょう（広告ブロッカーを無効にするよう促すメッセージを表示できます）。
Webfonts
webサイトの見た目を向上させるために最近ではwebフォントを使う機会も増えていると思います。しかしwebフォントを利用している場合、スタイルが適用されていないテキストが表示されたり、ページの表示が遅くなりなかなかテキストが表示されないなどのケースがあります。こういったケースへの対策としてフォールバックフォントを利用したり、Webfontローダーを使用して動作を制御することを検討しなければいけません。
Webfont format
フォントファイル形式のWOFF, WOFF2 とTTF はモダンブラウザでサポートされています。
Webfont size
ウェブフォントのサイズは2MBを超えることがないようにしてください。（すべての違う綴りを含みます。）
Webfont loader
Webfont loaderでWebフォントのロード開始や完了などを判定し、Webフォント読み込み時のコントロールをするようにしておくといいでしょう。
CSSについて
CSSガイドラインとSassガイドラインをきっちりと確認してCSSを構築しましょう。各CSSのプロパティなどに不明点や疑問を持った場合は確実な理解のためにもCSSリファレンスを参照しましょう。
Responsive Web Design
サイトはレスポンシブデザインを使用しています。レスポンシブというか、スマホおよびPC、タブレットで問題のないサイトという理解で良いと思います。
CSS Print
いわゆる印刷用スタイルシートですが、予算の関係上難しい場合もあると思いますが、基本的には設定しましょう。
セキュリティについて
webサイトやwebシステムにおいて現在もっとも重要な要素といっても過言ではないのではないでしょうか。
HTTPS
サーバ証明書をインストールして https通信が全ページに適用されているようにしてください。画像やCSSのリンクについても注意してください。
HSTS
HSTSを設定する。プリロードHSTSにサイトを登録して「.htaccess」に以下のように記述してください。
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"CSRF
サーバーへのリクエスト元が、運営しているサイト・アプリからかを確認する。
XSS
XSSが可能になっていないか確認する。
X-Content-Type-Options
X-Content-Type-Options : nosniffと設定することでContent-Typeに合致しない動作を回避します。
X-Frame-Options
X-Frame-Optionsを加えることでクリックジャッキングを対策する。Apacheの場合httpd.confに設定する。
##iframeを禁止する
Header always append X-Frame-Options DENY
##同一ドメインのみ許可する
Header always append X-Frame-Options SAMEORIGIN
##指定したドメインのみ許可する
Header always append X-Frame-Options ALLOW-FROM https://example.comContent Security Policy
Content Security Policyを設定することでXSSなどの攻撃を排除する。いわゆるガイドラインを設定しましょうという話ですね。
パフォーマンス
ページ容量
ページは500KB以下をこころがけ、webサイトスピードテストをして問題になっている部分を解決する。
関連記事
モバイルサイトは読み込み速度が大事
Minified HTML
HTML、JavaScript、CSS が圧縮(ミニファイ)されている。
Lazy loading(延長読み込み)
アクセスした時に画像を読み込むのではなく、ユーザーがスクロールなどして必要になったら読み込む。
Cookie size
Cookieは4096バイトを超えないようにする。20以上の使用もやめる。
Third party components
ソーシャルボタンなどの外部JSの部分は、できるだけ静的に作りAPIの無駄な呼び出しを防ぐ。
DNS resolution
外部ドメインからの読み込みは、dns-prefetchを使用して速度を早くする。
※ただし、httpsページではできません。
<link rel="dns-prefetch" herf="//www.example.com">Preconnection
外部ドメインからの読み込みは、preconnectを使用して速度を早くする
<link rel="preconnect" herf="http://www.example.com">Google PageSpeedでテスト
Google PageSpeedで全てのページをテストして、90以上のスコアであることを目指しましょう。
アクセシビリティ
プログレッシブエンハンスメント
主要機能はJavaScript無しでも動作するようにする。
Color contract
カラーコントラストは、PCはレベルAA、モバイルはレベルAAAを満たしている。
1.4.3コントラスト(最低限)
1.4.6コントラスト(高度)
見出し
全てのページには、サイトのタイトルとは違うH1がある。
Headings
H1~H6の見出しは正しい順序で適切にしようされている。
Role属性
アクセシビリティ向上のためにRole属性をつけましょう。
| <header> | role=”banner” |
|---|---|
| <nav> | role=”navigation” |
| <main> | role=”main” |
セマンティック
適切なHTML5のinputタイプが使用されている。
Lavel
labelは、それぞれのフォーム要素に関連付けられている。labelを表示できない場合は、area-labelを使用する。
アクセシビリティテスト
納品前にはWaveツールを使ってテストをする。
スクリーンリーダー
全てのページがスクリーンリーダーでテストされている。
フォーカススタイル
フォーム選択時などに出るフォーカススタイルを有効にする。無効ならCSSによる状態の可視化に置き換えられている。
SEO
Google Analytics
Google Analytics、もしくはTag Mnagerがインストールされていて、正しく設定されている。
見出し構造
見出しの内容と、ページの内容が一致している。
