2016年12月06日  カテゴリー|小ワザカテゴリー|天草Webの駅カテゴリー|カスタマイズ

天草Webの駅の投稿をシェアされやすく、訪問されやすくする方法!【中・上級者向け/OGP画像設定】

こんにちは!12月ですね!もう今年もあと20日あまりとなりました!その前に子供のクリスマスプレゼントに頭を悩まされています…、エザキです!!

今回は少し前にあるところで「天草Webの駅の記事をFacebookなんかでシェアした時のあの見た目どうにかならんのかな…」という話になったので、それをカスタマイズで解決していきたいと思います。

具体的には、Facebook等でWebの駅の投稿がシェアされた時の見た目を↓の画像のようになるようにカスタマイズしていきたいと思います!

天草Webの駅OGPビフォー・アフター

その前にちょっと注意です!

今回もHTMLのコードをいじったりするのでちょっとパソコン中・上級者向けの内容となっております。
カスタマイズは自己責任で!また、カスタマイズ前には必ずバックアップを取っておきましょう!

「カスタマイズ前のバックアップ」というのが何の話かわからない方は、申し訳ないですが回れ右でよろしくお願いします(^_^;)

ちょっと補足



本来であれば記事毎に専用のアイキャッチを用意したり、記事の先頭に掲載した画像をOGP画像として設定したいところですが、それではあまりにも複雑なカスタマイズになりますし、天草Webの駅の推奨しない利用法になりかねません。
またサーバーの負荷になる可能性大なので、今回はオリジナルの共通画像を1枚作ってそれを使いまわす方法をとりたいと思います。

カスタマイズの前にちょっと準備



表示させたいOGP画像を用意する。
その画像を天草Webの駅にアップロードしてURLをメモっておく。

OGP画像のサイズ、レイアウトについて


ちょっと余談ですがOGP画像のサイズは、ちょっと大きいと思われるかもしれませんが幅1200px、高さ630pxくらいがいいんじゃないかなと経験上思ってます。
無ければ用意する画像は自由なのですが、サイズがあまり小さいと、上のアフターのように大きな見た目にならない場合があります。

また、Facebookだけでなく、Twitterやその他のSNS、特にサムネイル画像を正方形にトリミングして表示するようなメディアでシェアされた時のことを考えると、重要な情報や必ず表示させたい内容を真ん中の幅630px、高さも630pxの範囲にレイアウトしておくのが無難だと思います。

ということで今回は↓の画像を天草IT部の天草Webの駅に設定するOGP画像として用意しました。

天草IT部OGP画像

この画像を天草Webの駅に画像素材としてアップロードし、そのURLをメモったところからのスタートとなります。
それではいってみましょう!


カスタマイズする場所



①まずは天草Webの駅にログインして、サービスメニューの中の「ホームページを変更する」をクリックします。

②次に「2.レイアウト設定」をクリックすると、ホームページのレイアウトがカスタマイズできる別ウィンドウが開きます。

③開いたウィンドウの右上に「▼その他の操作」という項目があるのでクリックし、「▶スタイルシート・HTML編集」をクリックすると「スタイルシート・HTML編集」が開きます。

④ここで「HTMLの編集」という部分をいじりますので、HTMLをメモ帳か何かに全文コピペしてバックアップしときましょう!

⑤もしあなたがここを全くカスタマイズしていない状態なら、このHTMLの中の3行目くらいに…
<head><title><ict:PageTitle ID="PageTitle" runat="server" /></title>
<ict:CssLink runat="server" />
<ict:MetaKeywords runat="server" />
<ict:MetaDescription runat="server" />
</head>

↑というような記述があると思います。
この中の…
<head>

↑の直後に↓を挿入します。ここに挿入する理由は後ほど解説します。
<meta property="og:image" content="画像URL" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

↑の中の「画像URL」の部分を、予め用意してメモしておいたOGP画像のURLに置き換えてください。

通常は1行目だけでいいんですが、今回2行目と3行目では、OGP画像として認識されやすいように一応画像のサイズを指定しておきます。用意したOGP画像のサイズが幅1200px、高さ630pxでないなら変更をお願いします。

コードをこの場所に挿入する理由


はじめに言っちゃいます。「ここしか選択肢が無い」、「ここにしか入れられません!」www

はい。(オイオイw)

ほんとなんですよwここしかコードを挿入する場所がありません!ww
ここからは詳しく知りたい方だけ読んでもらえればいいので、その他の方は読み飛ばしちゃって下さいw

headの中身を見てみましょう。


まずは先程も登場した↓のコード。
<head><title><ict:PageTitle ID="PageTitle" runat="server" /></title>
<ict:CssLink runat="server" />
<ict:MetaKeywords runat="server" />
<ict:MetaDescription runat="server" />
</head>


このどこにOGP画像のコードを挿入するかなんですが、先に言い放った通り<head>と<title>の間の一箇所しか選択肢がありませんw

それには重要なポイントが2点あります。

天草Webの駅の仕様として</title>タグの直後にRSSのコードとデフォルトのOGP画像http://amakusa-web.jp/common/images/og_image.pngが自動でセットされる事
Facebook等の仕様で、HTML内にOGP画像が2枚以上指定されていた場合、優先されるOGP画像は前方優先である事

つまり、天草Webの駅が自動でセットするOGP画像よりも前(<title>〜</title>より前)に、オリジナルのOGP画像をセットする必要がある。ということになります。
ちなみに<title>のすぐ直前はもう<head>タグですw

もうこれ以上説明する必要は無いと思いますww
これでめでたくFacebook等でシェアされた場合に、大きなオリジナル画像を表示させる事ができるように…
ならない人がいると思いますw

OGP情報は、Webサイト側で変更してもすぐにはFacebookなどには反映されません
すぐに反映させるには「Open Graphオブジェクトデバッガー」にかける必要がありますので最後にその説明して終わりたいと思います。

Open Graphオブジェクトデバッガー


知っている人は知っている!知らない人はたぶん一生知らないまま!の「Open Graphオブジェクトデバッガー」ですw

こちらです↓
Open Graphオブジェクトデバッガー
https://developers.facebook.com/tools/debug/og/object
※Facebookにログインしていないと使えません!

このツールを使ってボックスの中にOGP情報を変更したサイトのURLを入力して、「新しいスクレイピング情報を取得」をクリックするだけです。
これでOGP情報が更新されます。

試しにFacebookで天草IT部の天草Webの駅内に今回のために作ったフリーページをFacebookでシェアしてみるとこんな感じになります。
天草IT部新OGP画像

参考:天草IT部特設フリーページ - 天草Webの駅
http://itbu.amakusa-web.jp/MyHp/Pub/Free.aspx?CNo=2

もう一度ビフォー・アフター貼っときますか。
天草Webの駅OGPビフォー・アフター

どうでしょう?画像が大きく表示されて目立つようになり、しかもサイトが何のサイトかひと目でわかるようになったと思います!
おつかれさまでした!!

さいごに



SNSで目立つには画像の大きさが大事です!!
また、その画像でどんな記事なのか、誰が書いた記事なのかがわからないとサイトへ訪問どころか、興味も持ってもらえない可能性もあります!

今回は、デフォルトのままではSNSでシェアされた時に小さい表示になってしまううえに、誰の何の記事かわからないという問題を解決すべく天草Webの駅をカスタマイズしてみました!
何度も書いてますが、中・上級者向けのカスタマイズとなりますのでくれぐれも自己責任で、バックアップも忘れずに!!
もしお役に立てたらうれしいです!!

また、今回この記事のために天草Webの駅に天草IT部のサイトを開設しましたが、そちらは今のところ更新予定はありませんw
何か必要性に迫られれば活用したいとは思っていますww


天草IT部について


いかがだったでしょうか?天草のIT、あなたのITに少しでもお役に立てたなら嬉しいです。

少しでもITにご興味有りましたら、あなたも「天草IT部」へ!!
Facebookグループへの参加申請、お待ちしております!!!

Facebookグループ「天草IT部」

▼Facebookページもありますので、是非「いいね!」お願いします^^
天草IT部Facebookページ




同じカテゴリー(小ワザ)の記事

この記事へのコメント
う~~ん、自分なら使わせてもらっている身として
運営されている人の感情を考えると、ライバル的な他サイトへの
導入を促すような内容は、いかがなものかと思いますが・・・

原田鈑金塗装原田鈑金塗装 2016年12月06日 23:47
原田鈑金塗装様、コメントありがとうございます^^
確かにライバルサイトへの誘導は一考する余地がありますね。

天草IT部の中の人天草IT部の中の人 2016年12月07日 18:20
上の画像に書かれている文字を入力して下さい
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。