Leeboy's Study Log

前端學習。心得筆記

Posts match “ meta ” tag:

SEO - <meta> 編輯與social media plugin

內容摘要:
- SEO 概念
- <meta>中繼說明(Meta Description)
- facebook Open Graph Protocol Meta
- 嵌入 Social plugin

開始做SEO吧!

當我們把一個網站放在網路上那一刻, 如何做好Search engine optimization (SEO, 搜尋引擎最佳化) 就是我們的重要工作,
做好SEO讓你的網站有效率地被搜尋引擎索引, 使搜尋結果排名向前提升使用者上站的機會, 最後達到提升轉換的目標。

確保做出來的網站對搜尋引擎友善

換句話說就是要讓搜尋引擎找的到網站, 參考下圖, 影響搜尋結果的變項很多,
1. Crawlability & Indexability
2. Relevancy
3. Web Architecture & Internal Linking
4. Additional Functionalities
The SEO Friendly CMS Checklist
參考來源: SEO Friendly

簡易說明如下
- 良好的網站layout、 檔案結構以便讓搜尋引擎順利抓取。
- 網頁與使用者所搜尋的關鍵詞相關且品質夠好, 且具實用性。
- 頁面的標題<title>與中繼說明<meta>描述應該明瞭
- 經營網站連結、 Socila Media、 程式碼優化...等。
盡可能的最佳化每一個項目, 就能達到搜尋引擎最佳化的目的。 本文將針對中繼資料(Meta Description)進行說明。

<meta>標籤

為了要提交正確的資料給搜索引擎, 在每一個頁面提供獨特的中繼說明是很好的作法, 對於搜尋引擎來說, <meta>能提供網站主旨,作者,縮圖等更多個人化的資訊, 良好的說明有時候會顯示在 Google 的搜尋結果中, Google 認為與網頁內容相比, 中繼說明提供給使用者的說明更為精準。 下面是一些常見的<meta>

<meta name="author" content="作者名稱" />

<meta name="keywords" content="" />
請注意Google 表示不使用Meta Keywords做為排名依據

Google doesn't use the "keywords" meta tag in our web search ranking.
Matt Cutts, Search Quality Team (2009)

<meta name="description" content="網頁的敘述" />
每頁獨特並且相關, 不要有錯誤的文法, 控制在155以下的字元, 中文大概75字。 以網友為導向寫網頁敘述 (Google在搜尋結果顯示中通常會使用)。

facebook Open Graph Protocol Meta

除了上述的<meta>資料, 還可以透過提供Open Graph給Facebook, 讓分享到Facebook的資訊跟網站有更緊密的結合。

 <meta property="og:url" content="<?php echo $ogUrl ?>" /> //網址

 <meta property="og:title" content="<?php echo $ogTitle ?>" /> //網頁標題

 <meta property="og:description" content="<?php echo $ogDescription ?>" />  //網頁描述

 <meta property="og:image" content="<?php echo $ogImage ?>" /> //縮圖

編輯完後, 分享到 facebook 時, 就會正確顯示, 如果有修改或更新, 記得到Open Graph Object Debugger進行重新快取, 完成後再次分享即可正確呈現。 同時, 利用Open Graph Object Debugger 也可進行預覽:

編輯og property

在大型的網站 (如電子商務) 而言, 在每頁用人工撰寫中繼說明幾乎是不可能的, 使用CMS編輯、 利用程式產生是比較適當的做法。 最近在做一個網站, 網頁上的內容都來自(後端)資料庫取出, 每頁都有嵌入Facebook的分享, 在每次新增頁面時, 補上中繼說明是不可能的, 一開始的作法, 是(前端)使用javascript動態寫入og property, 但javascript是在page load後才執行, Facebook scraper向server request網頁時, 不會運行javascript。 可行的作法是在後端render好, FB request時直接送出寫好og property 的頁面。

或者使用PHP模擬後端render,

// create a new cURL resource

$curl = curl_init();

// The URL to fetch. This can also be set when initializing a session with curl_init(). 

curl_setopt($curl, CURLOPT_URL, "url");

//TRUE to return the transfer as a string of the return value of curl_exec()

curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

// grab URL and pass it to the $output

$output = curl_exec($curl);

// close cURL resource, and free up system resources

curl_close($curl);

// Decodes a JSON string

$obj = json_decode($output, true);

//從$obj取出$ogUrl $ogTitle $ogDescription $ogImage 即可

<meta property="og:url" content="<?php echo $ogUrl ?>" />
<meta property="og:title" content="<?php echo $ogTitle ?>" />
<meta property="og:description" content="<?php echo $ogDescription ?>" />
<meta property="og:image" content="<?php echo $ogImage ?>" />

筆記 取出URL的方法
curl_setopt($url, CURLOPT_HEADER, 0); // TRUE to include the header in the output.

$ogUrl= "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; // GET current URL

參考來源: stackoverflow、朋友

嵌入 Social plugin

Facebook: 使用官方Share Button開發者工具頁面,


記得先載入Facebook SDK,

<div id="fb-root"></div> //這一段建議放在 <body> tag .
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

window.open語法

  <button data-facebook="">Facebook</button>
  <button data-line="">Line</button>
  <button data-twitter="">Tweet</button>
var title = document.title;
var url = document.URL;
var winTop = (screen.height / 2) - (視窗寬度 / 2);
var winLeft = (screen.width / 2) - (視窗高度 / 2);
var toLine = title + ' ' + url; //顯示在line的內容
$('[data-facebook]').on('click', function() {
    window.open('http://www.facebook.com/sharer.php?s=100&p[url]=' + url, '', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,resizable=yes,width=' + 視窗寬度 + ',height=' + 視窗高度);
});
$('[data-line]').on('click', function() {
    window.open('http://line.naver.jp/R/msg/text/?' + toLine + '', '');
});
$('[data-twitter]').on('click', function() {
    window.open('https://twitter.com/intent/tweet?url=' + url + '&text=' + title + '&hashtags=自訂hashtag內容', '', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + 視窗寬度 + ',height=' + 視窗高度);
});

參考資料

1.Google does not use the keywords meta tag in web ranking
2.How to Structure a Perfect SEO Optimized Page
3.台灣搜尋引擎優化與行銷研究院
4.Search Console說明
5.PHP curl_setopt