2011年11月11日 星期五

[Blog] 加入meta資訊：description, keywords（標籤資訊）

Blogger 似乎沒有內建產生 meta 的機制，
所以有時在一些網站發佈連結時，會抓到怪資訊（widgets的文字之類）。
為了解決這問題，所以手動修改了一小部份的範本。

首先在 Blogger 的管理後台中，找到「設計 - 修改 HTML」，
開啟「展開小裝置範本」。

一、
先「下載完整範本」進行備份，改爛的話就上傳備份檔來復原！

二、
首先加入優先權比較高的 meta 資訊！
在 <head> 以及 <b:skin><![CDATA[ 中間插入：(Code 1)
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Language' content='zh'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta name='description' content='YOUR DESCRIPTION'/>
  <meta name='keywords' content='YOUR KEYWORDS'/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta name='description' expr:content='data:blog.pageTitle'/>
    <meta name='keywords' expr:content='data:blog.pageTitle + &quot;, YOUR KEYWORDS &quot;'/>
  <b:else/>
    <meta name='description' content='YOUR DESCRIPTION'/>
    <meta name='keywords' content='YOUR KEYWORDS'/>
  </b:if>
</b:if>


三、
接著因為 Blogger 的 tag 似乎沒辦法從 head 中一次撈出來，
所以使用將就的方法：
在文章中判斷是否是文章頁面，在標籤那順便產生 meta 資訊！
找到 <span class='post-labels'> ，這段裡面會有類似以下的內容：
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>


在 span 中，在上面那一段的前面或後面加上以下內容：(Code 2)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  &lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;
</b:if>


以我的例子來說，會變成以下這樣：
<div class='post-footer-line post-footer-line-2'> <span class='post-labels'>
  <b:if cond='data:post.labels'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;
    </b:if>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span> </div>

這樣就會把 tag 的 keywords meta 產生在文章中了，
但並不是標準的作法（因為不在 head 中）。


或是也可以手動指定各個文章的敘述，
只要在 <head> 那段 Code 1 中刪除以下片段：
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta name='description' expr:content='data:blog.pageTitle'/>
    <meta name='keywords' expr:content='data:blog.pageTitle + &quot;, YOUR KEYWORDS &quot;'/>

替換成：
<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/POSTURL&quot;'>
  <meta name='description' content='YOUR DESCRIPTION'/>
  <meta name='keywords' content='YOUR KEYWORDS'/>
就可以了，但是每多一篇文章，就要去手動增加一次，似乎挺麻煩的。


最好的解決方式應該是 Blogger 能自己產生這部份的資訊。
或提供一些新的版面配置資料標記，像：摘要、關鍵字…等等。
這樣比較方便自己手動塞入 head 部份。
而摘要的產生方式也許可以擷取 <!--more--> 前面的內容。

歡迎分享更好的作法。
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)