(OxxoStudio) 結構化資料 SEO 與 meta 標籤

隨著這個 blog 放到網路上開始,SEO 也變得重要起來,而在 SEO 裏頭,最重要的第一項重點就是 meta 標籤,這也是要告訴搜尋引擎和社群網站,你的 blog 或是網站主旨是什麼,作者是誰,分享的縮圖是什麼...等這些我們認為理所當然的資訊,畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧,現在還無法分辨你我網站內容的重點,因此我們必須靠這些 meta 或結構化資料 itemprop,來告訴它們。

本篇主要在介紹,如何正確設定分享文章到 google plus 以及 facebook 的標題、縮圖與內文概要,因為有了這些正確的設定,分享到社群網站就不會跳出莫名其妙的縮圖,同時在 google 的搜尋,也會呈現作者的大頭照與姓名,這些都是會吸引更多使用者瀏覽的好方法。

Html Checker

https://validator.w3.org/nu/

https://validator.w3.org/unicorn/?ucn_lang=zh-Hant

CSS 垂直置中的七個方法

  • 設定行高 ( line-height )
  • 添加偽元素
  • calc 動態計算
  • 使用表格或假裝表格
  • transform
  • 絕對定位
  • 使用 Flexbox

CSS z-index 層級概念與使用方法

CSS中的z-index屬性用於設置節點的堆疊順序.但同時,我們總是對堆疊順序捉摸不透,將z-index的值設得很大也未必能將節點顯示在最前面!今天Designrock分享一篇用一些例子對z-index的使用方法進行分析,並且為各位帶入z -index層級樹的概念

(OXXO) meta 標籤與資料結構化之SEO

SEO 最重要的第一項重點就是 meta 標籤,這也是要告訴搜尋引擎和社群網站,你的 blog 或是網站主旨是什麼,作者是誰,分享的縮圖是什麼...等這些我們認為理所當然的資訊,畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧,現在還無法分辨你我網站內容的重點,因此我們必須靠這些 meta 或結構化資料 itemprop,來告訴它們。

(簡單究好) 使用 Open Graph Tags、Schema、Twitter Card

當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時,這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容,因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊,是不是可以更符合網站的內容呢?如果希望可以控制分享的資訊該怎麼做呢?這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。