website launch checklist
1.0.0
ウェブサイトを立ち上げる前に再確認すべきこと
Web サイトを立ち上げる前に、次のことを確認してください。
alt タグ (「alt 属性」または「alt description」) は、画像に適用される属性で、画像の目に見えない説明として機能します。
これは画像の内容を説明し、視覚障害のあるユーザーに読み上げるためにスクリーン リーダーによって使用されます。検索エンジンは画像を解釈できず、alt タグの記述に依存するため、検索エンジンでも使用されます。画像に alt タグを使用すると、検索エンジンのランキングにプラスの影響を与えるため、SEO に効果的です。画像の読み込みに失敗した場合にも代替テキストが表示されます。
Alt タグは画像の内容を説明する必要があり、最大 125 文字の長さが推奨されます。
例：
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > 「ステージング」または「開発」環境がある場合は、ステージングによるインデックス作成がブロックされている可能性があります。
Web サイトを検索結果に表示したい場合、その検索エンジンは Web サイトを「インデックス」する必要があります。検索エンジンには、Web ページにアクセスしてコンテンツを「クロール」し、検索エンジンのインデックスに保存する自動化された「ボット」があります。これにより、検索エンジンは後で最も関連性の高い検索結果を取得できるようになります。
起動する前に、公開されるバージョンで Web サイトのインデックス作成が許可されていることを確認してください。 HTML にそのようなメタ タグがないことを確認してください。
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesまた、robots.txt ファイルも確認してください。 Web サイトのすべてのページのインデックス作成を許可したい場合は、robots.txt に次の内容を含める必要があります。
User-agent: *
Disallow:
もう 1 つ確認すべき場所は、Apache/Nginx 構成です。
Web サイトが Facebook または Twitter に共有されると、サムネイル、タイトル、説明が表示されます。
Web サイトに正しいサムネイル、タイトル、説明を表示したい場合は、Facebook と Twitter で必要なメタ タグを追加する必要があります。
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->次のツールを使用して、Web サイトが Facebook または Twitter に共有されたときにどのように表示されるかをテストできます。
Facebook 共有デバッガー
Twitter カード検証ツール
ファビコンは、ブラウザー タブの Web サイト タイトルの近くにある小さなアイコンです。
これにより、多くのタブが開いているときに、ブラウザーの履歴やブックマークを表示して、Web サイトを簡単に識別できるようになります。 DuckDuckGo などの一部の検索エンジンでは、検索結果の URL の近くにファビコンが表示されます。ユーザビリティの向上以外にも、検索結果でユーザーの注目を集めることができるため、間接SEO手法と言えます。
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > ユーザーは、Web ページをモバイル デバイスのホーム画面に保存できます。これにより、アプリのアイコンと同じように Web サイトのアイコンが作成され、そのアイコンをタップするとブラウザーで Web サイトが開きます。
開発者には、Web サイトのエクスペリエンスをモバイル上のネイティブ アプリのエクスペリエンスに近づけるために、ある程度の制御が与えられます。たとえば、デフォルトでは、iOS は Web サイトのスクリーンショットをアイコンとして設定します。ただし、Apple メタ タグを使用してカスタム アイコン デザインを設定できます。
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android は、「apple-touch-icon」値または favicon (メタ タグが存在しない場合) を使用してホーム画面アイコンを作成します。
使用する分析ツールに環境用のフィルターがない場合、非運用環境でのテストの結果によって Web サイトの分析が汚染されることになります。分析ツールにフィルターを追加することも、運用環境にのみ条件付きでコードを埋め込むこともできます。
titleタグはWebサイトのタイトルを指定します。メタディスクリプションタグにはページの短い説明が含まれます
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >タイトルは、検索エンジンの結果に表示されるものであり、ブラウザーのタブおよび共有時にソーシャル ネットワーク カードに表示されます (ソーシャル ネットワークに別のタイトルが提供されていない場合)。
検索結果にも説明が表示されます。ランキング アルゴリズムでは直接使用されないため、検索結果に表示される可能性には影響しませんが、ユーザーが結果内の Web サイトをクリックする可能性が高くなります。これにより、Google にとってページのクリックスルー率 (CTR) が向上します。つまり、Google はそのページを良い結果とみなして、今後の検索結果で上位にランクされるようになります。
Web ページに外部リンクへのリンクがある場合、特に新しいタブまたはウィンドウで開くリンクには、 rel="noopener"を使用する必要があります。
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a >そうすることで、セキュリティとパフォーマンスの利点が得られます。これがないと、外部ページはwindow.openerを使用してウィンドウ オブジェクトにアクセスできます。 noopener使用することでどのような脆弱性が解決されるかについて詳しくは、こちらをご覧ください: rel=noopener について
他の Web サイトも現在のページと同じプロセスで実行される可能性があるため、外部ページで重い JavaScript が実行されている場合は、Web サイトのパフォーマンスに悪影響を及ぼします。 noopenerそれも防ぎます。
詳細については、こちらをご覧ください: rel=noopener のパフォーマンス上の利点
Web サイトに多くの変更を加えたり、多くの外部ライブラリや CSS フレームワークを使用したりすると、CSS ファイルにページで使用されていないスタイルが多数含まれる可能性があります。たとえば、あるプラグインの 1 つのテーマを使用しているが、他のテーマの CSS は使用されずに CSS ファイル内に留まり、スタイルシートのファイル サイズが大きくなる場合があります。
PurgeCSS と呼ばれるツールを使用して、未使用のスタイルをすべて削除できます。 CLI で使用することも、Webpack、Gulp などで使用することもできます。ページを分析し、ページで使用されているセレクターと CSS ファイル内のセレクターを照合し、未使用のスタイルを削除します。 Tailwind CSS フレームワークを使用した私の最近のプロジェクトでは、もちろん、使用していないユーティリティがたくさんありました。 PurgeCSS により、app.css ファイルのサイズが 214KiB から 45.6Kib に減少しました。
ただし、プラグインがページ上に要素を動的に作成する場合、PurgeCSS はその要素のスタイルを検出しないことに注意してください。ただし、設定でセレクターまたはセレクター パターンを渡すことでセレクターをホワイトリストに登録できます。また、特別なコメントを使用して特定のルールをホワイトリストに登録することによってセレクターをホワイトリストに登録することもできます。 PurgeCSS ホワイトリストの詳細を参照してください。
ブラウザがリソースを要求すると、サーバーはブラウザに、リソースを保存または「キャッシュ」できる期間を指示できます。次回リソースが必要になったときは、ローカル コピーを使用できます。速度が大幅に向上し、サーバーの負荷が軽減されます。アセットがキャッシュされる期間を示すヘッダーを返すようにサーバーを設定できます。
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
資産が変更される頻度に基づいて最大有効期間を設定する必要があります。
Gzip 圧縮などの圧縮を使用するようにサーバーを構成することもできます。これにより、リソースの転送が高速になります。 CSS ファイルを gzip で圧縮すると、ファイル サイズが約 50 ～ 70% 節約されます。
