聯盟行銷廣告無法顯示？2個步驟教你如何自製網站廣告素材，AdBlock 也擋不住你！

最後更新時間： 2023 年 01 月 13 日

身為一個部落格經營者，很多時候都想在自己的網站放一些宣傳的素材，包括聯盟行銷的素材、其他廣告的素材等，但有時候卻發現網站廣告無法顯示！

也有很多時候素材裡面的圖片很醜、或是點進去的連結你想要換別的連結，甚至有些廠商給的素材根本不能用、不能正常顯示（被擋廣告了）！

本篇文章就要教你如何透過語法自製廣告素材，不僅可以自己選擇你要的連結跟圖片，甚至讓瀏覽器擋廣告外掛也擋不住你的廣告！

---

---

廣告無法顯示的原因是什麼？

被瀏覽器擋廣告外掛擋住了

很多使用瀏覽器瀏覽網頁的人都會裝一款叫做「AdBlock」的外掛，他會將網頁上、Youtube影片等地方的廣告都擋住，雖然提升了使用者體驗，但也讓用心的內容創作者得不到廣告的點擊跟收益。

被 VPN 網路篩選廣告的功能擋住了

有些人會使用特殊的 VPN 軟體，那些軟體裡面自帶了過濾廣告網路封包的功能，簡單來說就是可以在網路本身的傳輸資料時，就幫你把廣告相關的內容過濾掉。

如果想知道怎麼透過 VPN 過濾廣告，可以參考底下我這篇文寫的這個 VPN 軟體，他就有提供一個叫做 CyberSec 的廣告過濾方式。

【NordVPN評價】2020最高CP值的VPN翻牆工具｜連線速度實測、註冊、購買與使用教學

---

廣告素材的語法是什麼意思？

這些廣告素材基本上都是 HTML 語法加一點簡單的 CSS 組成，我在這邊不會講太多程式語言的教學，只會簡單帶大家看一下廣告素材的語法的含義。

聯盟行銷廣告素材語法範例與解析

聯盟行銷廣告素材語法範例

這邊我以博客來的聯盟行銷廣告素材為範例，當你到你的博客來推廣帳號中取得廣告素材，大概會拿到像是底下這張圖的推廣語法，叫你複製後貼到你的網站上。

而這段語法為了方便大家觀看，我把它貼到我常用的程式碼編輯器上

（別問我怎麼會用程式碼編輯器，我是一名自由接案的工程師，想更了解我可以看 Mr.K 的故事哈哈）

接下來我們就來看看，這段博客來的推廣素材語法，內容到底有什麼吧？

HTML 語法簡述

要了解這種推廣素材的語法，首先我們必須先知道 HTML 這個程式語言，以下我只講兩個重點，標籤語法＆標籤屬性，大家就耐心地把它看完，你一定就能夠學會 HTML 這個語法的大致用法！

標籤語法： HTML 語法其實是一種長得很像標籤的語法，有看過他的人就可以看到， HTML 是由各種標籤所組成，標籤長相就會像是「<text></text>」這樣。

標籤屬性：在每個標籤中都會有屬性可以設定，比如a標籤就會有href這個屬性，長得會像「<a href=””></a>」這樣，href的引號裡面就是要放想要跳轉到的超連結網址。

所以其實這時候就可以看得出來，博客來的聯盟行銷廣告素材中，就是使用到了兩個標籤，外面一個超連結標籤「<a></a>」，裡面包住了一個圖片標籤「<img >」。

這樣的語法設計就是在圖片上覆蓋了一層超連結，點下去自然就可以跳轉到某個網頁囉！

連結語法解析「<a></a>」

a標籤是超連結的意思，一般我們看到點下去會跳轉網頁、樣式看起來藍藍有底線的，就是a標籤，就像這樣。

而我們使用a標籤的時候都會用到它的屬性href，在引號中放入我們點擊之後要跳轉到的網頁網址。我們看到博客來的聯盟行銷廣告素材中，href後面跟著的就是博客來的推廣連結！

這樣大家應該懂素材中為什麼點下去會跳到博客來的商品畫面了吧！其實就是這段<a>超連結標籤幫你做到的！

圖片語法解析「<img >」

img圖片標籤顧名思義就是用來顯示圖片的，我們在網頁上看到的所有圖片其實都是這個標籤幫你顯示的哦！

使用img標籤時，最常用到的就是 src 這個屬性，裡面要放的是圖片的網址，讓這個標籤依據這個網址去幫你找到圖片在哪邊，並且顯示出來。

就像上面紅框標示的那個網址一樣，我們把他複製下來貼到瀏覽器上，就會看到那是什麼圖片囉！

因此如果你想要自己更換圖片，就從 img 標籤中的 src 下手就可以囉！接下來就讓我帶大家開始學習怎麼自製廣告素材！

---

---

如何自製廣告素材？

步驟1-自製廣告素材語法(基本)

首先根據上面所教學的 a 超連結標籤 &img 圖片標籤語法，最基本我們要產出一段廣告素材的程式碼，會長得下底下這樣：

1. 將聯盟行銷連結或者其他推廣連結放到 a 標籤的 href 屬性裡面
2. 將圖片網址放到 img 標籤的 src 屬性中
3. 將圖片替代文字（也就是描述這張圖片的文字）放入 img 標籤的 alt 屬性中

這樣就完成最最最基本的廣告素材囉！接下來再進一步教大家進階的使用方式

步驟2-自製廣告素材語法(進階)

其實說是進階，不如說是用到了更多屬性啦！先看看底下這張圖片吧！

1. 在 a 標籤中使用 target 屬性，裡面輸入 _blank ，就可以讓別人點你這個連結時，使用新分頁來開啟連結網頁囉！
2. 在 img 標籤中設定 width (寬度)、 height (高度)，就可以調整圖片的長寬比例大小（單位是 px ，不懂單位也可以直接調整數字看效果就好）

如何取得廠商廣告素材語法中的圖片網址

看完上面對廣告素材的解析，你應該也知道了一件事情：「如果要取得廣告素材中的圖片網址，只要從 img 標籤的 src 中取得圖片網址就好了！」

step 1

從素材語法中取得 img 標籤的圖片網址

step 2

網址貼到瀏覽器開啟網頁

step 3

點擊右鍵，就可以另存圖片囉！

如何取得非廠商廣告素材的圖片網址

這招就比較厲害了，我們可以透過瀏覽器的開發者工具，取得在網頁上顯示的圖片網址。

＊不過要注意廠商的圖片是否有授權你使用哦，避免侵權問題

step 1

首先先開啟你物色好的圖片的網頁，比如我想要紅框中那個圖片

step 2

在網頁隨意一處點擊右鍵 > 「檢查」（或直接點 F12 ）

step 3

點擊右邊跑出的開發者畫面最左上角的「滑鼠符號」

step 4

移動到你要取得圖片的上方，點擊下去

step 5

右邊的視窗就會帶你看到那張圖片的語法在哪，可以看到熟悉的img標籤

step 6

點擊兩下 img 標籤中的網址，就可以複製

step 7

網址貼到瀏覽器上，就會看到圖片了

step 8

接下來就右鍵另存圖片就好囉！

不過這種方式還是要注意圖片的所有權問題，並且有些網站圖片是取得不到的哦！

---

想學習更多好用數位工具、一起提升生產力、增加工作效率？

填寫下方表單，限時免費領取《數位工具應用地圖電子書》，內有超完整數位工具應用情境與攻略，一次帶走所有好用工具與使用攻略！

Ps. 領取後，我們還會每週二準時發送給你一封《領先數位週報》電子信，持續跟你分享最新研究的推薦數位工具，以及一個提升生產力的小技巧！

---

【免費支持】如果這篇文章有幫助到您或想鼓勵我 ，請幫我在下方處綠色的拍手圖示按 5 下，只要登入 Google 或 FB ，不需花費任何經費就能支持我，感謝您!