Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます ) 関連する記事 Seesaa ブログで Twitter カードを使用する方法 livedoor Blog のブログ設定(PC/カスタマイズ) Twitter カードの目的を考えるて、まず個別記事ページを設定します。livedoor Blog ではすでに OGP の設定が仕様として含まれている( <$OGP$> )ので、まずその下に以下のような Twitter 用のメタ要素を書き込みます。 ※
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@ユーザID" /> <meta name="twitter:image" content="デフォルトの画像の URL" />
※ summary_large_image は大きな画像の表示です デフォルトの画像は、記事別の画像を指定しない場合に表示される画像を URL で用意します。普通に Google の Picasa の画像が使えます。また、livedoor Blog では、この twitter:image の記述が無い場合は、『ブログアイコン』で指定した小さな画像が使われてしまいます。これは、Facebook 側(※1)で指定されているもので、Twitter カードはその指定の画像を利用することができます。 ※1: <meta property="og:image" content="プロフィールアイコン(管理画面で設定)" /> なので、世の中のサンプルでは、先に OGP の記述があって、その後に Twitter カードの指定になっています。 記事毎に画像を変えるには Twitter カードの メタ要素の指定は、ページのどこに書かれていても有効なようです。しかも、後から見つかった内容が最後に有効になっています。ですから、以下のような記述を記事の先頭に書くだけで有効になります。
<meta name="twitter:image" content="記事用画像のURL" />
それ以外にも、livedoor Blog には見出し画像という投稿項目があるのですが、これは og:image の内容を変えるものなので、この一連の設定ではヘッダ部分にすでに Twitter カード用のデフォルト画像を指定してしまっているので、変更しても Twitter カード側が優先されて、ライブドアの見出し画像は無効になります。 ライブドアの見出し画像を使いたい場合は、twitter:image を含むメタ要素を削除する必要があります。そしてその場合は、画像を事前に livedoor Blog にアップロードしておいて選択する必要があります。 トップページ用に注意する事 『ブログ基本設定』のブログの説明は、空では動作しません。また、デフォルトの画像は、記事毎のページのものと同じである必要はありません 関連する記事 livedoor Blog で、Facebook の『シェアボタンを表示する』 関連するライブドアのドキュメント Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)
|
【WEBサービスの最新記事】
- #ZOOM #アバター #ベータ版
- ロリポップの phpMyAdmin の SQL 入力部分のフォントを変更する( Google Chrome のデベロッパーツールを利用 )
- utf8 文字ツール の 文字参照リンクの作成方法
- Windows 用 curl で、Googls Photo API を呼び出して画像の baseUrl を取得する
- WordPress の リダイレクト用のコードを作成する PHP / パーマリンクが数字だけだったので、投稿名を追加してから
- 無料SSL(Let's Encrypt) : [さくらインターネット]SSLサーバ証明書発行のお知らせ
- イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox
- フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント
- フリーフォントでボタン素材作成
- というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました
- 電力自由化 : 関西向け東電プレミアムプラン シュミレーション
- Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得
- livedoor Blog で、Facebook の『シェアボタンを表示する』
- CKEditor CDN を使用して、簡単に HTML コンテンツ作成エディタを利用できます
- 画像を大きく見る為のウインドウを開くボタンの作成するサービス
- フリーフォントで簡単ロゴ作成の『横書きページで』文字の中央に鏡を置いたような結果を反映させられるようにしました。フリーフォントの種類によって、みんな違うものになります。
- bit.ly の短縮URLのドメイン部分に自分のサブドメイン(Branded Short Domain)を使用する
- Google のカスタム検索の結果と、通常の site: 検索の結果が同じにならないので、後者でしばらく様子を見る事に
- 自分の著作では無い写真を、Twitter 経由でブログに埋め込む時の一考。Google+ も使ってみると、元記事消えても画像は残るかもしれない・・・
- HTML整形ツール / 属性単位の改行機能付き