1 月 2021 | RAB瑞布科技

兩位設計師表明：「我們計畫目的就是支援「台灣」的自由與尊嚴。透過這個 Taiwan Icon Font，讓世界注意台灣、吸引來台灣旅遊、理解台灣的正確、最後增加跟我們一樣喜歡的台灣的粉絲們。」從官網的介紹感覺得出來兩位是超級愛台灣的粉絲，希望藉著此次創作傳遞「WE STAND BY TAIWAN」理念。

Taiwan Icon Font 的四大特色

世界内只有台灣：從來沒有為一國為主題的公開 Icon Font，只有台灣會用 Icon Font 表達自己國家。
為了Web跟桌面用：為了web用提供wof、wof2、svg格式，為桌面用otf格式的檔案給大家。
免費下載：為了分享給世界的所有的人台灣的魅力免費公開，我們會吸引旅遊客。
永遠更新：為了提供給世界的愛台灣人holoko繼續設計更多icons，並且提供更方便的功能。

Taiwan Icon Font 提供四種格式：wof、wof2、svg 和 otf，開放使用者免費下載！更重要的是這套圖示字型可運用於網頁上，透過樣式表、特定代碼方式載入圖示，就能在網頁快速展示各種台灣會出現的地標、國旗、景點、交通工具、文化、美食、特有種或是品牌等等。

立即去下載：https://www.twicon.page/get_started.html

Taiwan Icon Font的版權說明

Taiwan Icon Font 字體檔案的版權是適用 SIL OFL 1.1，免費誰都可以用。

可以：

・私用、商用
・重製、改變

不可以：

・販賣Taiwan Icon Font的檔案
・降低Icon價值和尊嚴的使用
・以Taiwan Icon Font為主體做產品販賣
・用“Taiwan Icon Font”的名字做其他計劃

更有網友使用 Taiwan Icon Font 圖示製作線上小測驗遊戲，可以透過問答方式看看你對於台灣夠不夠熟悉，可以前往「TW Icon Game 台灣圖標字型遊戲」玩玩看！這個網站也開放原始碼至 GitHub。

希望大家可以好好愛惜、使用這些圖示～

延伸閱讀：8個網頁設計素材網站報你知

當你把網站連結分享到 Facebook 或 Line 的時候，是不是會顯示出一個文章的縮圖？以及文章的標題跟描述呢？

像是下面這張圖，就是瑞布把文章連結分享到 Facebook 會顯示的樣子，其中的圖片縮圖、標題、描述，都跟「Open Graph（og）」以及「meta title」、「meta description」有關！

在在搜尋引擎中搜不到我的網站？這篇文章中我們有介紹meta title及meta description，這是基礎SEO不容忽視的部分，其實這也跟分享網站連結時會出現的縮圖文章標題、描述有關。

每個頁面都要設定不同的標題及描述，有利於你的SEO，在分享連結時也可以漂亮地呈現縮圖，吸引使用者點選你的連結進入網站。

Open Graph 又是什麼呢？

根據開放圖譜協議中的介紹：Open Graph 在開放圖譜協議允許任何網頁成為豐富社群的對象，目標是讓網站連結在社交媒體呈現時，能有較豐富的內容展示，如縮圖、標題、描述等。

儘管存在許多不同的技術和模式並且可以將它們組合在一起，但是沒有一種技術可以提供足夠的信息來豐富地表示社群中的任何網頁。Open Graph協議建立在這些現有技術的基礎上，開發人員的簡便性是Open Graph協議的主要目標，該協議已為許多技術設計決策提供了依據。

簡單來說，如果你今天如果貼一個連結在某個平台上，這個網站連結會顯示縮圖、顯示標題，那麼這就跟 og 有關，例如在這些社群中分享你的連結：Line、Whatsapp、Facebook、Instagram 、Medium及其餘部落格平台等，都是 og 會發生作用的地方。

og 的基本元數據

在頁面的程式碼中添加以下標記，就可以在分享連結時呈現標題、描述及圖片。而這些設定在我們為你的WordPress頁面新增 meta title（頁面標題）、meta description（內容摘要）、社群分享圖片（精選圖片）及網址代稱時，就會一併帶入了！

og:title -分享網頁時的標題，通常會跟網站內建的 meta title 一致。對象的標題，例如“ The Rock”。
og:description：分享網頁時的描述，通常會跟網站內建的 meta descritpition 一致。
og:type-對象的類型，例如“ video.movie”。根據你指定的類型，可能還需要其他屬性。
og:image -分享網頁時的圖片，部落格平台通常會以設定的「精選圖片」當作分享的 og: image，也是會大幅影響點閱率的重要因素。
og:url -將在分享中用作其永久的URL，例如“ https://www.imdb.com/title/tt0117500/”。

例如，以下是The Rock on IMDB的Open Graph協議標記：

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

利用工具檢查在社群分享網站連結的呈現

目前網路上已經開發了許多解析器和發布工具，可以讓你檢查你的網址在分享時會呈現什麼樣子。

Facebook分享偵錯工具-Facebook的官方解析器

許多人剛新增完頁面內容、又或是剛調整內容，此時發現貼到Line、Facebook等通訊軟體、社群平台上沒有正確顯示你的 og 設定。

請你別慌張，這很有可能是社群媒體的爬蟲還沒抓到網站更新版的 og 緣故。

可以利用小工具，看看是否有成功修改你的分享內容。

貼上欲分享的連結網址，就可以看到你的相關og設定。

自己不會操作設定？不用擔心，瑞布架站時，在基礎SEO會一併幫你處理好這個部分唷！

資料來源：https://ogp.me/

免費字型Taiwan Icon Font 雙設計師打造台灣專屬圖示