Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(2)
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(2)
SEO優化員們!! 今天要來偷偷和大家分享圖片SEO的小秘密!! 想了解詳細內容就快往下看吧!!
目錄
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 (進階) |
圖片SEO的重要性今天我們看到的 Google 商標只有 305 Bytes，經過壓縮後可以縮小為 195 Bytes。不過在 2015 年之前，舊的 Google 的 Logo 卻有 6KB (6,380 bytes)、經過壓縮後大小仍為 2 KB (2,145 bytes)。 曾經，Google 針對我們看到的新 Logo 發表了以下談話：「舊的標誌由於檔案太大，讓我們必須在頻寬較低的網路上 (就是網路連線速度會比較慢)，變成文字模式的標誌。而新的標誌檔案大小降低，讓我們可以不再作任何的修正，而使用一致的標誌，讓全世界可以更容易地存取我們的資源」。這就是我們 「Google 大神」 給大家的圖片 SEO 課程。反觀國內部分網頁設計者，希望網頁看起來漂亮，而使用高解析度的圖片大檔。但是部分使用者因礙於網路連線速度慢等因素，而無法看這樣高解析度的圖片。而近年來行動設備的使用者已成主流用戶，有些用戶使用有限的資費方案，若圖片檔案過大也會吃掉過多頻寬。因此要好好優化圖片檔案，可減少連線較慢的使用者的時間、也減少有限資費方案的使用者的頻寬、但又不失圖片的顯示尺寸。8 大圖片 SEO 心法以下列舉八項基本的圖片 SEO 方法，包含圖片大小的優化。1.使用合適的圖片檔名圖片檔案不是文字 (搜尋引擎是認字的)，因此能被搜尋引擎拿來當成線索的資訊很有限。而圖片的檔名是文字，對搜尋引擎來說可以給予搜尋引擎關於圖片內容的資訊。而當你需要上傳許多圖片時，直接用相機預設的檔名 (如 IMG00050.jpg、IMG00051.jpg 等等) 對 SEO 是沒有幫助的。 你可以將圖片的檔名改成與圖片內容符合的簡短敘述。如一件印著 「Stratovarius」 樂團的 T 恤圖片，你就可以命名為：a-Stratovaiurs-shirt.jpg 就比 IMG00050.jpg 更利於 SEO。也許你會反駁說：「Google 的人工智慧技術一直都在進步。現在 Google 藉由機器學習所便是的圖片已經多到能主動讀取圖片的訊息...你隨便輸入一張圖片給 Google Cloud Vision API（雲視覺API），裡面的 AI 就能讀取分析圖片的資料了。 如下圖所示，我給 Google 一張圖片，它就馬上讀出圖片裡面有 「貓」 的資訊。【參見：動手玩玩 GOOGLE 人工智慧影像辨識雲平台：Google Cloud Vision API】
是的，但是對於部分難以辨識的圖片，Google 的 AI 還是會誤判，如下圖 Google 解讀成圖片中的物體是 「cheese (乳酪)」 ，但事實上，這是一塊奶油...因為它長得跟乳酪實在是太像了 
所以要讓搜尋引擎正確的解讀你網頁上的圖片的方式，還是給它一個正確而精準的名字吧！但是千萬不要使用 「關鍵字堆砌」 的方式來命名，因為這樣會被 Google 判定為黑帽作弊網站，並被打入冷宮。【參見：SEO-white-n-black-hat-difference.html" target="_blank">白帽SEO、黑帽SEO，到底差在哪?】」 針對上述貓的貓咪圖片，好的與錯誤的命名範例如下：
好的命名範例: cat.jpg
錯誤的命名範例 (使用關鍵字堆砌的方式): cat-mammal-kitten-pussy-kitty 當然，單靠圖片檔名取的好，不一定等於能排在 Google 搜尋結果前三名。但是，可以藉著圖片檔名增加與該網頁相關的線索。更何況，幫圖片重新命名並不會花你太多時間 - 所以這樣做是值得的。 2.優化 alt 文字 比圖片檔名更可以給予搜尋引擎關於圖片內容的線索的，就是圖片的 alt 文字。 而當網頁無法載入圖片時，使用者就會無法在網頁上看到圖片，但是會看到 alt 文字。因此對於無法看到圖片的使用者，也能透過 alt 文字理解圖片的資訊。 alt 文字在撰寫上，應以簡短的文字寫出圖片的重要特徵，再加入關鍵字。 當然，也不能以胡亂填充關鍵字的方式來撰寫之，以免被 Google 判定為 SEO 作弊而被打入冷宮。 alt 的命名相較於圖片檔名，可以用更精確、更長的文字來敘述。如上例的貓咪圖片，圖片名稱命名為 「cat(貓)」、而 alt 命名為 「calico cat with heart-shaped fur pattern (一隻毛色有愛心圖樣的三花貓)」 ，HTML5 原始碼則如下例所示： <img src="cat.jpg" alt="calico cat with heart-shaped fur pattern"> 如果你的圖片是關於你賣的產品，就可在 alt 文字中放入品名、型號等重要資訊。這樣的話，若有使用者以品名或型號來搜尋，你的圖片就比較有機會在圖片搜尋的結果中出現，而提高曝光率。如果照片是關於產品的細節、不同角度等，也都可以補充在 alt 文字中作補充說明。 如今天你經營車用電池的專賣網站。 這時你正要上架一顆充電器，品牌為 「Battery Tender」 、型號為 「022-0186G-DL-WH」。 這時你的圖片名稱可命名為 「Battery-tender.jpg」、而 alt 命名就可以加入型號等資訊，為 「Battery Tender (022-0186G-DL-WH)」。因為有時 Google 可以憑藉著型號等資訊而判定圖片為何物。另外，你還可以加入其他更精確的訊息：如產品用途、伏特數等敘述，像是 「Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger」 。HTML 原始碼如下例所示： <img src="Battery Tender.jpg" alt="Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger"> 其他閱讀偷偷告訴你圖片SEO小秘密(二): SEO能不用圖片就不要用圖片?偷偷告訴你圖片SEO小秘密(三): 為什麼不要用width和height來縮小圖檔?偷偷告訴你圖片SEO小秘密(四): 如何設定圖片寬度?Exif對圖片SEO有幫助嗎?不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!想學世界五大熱門程式語言,那你一定不能錯過Java課程!!報名對的UI課程讓你上天堂!! 高薪就業就這行!!美國NASDAQ上市公司、外商IT教育培訓企業 Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(4)
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(2)
無論你是前端工程師還是網頁設計師都應該要把這篇學起來~了解網站的規劃流程對彼此的溝通和工作校路都非常有幫助喔~
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(24)
圖片SEO訣竅最後一篇!!前面的文章大家都看過了嗎?最後一篇文章要來教大家的是圖片格式和圖片sitemap!!
目錄
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 檔來試試：
由以上結果可知，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和HTML5的文章!! 正在學習SEO和HTML5的準前端工程師們有需要可以多看看喔~ 其他閱讀8點一定要會的圖片SEO訣竅: (1) SEO圖檔命名與alt文字優化8點一定要會的圖片SEO訣竅: (2) SEO盡量不要用圖片?8點一定要會的圖片SEO訣竅: (3) 不要用HTML的width和height來縮小圖檔?不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!想學世界五大熱門程式語言,那你一定不能錯過Java課程!!報名對的UI課程讓你上天堂!! 高薪就業就這行!!美國NASDAQ上市公司、外商IT教育培訓企業 Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(3)
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)
前端工程師必讀!! 今天要來和大家分享RWD和AWD的優缺點整理表!! 還不會的工程師們快筆記!! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。讀完本系列文章後，你將會了解：
(目錄)
- RWD 和 AWD 的差異與優缺點
- 我該選擇 RWD 還是 AWD ?
- AWD 要怎麼做才能對 SEO 無痛?
- 了解整體網站的規劃流程-PM與前端溝通更順利
|
RWD 和 AWD 的差異與優缺點在網頁上，RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是為了現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法，讓網頁設計無論是在桌機螢幕上、或是尺寸較小的行動裝置上，都能夠清楚的呈現，讓使用者能更夠舒服的瀏覽網頁。RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套 CSS，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。RWD 與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下：RWD 會把所有裝置的樣式都寫在同一套 CSS 中，所以無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。AWD 是針對各種裝置撰寫對應的 CSS，因此就會針對不同的裝置，而有多套的 CSS 樣式碼：舉例來說桌機有桌機的一套 CSS，手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式，來判斷使用者是使用哪種裝置開啟網頁，再自動匯入相應的 CSS 檔案：如程式判斷出某使用者是使用桌機瀏覽網頁的話，就會自動匯入桌機的 CSS 樣式檔案；若是使用手機開網頁，就匯入手機的 CSS 樣式檔。RWD、AWD 的優缺點比較RWD 與 AWD 只是方式不同罷了，沒有所謂的哪個比較好，優缺點比較如下表：RWD vs AWD 優缺點比較
|
RWD |
AWD |
|---|
相同之處 |
兩種都會判斷裝置而顯示出對應的樣式。 |
|---|
不同之處 |
無論行動裝置或是桌機，都使用同一套 CSS。
當使用者打開了網頁，就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。 |
針對各種裝置撰寫對應的 CSS，因此會有多套 CSS，一般來說會有兩套 CSS：桌機專屬的一套 CSS，手機專屬的一套 CSS。
當使用者打開了網頁，程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。 |
|---|
優點 |
節省網站製作成本
因為無論是桌機、手機的樣式，全都只塞在同一套 CSS 檔案，所以開發成本較低，適合內容較單純的網站、新創公司或是個人工作室使用。
SEO更方便
因為同一個網頁、URL 也只有一個，所以更方便 SEO。 |
網頁維護更分明，不怕樣式被吃到
雖然成本較 RWD 高，但是由於桌機與手機的 CSS 分別在不同的檔案，因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼，不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。
有利於 UI/UX
若對畫面顯示的要求較高，希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時，就適用 AWD，可針對不同的瀏覽介面而做出對應的
UI/UX，讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。
行動裝置網頁載入更快
可針對行動裝置而做優化，將原本的大圖縮減成最合適的尺寸，減少不必要的大圖，就能加快行動裝置的網頁 loading。 |
|---|
缺點 |
開發容易、維護耗時：
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面，所以在網頁維護上較不容易，常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況，很可能修改某個樣式碼，卻也影響到了其他不需修改的樣式碼，而導致網站 「跑山」 的窘境。
行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼，所以較無法針對行動裝置做圖片顯示的最佳化，加上 RWD 網頁的機制是將資訊先下載後，再根據裝置大小重新排列，所以會較慢。 |
維護較容易，但開發成本高：
一開始需要針對不同的裝置而寫出好幾套 CSS，耗時耗力，且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求，還需另請工程師將同一網頁的多套 CSS 串在同一個網址內，否則流量會自動被手機與桌機瓜分。 |
|---|
繼續看本系列文章下篇:2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利 其他閱讀CSS語法格式第一要點!! 前端工程師們快學起來~前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼前端工程師專欄:CSS套入HTML中的四種方法~最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!中國IT教育領導品牌 達內教育集團第一家海外授權中心Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(3)
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(8)
