サイト制作/CMS/外国語サイト他、インターネットのことなら何でも相談下さい。

Blogを書く人必見!FacebookやTwitterなどリンクする場合は、おまじないを入れると格段に見栄えがよくなります!

今や当たり前のFacebookやTwitterなどのSNS。

私も個人でよく使っていますが、誰かとつながるって楽しいですよね♪

ブログ記事をFacebookなどへURLを張りつけるとすぐにリンクを張ってくれますが、
ここで注意が必要なんです。

巷にあるブログサービスは、割と設定が最初からしてあって、ブログで書いた記事のURLを
Facebookに貼れば、リンク先の情報が出てくるのですが、設定されていない場合は、
これから書く内容を設置しておくと、

「せっかく記事を書いたけど、どうもリンク先が。。。。。」

とかいうことはなくなります!

WordPressでサイトを構築されている方も多いと思いますが、今回は、基本的な書き方のおさらいです。

FacebookとTwitterがやっぱり主流ですので、今回はこの2点に絞って書きます。

FireShot Capture - The Open Graph protocol - http___ogp.me_

最初にOGPってなんの事?

知らない方もいらっしゃると思いますので、先に説明しますと、OGPは(Open Graph Protocol)の略で、
SNS(FacebookやTwitter)などへ、ブログなどのリンクを貼り付けた際に、
「このページは、こんな内容が書かれていますよ〜」
と伝える為のもので、設定をしっかりしていると、リンクを貼っただけで、そのページの内容を
詳しく相手に伝える事ができるとっても便利なもので、SNSをやっている方でしたら、
設定していて損は全くありません!

というか、ブログをよく書く方は絶対設定していた方がいい物です。
WordPressをお使いの方は、簡単に設置ができるプラグインがたくさんあるので、
それをお使いになるか、そんなに難しい設定でもないので、下記のような設定を
やるといいですよ〜。

 

Facebookの場合

facebookの場合は、下記の設定内容が基本です。
こちらを、headの中に設置します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">//headをこのように変更します。

<meta property=”og:title” content=”記事のタイトル” />
<meta property=”og:type” content=”article” /> //ブログトップページはblog、個別記事ページはarticle
<meta property=”og:description” content=”記事の説明” />
<meta property=”og:url” content=”記事のURL” />
<meta property=”og:image” content=”画像のURL” />
<meta property=”og:site_name” content=”サイトのタイトル” />

ここで間違いではないのですが、よくサイトで見かける、ここで書いているhead記載の内容をhtmlへ記載する方法はこちら。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

を下のように書きます。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">

ただしこれは、html5での記載ではない場合ですので、headに記載するのが妥当。

上記は、ご注意ください。

どちらかわからない場合は、htmlの記載内容でいいと思います。

両方書く必要はありません!

ここで、property=”og:type” なのですが、
トップページがwebsiteで下位ページがarticleが基本で、ブログのトップページは、blog
設定するページの種類によって実はもっとたくさんあります。
詳しくは、こちらをご参考ください。

Open Graph Reference Documentation

設定次第では、動画をOGPに設定したりもできます!
(これは今度特集しますね!)

設定によって、動画をいちいちSNSにアップしないでもタイムライン上で流す事もできます!

今回は、基本のおさらいなので、また次回にご説明します。

 

設定してみたけど、反映がされないんですが(怒)

FacebookのOGPを設定したんだけど、うまく設定が反映しない!って時は、
こちらから、すでにFacebookに読み込まれたOGPをリセットできます。
ページを一度でも、facebookへリンクした場合によく起きます。

うまく反映しない時は、一度試してみてください。

Debugger

https://developers.facebook.com/tools/debug/

赤枠の部分に、調整したいページのURLを入れて、Debugボタンを押して確認を行ってください。
現在の設定内容が表示されるので、内容が違う場合は、

Fetch new scrape information

を押して、新しい情報を取得します。

 

Twitterの場合

みんな大好きTwitterですが、
こちらもOGPの設定がされていると「Twitterカード」というとっても素敵なものを設定できます!

Twitterカードとは?
URLリンクが含まれたツイートを行うと、そのURL先のページのタイトル/サマリー文章/サムネイル画像などそのページの詳細情報を表示してくれるTwitterの機能のことで、ただリンクを貼るよりはるかに見栄えがよくなるものです!

詳しくはこちらも目を是非通してください。
Twitter Developers

カードの種類は、現在7種類です
それぞれ設定がちがうので、設定内容のリンクをご紹介しますので、ご参考ください。
Card Types

設置には、申請と承認が必要!

概要はわかったところで、ここからが若干わかりずらいので、順を追って説明します。

まず最初に、

Twitter Developers

のサイトへ行き、

Twitterカード   Twitter Developers

 

をクリックすると、設定するためのソースが表示されます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />//サイトのTwitterアカウントもしくは管理者のアカウント(任意)
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />//OGPですでに設定されているので、任意
<meta name="twitter:description" content="View the album on Flickr." />//OGPですでに設定されているので、任意
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />//OGPですでに設定されているので、任意

ですので、最低限必要なタグは、
一番上の、twitter:cardのみです!

最後は、Twitterへの申請・承認です。

Card validator

より申請を行います。

具体的な流れは、以下の通りです。

witter Developers

 

https://dev.twitter.com/ja/cards/overview
の一番最後あたりに記載してありますので、順次設定してみてください。

うまくいくと、以下のようになります。

Twitter Developers

一度設定してしまえば、あまり気にする必要がないものですが、

事前の準備が必要ですよ!

ブログなどの場合は、毎回設定しないでいいように、設定をちょっといじる必要があります。

その設定方法を今度書きたいと思います。

コメントを残す