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--> 前面的內容。

歡迎分享更好的作法。

沒有留言: