程式課程選達內 -
美國上市IT教育集團

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

達內教育台灣 > 知識庫 > 網路行銷-SEO優化

八大圖片SEO心法(5)-圖片格式怎麼選?圖片sitemap怎麼做?

  • 時間:2019-04-20
  • 發布:達內教育台灣
  • 來源:達內教育網路行銷課程

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
  2-1. 使用合適的圖片檔名
  2-2. 優化 alt 文字
  2-3. 能不用圖片就不要用圖片
  2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
  2-5. 圖片寬度別超過網頁的內容
  2-6. 圖片 Exif 資訊 - 視狀況而刪除
  2-7. 選擇適當格式的圖片檔
  2-8. 創建圖片的 sitemap (進階)

7.選擇適當格式的圖片檔

大多數網頁上呈現的圖檔,不外乎這三種:jpeg、png、gif。

這三種圖檔都有不同的壓縮方式。而如同前篇所述:越小的尺寸,對網頁載入的速度就越快。而網頁載入的速度對 SEO 品質有關鍵性的影響。

同一張圖片,以何種形式為檔案,才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試:

一張圖片分別存成GIF,JPG與PNG檔

由以上結果可知,jpg 檔的尺寸是相對較小的。那網頁圖片選擇 jpg 檔是最好的囉?有時未必!

一般來說,若圖片的類型是照片的話,通常存成 jpeg(jpg) 檔是最合適的、線條圖畫與文字則是 PNG 檔、動畫則是 GIF 檔。

GIF、JPEG (JPG) 與 PNG...我該存成哪種檔案?

GIF 格式雖然算是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),但是顯示的顏色被限制成只有 256 種,因此適用於不需太高解析度的動態圖。

JPEG (JPG) 格式是具有破壞性的圖片壓縮格式,所以可壓縮的尺寸相對也較小。適用於照片。

PNG 格式也是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),且顯示的顏色也不像 GIF 般被限制,因此 PNG 檔案尺寸比前兩者大。PNG 格式適用於圖片中的線條與文字必須要很清楚地顯現的場合、或是小尺寸的 LOGO、ICON 等。去過背的 PNG 圖可在網頁上以去背的方式呈現,不會遮住後面。因此常被用於 LOGO 圖、ICON 等。

若你想轉換圖片的格式,但是電腦沒有安裝 Photoshop 等影像處理軟體,可以試試線上的免費圖檔轉換工具

8.創建圖片的 sitemap (進階)

相信許多創建網站 sitemap 對許多 SEO 優化師來說是非常基本的,而且現在已經有許多線上工具可以自動幫你生成網站的 sitemap,但是至於圖片的 sitemap 來說,這些工具多只有生成最基本的 <image:image> 與 <image:loc> 標籤。 而根據 Google 官方對於圖片 sitemap 的說明如下:

圖片 Sitemap 資訊有助於 Google 發掘原本可能找不到的圖片 (例如您的網站使用 JavaScript 程式碼連結圖片),並可讓您為 Google 指出要對網站上的哪些圖片進行檢索及建立索引。您可以使用另一個 Sitemap 來列舉圖片,也可以將圖片資訊加入現有的 Sitemap。以下範例說明的是 「http://example.com/sample.html」這個網頁的 Sitemap 項目,該網頁包含兩張圖片。

      <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
                 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
        <url>
          <loc>http://example.com/sample.html</loc>
          <image:image>
            <image:loc>http://example.com/image.jpg</image:loc>
          </image:image>
          <image:image>
            <image:loc>http://example.com/photo.jpg</image:loc>
          </image:image>
        </url> 
      </urlset> 

使用上述範例中的語法架構時,每個網頁最多可以列出 1,000 張圖片!

此外,根據 Google 官方說法,適用於圖片的標記如下所示:

標記 是否必要 說明
<image:image> 包含單一圖片的所有資訊。每個 <url> 標記最多可包含 1,000 個 <image:image> 標記。
<image:loc> 圖片的網址。

在某些情況下,圖片網址和您的主網站可能不會位於相同的網域中。
Search Console 會同時驗證圖片和網站所在的網域,所以您無需擔心。
舉例來說,如果您使用內容傳遞網路 (例如 Google 協作平台) 代管圖片,請確認代管網站已經過 Search Console 驗證。
此外,請確認 robots.txt 檔案允許 Google 檢索您要建立索引的任何內容。

<image:caption> 選用 圖片的說明文字。
<image:geo_location> 選用 圖片所顯示的地理位置。例如:<image:geo_location>Limerick, Ireland</image:geo_location>
<image:title> 選用 圖片的標題。
<image:license> 選用 圖片授權的網址。
上一篇:八大圖片SEO心法(4)-圖片寬度怎設定?Exif對圖片SEO是否有幫助?
下一篇:八大圖片SEO心法(1)-SEO圖檔命名與alt文字密技
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省