Leeboy's Study Log

前端學習。心得筆記

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

Ubuntu 15.10 Apache環境設定

內容摘要:
- LAMP server

LAMP

Wikipedia®中對於LAMP的解釋如下:

LAMP是一組Linux系統上架設動態網站開源服務, 「L」表示「Linux」,「A」表示「Apache」伺服器,「M」通常指MySQL關聯資料庫,「P」表示「PHP」語言。

(from Wikipedia®)

搭配PHPMyAdmin會讓MySQL管理更加容易, 不論在開發動態網站, 或是使用CMS像 Joomla, Wordpress等, 都是很好的環境。

安裝

以下是詳細的安裝過程: (以Ubuntu 15.10, 並取得root權限)

MariaDB

資料庫部份我選擇安裝 MariaDB, MariaDB 是原 MySQL 的開源分支, 可完全相容 MySQL 並提升執行效能,

apt-get update
apt-get -y install mariadb-server mariadb-client

//設定密碼

mysql_secure_installation

//出現以下畫面

Enter current password for root (enter for none): <--  enter
Set root password? [Y/n] <-- y
New password: <-- 輸入新的密碼
Re-enter new password: <-- 確認密碼
Remove anonymous users? [Y/n] <-- y
Disallow root login remotely? [Y/n] <-- y
Reload privilege tables now? [Y/n] <-- y

//測試登入 (mysql 語法)

mysql -u root -p

如果要離開MariaDB輸入 "quit" 。

Apache 2

預設會安裝在 /etc/apache2 , 檔案放在 /var/www/html

apt-get -y install apache2

瀏覽器輸入http://localhost/ , 看到Apache2 default page 就代表成功了。

補充

修改設定檔, 重新載入設定檔

sudo vi /etc/apache2/apache2.conf
sudo /etc/init.d/apache2 reload

啟動 apache2 (預設是一直開啟的)

sudo systemctl start apache2

停止 apache2

sudo systemctl stop apache2

重啟 apache2

sudo systemctl restart apache2

PHP

安裝 PHP5 以及 Apache PHP的模組

apt-get -y install php5 libapache2-mod-php5

//重啟 apache2

systemctl restart apache2
測試PHP

新增一個頁面放在apache的目錄 /var/www/html, 然後在瀏覽器檢視, 這個頁面可以檢視許多PHP的安裝細節, 如版本資訊等等

nano /var/www/html/info.php
<?php phpinfo(); ?>

更改這個info.php的權限成 apache2的默認賬戶www-data user 和 group。

chown www-data:www-data /var/www/html/info.php

開啟瀏覽器會顯示畫面如下:


如圖所示, PHP5 運作中, 在 Server API 這一行顯示 PHP 經由 Apache 2.0 Handler 處理。 繼續往下可以看到目前啟用中的模組, 舉例來說, 如果curl模組沒有顯示, 表示目前沒有啟用, 安裝方法如下:

//搜尋package列表中有沒有curl, 並篩選出含php的package

sudo apt-cache search curl | grep php

//結果如下

php5-curl - CURL module for php5
php-http-request2 - Provides an easy way to perform HTTP requests
php-picofeed - Modern library to handle RSS/Atom feeds

//安裝php5-curl

sudo apt-get install php5-curl

//重啟 apache2

sudo systemctl restart apache2

MySQL / MariaDB 也沒有在列表中, 表示 PHP 還沒support, 同樣地只要搜尋並安裝所需套件即可。

PHPMyAdmin

提供一個互動介面管理資料庫,

apt-get -y install phpmyadmin
接著會出現幾個互動介面, 做一些初始化的設定: (用空白鍵選擇*)
Web server to configure automatically: *選擇 apache2*
Configure database for phpmyadmin with dbconfig-common? *是否要設定dbconfig-common, 選 Yes*
Password of the database's administrative user: *輸入剛剛裝 MariaDB 的密碼*
MySQL application password for phpmyadmin: *設定預設帳號phpmyadmin密碼, 並確認密碼*

在瀏覽器輸入http://localhost/phpmyadmin/ ,看到登入畫面表示成功了。

參考資料

1.Ubuntu 15.10 LAMP server tutorial with Apache 2.4, PHP 5 and MariaDB (instead of MySQL)
2.安裝 LAMP Server + phpMyAdmin 在 Linux 系統上輕鬆架設網站
3.LAMP (software bundle)

使用API的基本概念

內容摘要:
- API
- MVC
- 前端 & 後端 render

API

(英語:Application Programming Interface,簡稱:API), 可以視為應用程式之間溝通的窗口, 藉由這個窗口(取得/提供)對方的服務, API就像一台販賣機, 使用API的人不用知道販賣機底層如何運作 (黑箱的概念), 只要取用所需要的服務即可。
換句話說, API沒有提供的服務, 使用者因為不知道黑箱裏面的運作, 就不能取用。

(www.intel.com)

一個標準API基本上有3個要素構成
1. URLs (API的位置)
2. methods (通常是指HTML request 方法, POST, GET)
3. form-data (API要求的資料輸入)
當使用者提供API所需要的資訊時, 就能得到所需要的服務或資料。

MVC

(英語:Model View Controller), MVC是一種軟體工程的開發概念, 將系統分成3個部份:
1. Model, 與資料庫相關, 考慮資料如何存取
2. View, HTML, CSS, template
3. Controller, 處理使用者的請求, 取得資料, 回應給使用者

(MVC以網站開發角度)

情境模擬: 當使用者輸入網址, 向後端 (黑色框框部份) 傳送一個請求, 舉例來說: 向Yahoo請求一個'國內新聞'頁面。
當Controll收到這個請求時, 會進行分析, 接著跟Model取得資料、 跟View取得template, 將兩者結合成一個完整的網頁 (這也是所謂的後端Render), 最後把使用者引導 (路由) 到這個完整的網頁。

API 的功能

API提供了一個窗口, 開放給使用者取用存在資料庫的資料, 假設今天Yahoo開放了一個API讓取得新聞的原始資料 (可能是純文字或是JSON格式), 前端便可以寫一個template, 把從Yahoo取回來的資料作Render, 結合成一個完整的網頁。 可能的作法如下:

AJAX 向後端API送出http請求

AJAX 可以在不更新網頁的前提下,向伺服器傳送http request 取回資料,以達到動態更新頁面的目的。

$.ajax({
    url: 'a_cross_domain_url', //request 要送的地方,通常是後端開的API

    method: "POST", //http request方法

    data: data, //可以是Object or String or Array

    dataType: "json", //預期送回來的資料格式

    success: function(result) {
        callback(false, result); //請求成功後的動作

    },
    error: function(result) {
        callback(true, result); //錯誤處理

    },
});

以本例來說,回傳後,交由javascript做JSON.parse 即可做後續的取值,render的動作。

為何用AJAX

看到上例也許有一個疑問,為何不直接輸入url來取得資料就好,為何要包一個AJAX方法?
- 直接輸入url的話,預設的只有GET動作,不一定符合API的要求,
- 輸入API的URL 回傳的只是資料本身,並不是資料+template的完整網頁。

參考資料

1.jQuery.ajax()
2.AJAX
3.Model-View-Controller (MVC) with JavaScript
4.API