Redirect Bots with htaccess
由於目前 starter 都是靜態網頁，所以內容並無法使用 php 產生變動的 meta。像是單一行程 Title / Description / Cover Image 等等...
所以使用 htaccess 來轉導到另一頁 php 製作出 meta，以下簡單說明怎麼達成。
.htaccess 撰寫
先加上 RewriteCond 有點像在寫程式時的 if (condition) { ... } ，以下判斷式可以協助你解決 facebook, linkedin, twitter, pintrest, google, Slack
補充資料：
- slack: https://api.slack.com/robots
- Facebook: https://developers.facebook.com/docs/sharing/webmasters/crawler
- Google: https://support.google.com/webmasters/answer/1061943?hl=en
- medium:
Mozilla/5.0 (compatible; Embedly/0.2; +http://support.embed.ly/)
# redirect bots to meta file
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|LinkedInBot|Slackbot|Twitterbot|Pinterest|Google.*)
接下來寫符合規則的人，要做哪些轉導的動作，這邊要看你的網站架構自己摸索一下 :555:，只能從我修改的分享一些筆記：
- QSA 代表把前一個網址的 query string 原封不動帶給下一個網址。
- R=302 是叫瀏覽器網址要改變。
- L 代表是這個 condition 最後一行。
$1$2：這些是變數，來自於你前面括號的地方，編號的順序就是由左至右。- 左方是符合網址，右方是轉導網址，兩個都要以目前這隻 htaccess 放置的位置來寫路徑。
- 在測試的時候可以把 RewriteCond 先註解掉，測成功之後再加上去，就不用一直去 fb debug。
範例一
把 /tw/featureinfo?f=FILENAME -> /static/meta.php?language=tw&type=featureinfo&f=FILENAME
RewriteRule ^((tw|en)/)?featureinfo https://%{HTTP_HOST}/static/meta.php?language=$2&type=featureinfo [QSA,R=302,L]
範例二
把 /index.php?id=YOURID -> /PATH/TO/meta_ext.php?id=YOURID
RewriteRule ^index.php https://%{HTTP_HOST}/PATH/TO/meta_ext.php [QSA,L]
範例三
把多個 Type 網址： /tw/TYPE1/YOURID -> http://YOUR_DOMAIN/meta.php?language=$1&type=$2&id=$3
RewriteRule ^(tw|en)/(TYPE1|TYPE2|TYPE3)/id/([0-9]+)$ http://YOUR_DOMAIN/meta.php?language=$1&type=$2&id=$3 [L]
meta php 撰寫
基本上這支檔案要放在 BACKEND 用的環境下，請 BACKEND 撰寫(上面 htaccess 其實也是啦)。
這裡還是提供一個範例如下。撰寫時要非常注意一個重點， $theURL，一定要跟你剛剛轉過來的網址一模一樣。否則 BOTS 會以最後一個不一樣的為主要 og 網址，就會失敗。
像是你剛剛是從 /tw/featureinfo?f=FILENAME 來，你就要把 $theURL 填回去 /tw/featureinfo?f=FILENAME 一字不差。
<?php
$theTitle = '';
$theDesc = '';
$theURL = '';
$theImage = '';
/* YOUR SQL QUERY and REPLACE these keys */
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta property='og:type' content='metadata'>
<link rel='origin' href='<?= $theURL ?>'>
<title><?= $theTitle ?></title>
<meta name='description' content='<?= $theDesc ?>'>
<meta name='url' content='<?= $theURL ?>'>
<meta name='image' content='<?= $theImage ?>'>
<meta property='og:title' content='<?= $theTitle ?>'>
<meta property='og:description' content='<?= $theDesc ?>'>
<meta property='og:url' content='<?= $theURL ?>'>
<meta property='og:image' content='<?= $theImage ?>'>
</head>
<body></body>
</html>
將誤入 meta 頁面的使用者轉回真實網頁
# Redirect user run into meta page back to page
RewriteCond %{HTTP_USER_AGENT} !(facebookexternalhit/[0-9]|LinkedInBot|Slackbot|Twitterbot|Pinterest|Google.*)
RewriteCond %{QUERY_STRING} ^id=([^.]*)$
RewriteRule YOUR_DOMAIN/meta.php /article/%1? [R=302,L]
Debug Note
.htaccess 會被伺服器 cached 住 請愛用 curl 看 302 response 被導到哪去，response body 會顯示這個
<p>The document has moved <a href="https://staging.svy.do/s/api/newvisit.php">here</a>.</p>
確認這兩點就可以了
- 確認是不是有成功 302 抓到 rule
- 導到的頁面是否正確