新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

「livedoor Blog(ライブドアブログ)」で「Twitter Cards」対応がめちゃくちゃ簡単になっていた

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

先日、「Twitter Cards」に自ら中途半端に対応したばかりですが「livedoor Blog」さんがしっかりと対応してくれていました。
ということで、さっそくこちらのとおりにしっかりと対応させることにしました。

□ Twitter Cardsに対応しました|livedoor Blog 開発日誌 
□ Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応) – livedoor ブログ ヘルプセンター

  1. <$OGP$>という独自タグを全てのデザインテンプレートの<head>から</head>の間に記述します。
  2. <html>タグ内にxmlns:og=”http://ogp.me/ns#”と記述します。

スポンサーリンク
 

ということで2つの記述をテンプレートにしてあげればOKです。

  1. まず、 
    <$OGP$>

    をヘッダー部(<head>と</head>の間)のどこでもいいので書き足します。
    その際、以前書いた 

    <meta name=”twitter:card” content=”summary”>
    <meta name=”twitter:site” content=”@Norisa”>
    <meta name=”twitter:domain” content=”webdirector.livedoor.biz”>
    <meta name=”twitter:creator” content=”@Norisa”>
    <meta name=”twitter:title” content=”<$ArticleTitle ESCAPE$>”>
    <meta name=”twitter:description” content=”<$BlogDescription$>”>
    <meta name=”twitter:image” content=”http://webdirector.livedoor.biz/blog.jpg”>

    は削除しておきます。

  2. つぎに<html>の追加属性として半角スペースを開けて「xmlns:og=”http://ogp.me/ns#”」と記述します。
    livedoorBlogのTwitterCards対応
    書き加えた部分を赤いマーカー付けました。

以上です。

ということで、今までとどう違うかはこの記事を更新してからのお楽しみ。
ちなみに今までのはこんな感じでした。


【追記】本文と写真がきっちり記事特有のものになっています。こっちのほうがぜんぜんいいですねぇ。。

 - プログラミング, 覚え書き

アドセンス広告メイン

Comment

  1. 予知能力の達人 より:

    ツイッターカードの設定について調べていたところたどり着きました。わかりやすい説明でブログを見ていて勉強になります。しかし私の知識不足でツイッターカードの設定がなかなかうまくいきません。質問させて下さい。
    Summary with Large Imageの設定でブログで説明されているタグはいれました。ツイッターカードのSummary with Large Imageにあるサンプルコードをコピペして、わかる範囲でコードを書き換えて試して見ているのですが、エラー?が出てしまいます。

    INFO: Page fetched successfully
    INFO: 15 metatags were found
    INFO: twitter:card = summary tag found
    ERROR: Required meta tag missing (twitter:text:description)
    WARN: Not whitelisted

    改善する方法がわかりません。

    お忙しいとは思いますがよろしくお願いします。

Message

メールアドレスが公開されることはありません。

  関連記事

「iPhoneを探す」は回線契約を解約しても使える

1年以上前の記事です。内容が古い可能性があります。なくしたときは電源を切っていた …

no image
情報収集なら「ツイート検索」+「RSS登録」が最強!!

1年以上前の記事です。内容が古い可能性があります。百式管理人さんのもうひとつのブ …

油断してると刺されるゾ!11月の蚊(チカイエカ)に注意!

1年以上前の記事です。内容が古い可能性があります。まずはこちらのツイートを。 @ …

湘南海岸で「カツオノエボシ(鰹の烏帽子)」が大量発生。触ると最悪死亡します

1年以上前の記事です。内容が古い可能性があります。ツイッターで「カツオノエボシ( …

no image
「テレビが無い」より「親(家族)が払ってる」のほうがNHK受信料契約は解約しやすい

1年以上前の記事です。内容が古い可能性があります。こんな簡単なことだったら最初か …

iPhone(アイフォーン)で「Eメール(i)」の受信通知を非表示にする(表示させない)方法

1年以上前の記事です。内容が古い可能性があります。以前、書いたと思っていたのです …

Photoshopでスライスをまとめて削除する方法

1年以上前の記事です。内容が古い可能性があります。これ、生徒さんに聞かれてすぐ答 …

エイサーASPIRE ONEが起動しなくなった

1年以上前の記事です。内容が古い可能性があります。最近は、帰ってきて一段落してか …

コーヒーは百薬の長、でもたくさん飲まないとダメらしい

1年以上前の記事です。内容が古い可能性があります。百薬の長ってのはちょっと言いす …

カラーPDFをモノクロで出力する方法

1年以上前の記事です。内容が古い可能性があります。とんでも現場からこんにちは。 …