LINE 分享連結網站縮圖標題錯誤、無法顯示?PagePoker 可強制更新

LINE 分享連結網站縮圖標題錯誤、無法顯示?PagePoker 可強制更新

當使用者將網址複製、貼上 LINE 時會在對話視窗顯示網頁標題、描述和縮圖,這些資訊是從頁面的 Open Graph 標籤抓取而來,簡單來說,網頁開發者會透過 Open Graph 標籤指定網站標題、說明、固定網址、語言和圖片鏈結等資訊,讓搜尋引擎、社群網站或即時通訊軟體使用這段內容來呈現出預覽效果,因此完善 Open Graph 標籤資訊很重要,有助於讓網頁在各種平台顯示正確資訊。

Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化

Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化

對我來說,要讓網站在搜尋引擎取得好的排名表現,把程式碼寫正確是首要任務,因此我相當重視 Google 之前釋出的「搜尋引擎最佳化入門指南」說明文件,如果你對於開發網站有興趣,或是工作也會碰到相關內容,之前推薦過「HEAD 網頁開發參考手冊」很有用,它收錄 HTML5 在會出現的各種元件和使用範例,幫助開發者寫出更為完整全面的網頁標頭,對不想要翻找艱澀繁瑣說明文件的朋友 HEAD 也直接給出最基本的標頭範例。

Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊(Chrome 擴充功能)

Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊(Chrome 擴充功能)

通常在網站流量出現變化時網站管理者會去探究原因,如果你的訪客多為來自搜尋引擎的自然流量,有很大機會是搜尋引擎排名下降或類似問題,當然各家公司使用的演算法技術是商業機密,但通常都圍繞著一些大原則,像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書,當中有提到使用正確語法清楚表達網頁資訊。

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デートModel.fotophotoACBIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。

修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

本文參考資料 Missing WordPress Gravatar ALT tag value? How to fix, 原作者 App Shan。

如果有使用 WordPress 架站的話一定對 Gravatar 不陌生,Gravatar 算得上十年來最流行的大頭貼服務,只要在網站上以 Email 註冊一個帳號,上傳頭像與該信箱地址連結,在支援大頭貼功能的部落格留言後就會顯示你的頭像,而最多人使用的 WordPress 平台就支援 Gravatar(畢竟他們也是同一家公司 Automattic 旗下的項目)。即使現在比較多網站直接使用 Facebook 留言框取代內建的留言功能,依然會在作者介紹的欄位使用 Gravatar 大頭貼。

Metatags.io 線上預覽、編輯產生對應的 Meta 標籤

Metatags.io 線上預覽、編輯並產生對應的 Meta 標籤

無論搜尋引擎或常見的社群網站都會內建「鏈結預覽」功能,當使用者搜尋或貼上鏈結時會自動去抓取該網站相關資訊,例如標題、說明或縮圖等等,如果沒有進行任何設定那麼會選擇系統判斷最適合的部份,但透過設定網頁中的 Meta Tags 可以指定你要的內容,對於搜尋引擎最佳化(SEO)也有正面影響。之前曾介紹過「Mega Tags」(兩個名詞有點像)是一款 META 標籤產生器,能針對各種社群媒體建立適當的標籤原始碼。

Paper-co 免費下載紙張紋理材質背景,高畫質圖片可做商業用途

Paper-co 免費下載紙張紋理材質背景,高畫質圖片可做商業用途

網路上有各種素材資源可免費下載使用,如果花點時間搜尋通常能有收穫,當然在亞洲或美國網站找到的類型不太一樣,我個人比較喜歡日系素材,更為精緻細膩且符合我的需求,例如:Free line design 提供各種分隔線素材;Flat icon design 則有扁平化設計的圖示集免費下載,還有像是 Stockio 收錄各類型素材的整合式網站。

SuperTabs 強化瀏覽器分頁功能,快速切換頁面還可搜尋(Chrome 擴充功能)

SuperTabs 強化瀏覽器分頁功能,快速切換頁面還可搜尋(Chrome 擴充功能)

不得不說瀏覽器分頁功能(Tabs)確實是一個相當偉大的發明,記得早期沒有分頁時,每次都必須要開啟很多視窗,不但更耗費資源,而且在不同網站切換也很浪費時間。當然現今分頁都已算是瀏覽器的標準配備,除了能在單一視窗內同時開啟並快速轉換更多網頁外,分頁標籤也具備釘選、靜音或分類管理功能,而且還能透過外掛設定不同顏色。

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤
(Copyright: photovibes / 123RF Stock Photo

若你有接手編輯過他人網頁,或是複製其他頁面版型的經驗,應該會發現最困難的往往不是編輯網站,而是將現有的程式碼整理乾淨,讓它能夠格式化,呈現出一致的效果。尤其對於一些較為複雜的頁面,可能經過許多人無數次編輯後已經有些四不像,這時候就必須將不必要的部份代碼刪除,只留下最基本的部分,而這些過程大部分都是手動進行,不但很耗費時間心力,而且很可能因為修改錯誤而讓整個頁面跑掉。

Mega Tags 最完整社群媒體 META 標籤產生器,Facebook 社群經營必備

Mega Tags 最完整社群媒體 META 標籤產生器,Facebook 社群經營必備

如果你是經營網站、部落格的站長,一定知道搜尋引擎最佳化(SEO)對網站流量的重要性,這幾年隨著社群網路逐漸蓬勃發展,也開始出現所謂「社群媒體最佳化」(Social Media Optimization,簡稱 SMO)操作方法。既然 SEO 之於搜尋引擎,SMO 當然就是針對流量極高的社群網站。不過這兩者作法大相逕庭,但共同之處在於盡可能提供更明確、易讀的資訊,如果應用在社交網路,最簡單的作法就是完善網站必要的 META 標籤。