10分ツイートシェアはてブLINEデータクオリティとか納品時のクオリティってどの程度必要なの?って思ってる方も多いと思います。Githubでチェックリストが公開されていたので、その中から優先度の高いものをピックアップしてみました。「HEAD」は、文書のヘッダ部分を指定するためのタグであり、<head>タグで囲まれた内容はそのhtmlファイルの内容・情報を宣言します。<html>タグと<body>タグの間に書きます。<title>タグ以外は<head></head>の内の内容は、通常、ブラウザの画面上には表示されません。HEADでは<title>、<meta>、<link>などのHTMLファイルのさまざまな情報が指定・定義されます。スタイルシート(CSS)やJavaScriptなどの外部ファイルを、<head></head>内に記述して読み込ませることもあります。言うまでもないと思いますが、これは必須です。上部に入れるべき3つのmeta情報。shrink-to-fit=no">Titleこちらも言わずと知れた「〜」です。ここで注意点は、GoogleはSEOにおいて内の文章を472から482ピクセルで切り詰めて文字数を扱うようです。その際おおよそ入る文字数が「55文字」ということを聞いたことがあります。Googleのtitleに関する記事はこちらです。Title</title>DescriptionDescriptionです。そのサイトの説明です。検索結果の一覧で表示されます。こちらもtitle同様、省略される可能性があるのでdescriptionの文字数は100文字〜120文字程度が望ましいとされています。descriptionとは、検索エンジンに伝えるページの概要になります。スマホ検索も考慮して、なるべく前半にページの内容をまとめる必要があります。わかりやすさも重要です。characters">Faviconsブラウザのタブなどに表示されるマークです。Favicons(ファビコン)はサイトのシンボルマークとして欠かせません。ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称です。icon(フェイバリット・アイコン:お気に入りアイコン)という英語を縮約したものです。ロゴマークをおくサイトが多く、近年は綺麗に生成できるサイトがあり便利です。Touchアイコン初代iPhoneから使用されているiOSのホーム画面アイコンです。必須度は低めですが、ファビコンのiOS用となるアイコンです。Iconファイルを作成します。タイルを作って、ユーザーの関心を引いたりサイトの操作性を高めたりします。スタート画面にピン留めするときにタイルです。これも必須度は低めですが、IEでのピン留めの画像の設定ができます。128、小サイズと中サイズのタイルはスタート画面で既定で使用できます。</msapplication></browserconfig>Canonical重複ページが複数存在するときに「どのページ(URL)が最も大切かをGoogleに伝える役目があります。このタグを使わない、または適切に使用しないでおくと、もしかしたらGoogleにGoogleに「コピーコンテンツ」とみなされたり、あるいはユーザーがせっかく貼ってくれるリンク(被リンク)が分散してしまったり、といった悪影響が生じます。SEO対策として正しく使用したいですね。属性は、要素の内容がどのような言語で記述されているかを表します。要素に対してとなります。attributedir属性は、要素のコンテンツのテキスト方向を指定します。ltrは左から右を意味し、左から右に書かれた言語(英語など)に使用され、rtlは右から左を意味し、右から左に書かれた言語(アラビア語など)に使用されます。autoはユーザーエージェントが決定します。languageウェブサイトの言語タグが指定され、現在のページの言語に関連しています。サーチエンジンやソーシャルブックマークなどで見つけたとき、その人の言語環境に合ったURLへ導いてくれます。Googleは検索ユーザーに正しい言語・地域別のウェブページ(URL)を検索結果に表示することができるとのことです。comments必要に応じてIEに条件付きコメントが表示されます。バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となりました。)」コメントは「IE9以下を検出する」と言うコメントと同義になります。feedRSSとは、ニュースサイトやブログなど、Webサイトの見出しや要約をまとめてくれる技術です。RSS技術を使って配信される「RSSフィード」を使って、見る側のユーザーはWebサイトの更新情報や記事の要約などを素早くチェックすることができます。配信する側はWebサイトからRSSフィードを配信する必要があります。ブログやオウンドメディアを運営されている場合はぜひRSSを配信してください。CriticalCSSクリティカルは、最初のスクロールせずに見えるコンテンツページの表示に必要なスタイルシート。これをインラインでHTMLに埋め込むことによって、クリティカルレンダリングパスの最適化が図れます。orderCSSの読み込み順としてすべてのCSSファイルは、内のJavaScriptファイルの前に読み込まれるように設定すること。(JSファイルがページの上に非同期で読み込まれることがある場合を除きます)。metaFacebookのOGとTwitterカードは、どんなウェブサイトでも、載せておくことが望ましいようです。OGタグやTwitterカードの使い方や設定方法は別記事で紹介いたします。Graphいわゆる「OGタグ」といわれるやつです。Graphオブジェクトにはプロパティが含まれています。プロパティとはさまざまな方法でオブジェクトを説明する要素です。APIを使用して作成されたオブジェクト内で属性化されます。630ピクセルが推奨されます。CardTwitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。Developers)Twitterで企業アカウントを運用されている方は、自社ホームページのコンテンツを紹介する時など、通常の投稿よりも目を引きやすい形式になるため、クリック率を高めることができます。セマンティック要素が適切に使用されていること。<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>。pagesいわゆるwordpress等だとページがない時などに表示される「404」ページとなんらかのエラー時に表示される「5xx」ページなどの用意が必要です。いった専用ページはSEO的にも準備しておいた方が良いとのこと。ここで一つ注意すべきは「5xx」ページについては「CSSがページ内に記載されていること」が必要であるということです。Noopenerちょっとしたフィッシングサイト対策になります。「<target=”_blank”>」でリンクをひらかせる場合に「<rel=”noopener”>」をつけておくとフィッシング詐欺の手法Tabnabbing(タブナビング)の防止に効果的です。noreferrer”>」を使うとのことです。「<target=”_blank”>」を使う際には絶対記述しといたほうがよいですね。Tabnabbing(タブナビング)とは??Tabnabbing(タブナビング)は非アクティブのタブをユーザが気づかないうちにフィッシング目的でなんらかのサービスや金融機関(銀行など)のログインページに書き換えてしまうフィンシング手法の一つです。commentsページを本番環境に送信する前に、不必要なコードを削除する必要があります。いわゆるゴミコードですね。コードだけではなく不要なファイルもきっちり削除していくようにしましょう。compliantHTMLコードの問題点を特定のためにW3CバリデーターでW3C準拠サイトとしてのチェックを行なってください。Lintツールを使って自分のHTMLコードに問題があるかどうかを分析することが必要です。現在はエディタにLinterが付いているケースも多くあるので、そちらを利用して確認しましょう。checkerいわゆるリンク切れをきっちりチェックしましょうということです。リンクチェックには以下のサイトがおすすめです。CheckerWordPressを使っている場合プラグインの利用をおすすめします。test広告ブロックが有効になっていても、ウェブサイトにコンテンツが正しく表示されルカどうか確認しましょう(広告ブロッカーを無効にするよう促すメッセージを表示できます)。Webfontswebサイトの見た目を向上させるために最近ではwebフォントを使う機会も増えていると思います。webフォントを利用している場合、スタイルが適用されていないテキストが表示されたり、ページの表示が遅くなりなかなかテキストが表示されないなどのケースがあります。いったケースへの対策としてフォールバックフォントを利用したり、Webfontローダーを使用して動作を制御することを検討しなければいけません。モダンブラウザでサポートされています。sizeウェブフォントのサイズは2MBを超えることがないようにしてください。(すべての違う綴りを含みます。loaderでWebフォントのロード開始や完了などを判定し、Webフォント読み込み時のコントロールをするようにしておくといいでしょう。CSSについてCSSガイドラインとSassガイドラインをきっちりと確認してCSSを構築しましょう。各CSSのプロパティなどに不明点や疑問を持った場合は確実な理解のためにもCSSリファレンスを参照しましょう。Designサイトはレスポンシブデザインを使用しています。レスポンシブというか、スマホおよびPC、タブレットで問題のないサイトという理解で良いと思います。Printいわゆる印刷用スタイルシートですが、予算の関係上難しい場合もあると思いますが、基本的には設定しましょう。セキュリティについてwebサイトやwebシステムにおいて現在もっとも重要な要素といっても過言ではないのではないでしょうか。https通信が全ページに適用されているようにしてください。画像やCSSのリンクについても注意してください。HSTSHSTSを設定する。プリロードHSTSにサイトを登録して「.htaccess」に以下のように記述してください。preload"CSRFサーバーへのリクエスト元が、運営しているサイト・アプリからかを確認する。XSSXSSが可能になっていないか確認する。nosniffと設定することでContent-Typeに合致しない動作を回避します。X-Frame-OptionsX-Frame-Optionsを加えることでクリックジャッキングを対策する。Apacheの場合httpd.confに設定する。Policyを設定することでXSSなどの攻撃を排除する。いわゆるガイドラインを設定しましょうという話ですね。パフォーマンスページ容量ページは500KB以下をこころがけ、webサイトスピードテストをして問題になっている部分を解決する。圧縮(ミニファイ)されている。loading(延長読み込み)アクセスした時に画像を読み込むのではなく、ユーザーがスクロールなどして必要になったら読み込む。sizeCookieは4096バイトを超えないようにする。20以上の使用もやめる。componentsソーシャルボタンなどの外部JSの部分は、できるだけ静的に作りAPIの無駄な呼び出しを防ぐ。resolution外部ドメインからの読み込みは、dns-prefetchを使用して速度を早くする。※ただし、httpsページではできません。PageSpeedで全てのページをテストして、90以上のスコアであることを目指しましょう。PageSpeedアクセシビリティプログレッシブエンハンスメント主要機能はJavaScript無しでも動作するようにする。contractカラーコントラストは、PCはレベルAA、モバイルはレベルAAAを満たしている。理解する(W3C)見出し全てのページには、サイトのタイトルとは違うH1がある。HeadingsH1~H6の見出しは正しい順序で適切にしようされている。Role属性アクセシビリティ向上のためにRole属性をつけましょう。<header>role=”banner”<nav>role=”navigation”<main>role=”main”セマンティック適切なHTML5のinputタイプが使用されている。Lavellabelは、それぞれのフォーム要素に関連付けられている。labelを表示できない場合は、area-labelを使用する。アクセシビリティテスト納品前にはWaveツールを使ってテストをする。全てのページがスクリーンリーダーでテストされている。フォーカススタイルフォーム選択時などに出るフォーカススタイルを有効にする。無効ならCSSによる状態の可視化に置き換えられている。Mnagerがインストールされていて、正しく設定されている。見出しの内容と、ページの内容が一致している。TV)のレポート(11月前半)YouTubeへアップロードする動画のおすすめのサイズ(アスペクト比と解像度)。ComplessoJpパソコン・web・釣り・アクアリウム・ビジネスなど仕事・趣味・生活の話題中心のオウンドメディアです。