website launch checklist
1.0.0
啟動網站前需要仔細檢查的事項
在啟動網站之前，請確保：
alt 標籤（「alt 屬性」或「alt 描述」）是套用於影像的屬性，用作影像的不可見描述。
它描述圖像的內容，並由螢幕閱讀器用來向盲人用戶大聲朗讀。它也被搜尋引擎使用，因為它們無法解釋圖像，它們依賴 alt 標籤描述。在圖像上使用 alt 標籤會對搜尋引擎排名產生正面影響，因此有利於 SEO。當圖像載入失敗時也會顯示替代文字。
Alt標籤必須描述圖像內容，建議長度最多為125個字元。
例子：
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > 如果您有「暫存」或「開發」環境，那麼您很可能會阻止暫存索引。
如果您希望您的網站出現在搜尋結果中，該搜尋引擎應「索引」您的網站。搜尋引擎具有自動“機器人”，可以存取網頁、“抓取”內容並將其儲存在搜尋引擎的索引中。這將允許搜尋引擎稍後檢索最相關的搜尋結果。
在啟動之前，請確保即將上線的版本允許為您的網站建立索引。確保 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 檔案。如果您希望網站的所有頁面都被索引，那麼您的 robots.txt 應包含以下內容：
User-agent: *
Disallow:
另一個需要檢查的地方是 Apache/Nginx 設定。
當網站分享到 Facebook 或 Twitter 時，它會顯示縮圖、標題和描述：
如果您希望您的網站顯示正確的縮圖、標題和描述，您必須新增 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 -->您可以使用以下工具測試您的網站分享到 Facebook 或 Twitter 時的外觀：
Facebook 分享偵錯工具
Twitter 卡片驗證器
Favicon 是瀏覽器標籤中網站標題附近的小圖示。
當許多選項卡打開、查看瀏覽器歷史記錄和書籤時，它使網站易於識別。某些搜尋引擎（例如 DuckDuckGo）會在搜尋結果中的 URL 附近顯示網站圖示。除了提高可用性之外，它還可以幫助在搜尋結果中吸引用戶的注意力，因此我們可以將其稱為間接SEO技術。
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > 使用者可以將網頁儲存到行動裝置上的主畫面。這會為網站創建一個圖標，就像應用程式圖標一樣，點擊該圖標將在瀏覽器中打開該網站。
開發人員獲得了一些控制權，可以使網站體驗更接近行動裝置上的本機應用程式體驗。例如，預設情況下，iOS會將網站的螢幕截圖設定為圖示。但您可以使用 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（如果元標記不存在）來建立主畫面圖示。
如果您使用的分析工具沒有針對環境的過濾器，那麼您將在非生產環境中測試的結果污染您網站的分析。您可以在分析工具中新增過濾器，或者有條件地僅在生產環境中嵌入程式碼。
標題標籤指定網站的標題。元描述標籤包含頁面的簡短描述
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >標題是在搜尋引擎結果中顯示的內容，在共享時顯示在瀏覽器標籤和社交網路卡中的內容（如果沒有為社交網路提供單獨的標題）。
描述也會顯示在搜尋結果中。它不直接用於排名演算法，因此不會影響出現在搜尋結果中的機會，但它使用戶更有可能在結果中點擊您的網站。這將提高 Google 頁面的點擊率 (CTR)，這意味著 Google 會認為這是一個很好的結果，並將在未來的搜尋結果中排名更高。
如果您的網頁上有指向外部鏈接的鏈接，尤其是在新選項卡或視窗中打開的鏈接，則應使用rel="noopener" 。
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a >這樣做可以帶來安全性和性能方面的好處。如果沒有它，外部頁面可以使用window.opener存取您的視窗物件。您可以在此處詳細了解使用noopener解決了哪些漏洞：關於 rel=noopener
其他網站也可能在與您目前頁面相同的進程上運行，因此如果外部頁面運行一些繁重的 JavaScript，則會對您的網站效能產生負面影響。 noopener也可以防止這種情況。
在這裡閱讀更多相關資訊：rel=noopener 的效能優勢
當您對網站進行大量變更或使用大量外部程式庫或 CSS 框架時，您的 CSS 檔案很可能包含許多頁面未使用的樣式。例如，您可能正在使用某個外掛程式的主題，但其他主題的 CSS 只是保留在您的 CSS 檔案中，未使用，並且樣式表檔案大小會增加。
您可以使用名為 PurgeCSS 的工具刪除所有未使用的樣式。您可以將它與CLI 一起使用，也可以在Webpack、Gulp 等中使用它。 。在我最近的一個專案中，使用了 Tailwind CSS 框架，當然，有很多實用程式我沒有使用。 PurgeCSS 將我的 app.css 檔案的大小從 214KiB 減少到 45.6Kib。
但請注意，如果外掛程式在頁面上動態建立元素，PurgeCSS 將不會偵測該元素的樣式。但是您可以透過在設定中傳遞選擇器或選擇器模式來將選擇器列入白名單，也可以透過使用特殊註解將特定規則列入白名單來將選擇器列入白名單。了解有關 PurgeCSS 白名單的更多資訊。
當瀏覽器請求資源時，伺服器可以指示瀏覽器可以儲存或「快取」資源多長時間。下次需要資源時，它可以使用本機副本。它將大大提高速度並減少伺服器的負載。您可以將伺服器配置為傳回標頭，告知資源應快取多久：
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
您應根據資產變更的頻率設定 max-age。
您也可以將伺服器配置為使用壓縮，例如 Gzip 壓縮，這將使資源傳輸速度更快。使用 gzip 壓縮 CSS 檔案可節省約 50-70% 的檔案大小。
