0 Comments

by heyj

January 12, 2023

在數碼營銷中,有許多術語需要了解,以下是一些常用的術語:

  1. SEO(搜尋引擎優化):指在搜尋引擎中優化網站內容和結構,以提高網站在搜尋引擎結果中的排名。
  2. PPC(付費搜尋引擎廣告):指為網站在搜尋引擎結果中排名高於其他網站而付費的廣告方式。
  3. SERP(搜尋引擎結果頁):指搜尋引擎返回的網頁結果。
  4. Meta 標籤:指 HTML 中的標籤,用於向搜尋引擎提供關於網頁內容的額外資訊。
  5. Sitemap:指網站地圖,用於向搜尋引擎提供網站內容的結構。
  6. Backlink:指在其他網站上鏈接到某個網站的鏈接。
  7. LSI(潛在語義索引):指利用關鍵詞之間的關聯性來改善搜尋引擎優化的方法。
  8. Landing page:指網站上用戶最先進入的頁面,通常用於廣告或市場活動,用於吸引用戶進一步了解網站內容或產品服務。
  9. XML Sitemap:指使用 XML 格式撰寫的網站地圖,用於向搜尋引擎提供網站內容的結構。
  10. Linkfarm:指一組不相關網站之間互相鏈接,用於提高網站在搜尋引擎中的排名,但通常被認為是違反搜尋引擎政策的做法。
  11. Meta search engine:指一種搜尋引擎,它能夠向用戶提供多個其他搜尋引擎的結果。
  12. rel=”sponsored” & rel=”ugc” : 是HTML 中的鏈接屬性,rel=”sponsored” 告訴搜尋引擎這是贊助鏈接,不需要進行索引或計算排名,rel=”ugc” (用戶生成內容) 屬性則能夠明確的告訴搜尋引擎這是用戶生成的內容鏈接,可以進行索引或計算排名.

Srcset not working

Srcset 是 HTML 中的一個屬性,用於在不同的螢幕寬度下顯示不同的圖片。如果 Srcset 沒有正常工作,可能是由於下列原因之一:

  1. Srcset 屬性的寫法錯誤:確認 Srcset 屬性是否正確寫,並且圖片路徑是否正確。
  2. 流覽器不支援 Srcset 屬性:確認您使用的流覽器是否支援 Srcset 屬性。
  3. Srcset 屬性與其他圖片屬性衝突:確認 Srcset 屬性是否與其他圖片屬性衝突,例如 Src 屬性。
  4. 瀏覽器設定問題:確認您的瀏覽器設定是否正確,例如禁用 JavaScript 或者禁用圖片。
  5. 網頁檔案錯誤:確認網頁檔案是否有語法錯誤或是其他錯誤。

建議您檢查上面的原因,並在確認沒有錯誤後再次嘗試使用 Srcset 屬性,若仍有問題建議您在網上查找解決方法或者諮詢專業人員協助解決.

Image srcset

Image srcset 是 HTML 中的一個屬性,用於在不同的螢幕寬度下顯示不同的圖片。它可以讓您為不同的螢幕大小提供不同的圖片版本,並根據用戶端螢幕寬度自動顯示最適合的圖片,這樣可以減少圖片載入時間並提高網頁體驗。它的語法如下:

<img srcset="image-1.jpg 480w, image-2.jpg 720w, image-3.jpg 1080w" src="image-1.jpg" alt="image">

其中,”srcset”屬性值中每一個圖片都有寬度值(例如”480w”),以及”,”分隔。當瀏覽器載入圖片時,它會根據用戶端的螢幕寬度選擇最適合的圖片顯示。

屬性 src 是必須的,它是在瀏覽器不支援 srcset 時的圖片替代選項。

在使用 srcset 前,建議先檢查瀏覽器是否支援 srcset 屬性,並確認圖片路徑是否正確。

Source srcset

Source srcset 是 HTML 中的一個屬性,主要用於在多種不同螢幕寬度下提供不同的圖片或視頻版本。它主要用於 <picture> 標籤中,用於告訴瀏覽器在不同螢幕寬度下應該使用哪個圖片或視頻。

它的語法如下:

<picture>
  <source srcset="small.jpg 480w, medium.jpg 720w, large.jpg 1080w">
  <img src="small.jpg" alt="image">
</picture>

其中,”srcset”屬性值中每一個圖片都有寬度值(例如”480w”),以及”,”分隔。當瀏覽器載入圖片時,它會根據用戶端的螢幕寬度選擇最適合的圖片顯示。

在使用 source srcset 前,建議先檢查瀏覽器是否支援 <picture> 標籤,並確認圖片路徑是否正確。

這個屬性和img srcset 很類似,都是用於根據不同螢幕寬度顯示不同的圖片,但是 source srcset 是用在 <picture> 標籤中,而img srcset 是用在<img> 標籤中。

srcset example

Srcset 的範例如下:

<img srcset="small.jpg 480w, medium.jpg 720w, large.jpg 1080w" 
     sizes="(max-width: 480px) 100vw, (max-width: 1080px) 50vw, 25vw"
     src="small.jpg" alt="image">

在這個範例中,我們有三個不同的圖片版本,分別為 “small.jpg”,”medium.jpg” 和 “large.jpg”。”srcset” 屬性值中有每個圖片的寬度值(例如 “480w”),以及 “,” 分隔。

sizes 屬性是可選的,它告訴瀏覽器圖片將在多大的空間中顯示。例如 (max-width: 480px) 100vw, (max-width: 1080px) 50vw, 25vw 就是說寬度小於480px的時候會使用100vw的寬度,寬度小於1080px的時候會使用50vw的寬度,寬度大於1080px的時候會使用25vw的寬度。

當瀏覽器載入圖片時,它會根據用戶端的螢幕寬度選擇最適合的圖片顯示。在這個範例中,當用戶端螢幕寬度小於 480px 時,瀏覽器將會顯示 “small.jpg”;當用戶端螢幕寬度在 480px 至 1080px 之間時,瀏覽器將會顯示 “medium.jpg”;當用戶端螢幕寬度大於 1080px 時,瀏覽器將會顯示 “large.jpg”。

值得注意的是,srcset 和 sizes 只有在支援HTML5的瀏覽器才能正常使用,而在不支援HTML5的瀏覽器將使用src指定的圖片。

srcset mdn

srcset 是一個HTML中的屬性,它允許網頁開發人員在不同的螢幕寬度下提供不同的圖片版本。這可以減少圖片載入時間並提高網頁體驗。

MDN web docs是Mozilla開發者網絡的網站,它提供了關於 srcset 屬性的詳細說明和範例。

您可以在這裡找到完整的說明: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

這裡有一個簡單的範例,展示了如何使用 srcset 屬性:

<img srcset="small.jpg 480w, medium.jpg 720w, large.jpg 1080w" 
     sizes="(max-width: 480px) 100vw, (max-width: 1080px) 50vw, 25vw"
     src="small.jpg" alt="image">

這個範例中有三個不同的圖片版本,分別為 “small.jpg”,”medium.jpg” 和 “large.jpg”。”srcset” 屬性值中有每個圖片的寬度值(例如 “480w”),以及 “,” 分隔。當瀏覽器載入圖片時,它會根據用戶端的螢幕寬度選擇最適合的圖片顯示。

您可以在MDN網站上找到更多關於srcset屬性的用法和细節,包括如何使用sizes屬性等。

需要注意的是, srcset 屬性和sizes屬性只有在支援HTML5的瀏覽器才能正常使用,而在不支援HTML5的瀏覽器將使用src指定的圖片。

另外,為了更好的網頁體驗,建議您將srcset屬性和picture元素一起使用。picture元素允許您在不同的螢幕寬度下使用不同的圖片版本,並提供對支援srcset和sizes屬性的瀏覽器的支援。

您可以在MDN網站上找到更多有關picture元素的用法和細節。

About the author 

heyj

Leave a Reply
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}