大型網頁架構實例

tags: RD1

目錄

[TOC]
:::x`

參考資料

builtwith(https://pro.builtwith.com)-可將要查詢的網頁網址放入此網站查詢

Google.com(https://www.google.com)

1. Google Static Content(GStatic)
   Google 靜態內容，內涵Javascript、Images和CSS等，雖然已針對動態轉譯和輸出快取而對 Web 伺服器進行最佳化，但 Web 伺服器仍然需要處理下載靜態內容的要求。 這會取用通常可以更加適當使用的處理週期。
2. Google API
   Google API 主要依從人類基礎的四種能力：聽說讀寫衍伸而成，例如：語音助理、圖形文字辨別、google map、google翻譯．．．等
3. Quick UDP Internet Connections(QUIC)
   由google開發，QUIC是個建立在UDP的連線方式，它可以在2的端點間建立大量多工連線，其中每個連線可能近似於獨立的TCP連線。QUIC的目標在於提升網路傳輸的效能、降低延遲，並提供安全的連線。
4. UTF-8
5. HTML5 DocType
6. Microdata
   Google、Bing、Yahoo三大公司攜手合作製作，屬一種結構性的標示語言，可用來標示網頁語意，可以不用透過搜尋引擎來猜測字串含義，就可明確指定圖或文字的意思，用法如下：

在網頁中加上itemprop="image"

<meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png"
itemprop="image">

7. Canonical Content Tag
   在google.com的功用是主動規範您的主頁，用法如下：

在link中加上rel="canonical"

<link rel="canonical" href="https://ogs.google.com/widget/app">

8. WAI-ARIA(由W3C編撰的規格)
   是一個由W3C編撰的規格，定義一套額外的HTML屬性能用於元素上提供額外的語意及改善可及性，當元素缺乏這些條件時可適用。其規格定義三個主要的特點：

• Roles-定義元素的功能
• Properties-定義元素屬性
• States-定義元素狀態

9. img srcset
   響應式圖片，根據不同裝置置入不同版本的圖片，用法如下：

在網頁中加上srcset=""，以1x、2x…放入不同版本的圖片

<img class="gb_Ia gbii" srcset="https://lh3.google.com/u/0/ogw/ADGmqu_3sWo4C7wg-L0kZdFRXiI0mh3Fi2aGiwQK699F=s32-c-mo 1x, https://lh3.google.com/u/0/ogw/ADGmqu_3sWo4C7wg-L0kZdFRXiI0mh3Fi2aGiwQK699F=s64-c-mo 2x ">

10. Javascript
11. HTTP Strict Transport Security(HSTS)(強制安全傳輸協定)
    此技術可抵禦SSL剝離攻擊，此攻擊是中間人攻擊一種。
    是針對HTTP的技術，HSTS的作用是強制客戶端（如瀏覽器）使用HTTPS與伺服器建立連接。 伺服器開啟HSTS的方法是，當客戶端通過HTTPS發出請求時，在伺服器返回的HTTP回應頭中包含Strict-Transport-Security欄位。非加密傳輸時設定的HSTS欄位無效。
12. X-XSS-Protection
    此技術防XSS攻擊，以0和1來控制過濾開關，方法如下：
    0->關閉XSS過濾功能
    1->打開XSS過濾的功能
    1;mode=block->當被攻擊時，不會顯示網頁
    1;report=(Chromium only)->當被攻擊時，回報指定的URI
13. X-Frame-Options
    此技術防ClickJacking攻擊，網站可利用X-Frame-Options來確保本身不會遭惡意嵌入到其他網站
14. P3P Policy

Google Play (https://play.google.com/store)

1. HTML5 DocType
2. X-UA-Compatible

<meta content="IE=10" http-equiv="X-UA-Compatible">

3. OpenSearch
   Amazon子公司發明的一項技術，是一種以XML方式定義搜索的方法，網站可以依據此技術與其他城市間接關聯等用途。
4. @Font Face

@font-face{
    font-family: 定義字體名稱;
    src: url('定義該字體下載的來源網址')
}

5. Canonical Content Tag
   在google play的功用是主動規範您的主頁，用法如下：

<link rel="canonical" href="https://play.google.com/store?hl=zh_TW">

6. HREFLang
   透過hreflang標記，Google可根據使用者偏好設定，向使用者顯示您網站的是用語言版本，方法如下：

hreflang 有三種主要的宣告方式：「語言-國家」(en-ie)、「語言」(en)、「x-default」

<link rel="alternate" href="https://play.google.com/store" hreflang=“x-default">

7. Open Graph Protocol
   涵蓋三個架構，分別為：Social plugins,Open Graph Protocol及Graph API，最大的用意在於要把所有網站都FB化
8. Meta Description
   被稱作為描述標籤，是html代碼中用以簡短描述網頁內容的一個標籤，會出現於搜尋引擎下方，幫助使用者快送查找所需網站，用法如下：

<meta name="description" property="og:description" 
content="數百萬款最新的 Android 應用程式、遊戲、音樂、電影、電視節目、書籍、雜誌等項目盡在其中，歡迎隨時隨地透過您的各種裝置取得。">

9. Twitter Cards
10. WAI-ARIA
11. Content Security Policy(CSP)
    此技術防XSS攻擊和網頁樣式置換
12. HSTS強制安全傳輸協定
13. X-XSS-Protection
14. X-Frame-Options
15. Content Type Options
    此技術避免瀏覽器誤判文件形態，防止Content-Type被竄改，此屬性套用在script或style中，方法如下：

• If style的content-type不是text/CSS就會被拒絕
• If script的content-type不是javascript MIME type就會被拒絕

16. P3P Policy

補充

1. Meta Keywords
   其用法功能與Meta Description相似，但為重視網站整體的用戶體驗、網站的內容品質，Meta Keyword 對SEO已經沒有效，所以放在那邊並沒有直接的好、壞影響，但如果你的 Meta Keyword 裡面有刻意堆疊過多的關鍵字（比方說裡面塞個20組以上的關鍵字），我反而會建議你將它移除，避免被搜尋引擎判定我們有意圖作弊的嫌疑。
2. DNS Prefetch
   預先做DNS解析，將人類可理解的domain name，轉為IPaddress，此公用可提升網站效能，用法如下：

<link rel="dns-prefetch" href=“//csc.beap.bc.yahoo.com">

有增加此功能，下方有連結也會套用開啟DNS Prefetching，此功能在https下無法開啟，需加入下面這行：

<meta http-equiv="x-dns-prefetch-control" content="on">