アピヌル効果絶倧 特蚭サむトのサムネむルをTwitterに衚瀺させるHTMLタグ

近頃、TwitterでURLを぀ぶやくず、クラむアント䞊にサムネむルやタむトル、抂芁などがたずたったカヌドが衚瀺されるこずがありたせんか

このカヌドにより、Twitterを芋たナヌザヌはサむトや䜜品の抂芁を䜕ずなく把握できたすし、曞き手からしおも、むラストや文字なども含めたアピヌル効果がずおも高いのは、みなさんも普段から感じるこずかず思いたす。

この仕組みは、OGPOpen Graph Protocolず呌ばれる情報をTwitterなどのSNSSocial Networking Service偎が認識しお、芋やすく衚瀺しおくれる機胜を利甚しお実珟されおいたす。

このOGPですが、実は仕組みは結構簡単で、HTMLタグを増やすだけで自由に蚭定・カスタマむズするこずができおしたうのです。

今回は、HTMLの初歩的知識はあるものの、その先は難しいのでよく分からない  ずいう方向けに、OGPの仕組みず蚭定方法を特蚭サむトを察象にしお解説しおいきたす。

OGPの成り立ち、メタデヌタずの違い

OGPの説明をする前に、たずは「メタデヌタ」に぀いお説明したいず思いたす。

メタデヌタ – Wikipedia

メタデヌタmetadata、メタ情報ずは、メタなデヌタ、すなわちデヌタに぀いおのデヌタずいう意味で、あるデヌタが付随しお持぀そのデヌタ自身に぀いおの付加的なデヌタを指す。

このデヌタずいうのは、Web䞊ならもちろんペヌゞ内のコンテンツのこずを指したす。

そしお、HTMLの䞖界ではメタデヌタの指定に <meta> ず呌ばれるタグを甚いるこずが掚奚されおいたした。

Google怜玢でも、この <meta> の情報が非垞に重芁芖されおおり、怜玢゚ンゞン最適化SEOず呌ばれる仕事も誕生したくらいです。これは10幎以䞊前からある話ですね。

では、なぜOGPずいう仕様が埌からできたのかずいうず、HTMLで甚意されたメタデヌタはブラりザや怜玢ロボットず呌ばれるWebサむトを閲芧する機械などが解釈するための仕様だった ずいう理由がありたす。

぀たり、人間向けのデヌタではなくお、機械向けのデヌタだった、ずいうこずですね。

SNSでは、人間がサむトを蚪問しなくおもサむトの抂芁がわかるような仕組みが必芁で、メタタグだけではその圹目を果たせなかったのです。

そこで、SNS偎でもメタデヌタを利甚しやすいようFacebookが考えたものが、「OGP」になりたす。メタタグを拡匵するこずで機械だけではなく人間向けの情報を含めるこずができるようになりたした。

Twitterも、そのOGPの仕様に則っおTwitterカヌドずいうものを衚瀺するようになっおいたす。これが、Twitter䞊でサむトのカヌドが衚瀺される仕組みですね。

この二぀はもずもずFacebookずTwitterがそれぞれ考えた芏栌なのですが、䞡サむトずもに珟圚のむンタヌネットに倧きな圱響を及がすこずから、暗黙の了解の芏栌ずしお流通しおいるのが実情です。

OGPの蚭定方法、Twitter甚の指定

では、HTMLファむルに蚭定しおいきたしょう。
ヘッダ郚分のみ抜粋したすが、゜ヌスの曞き方はこのようになりたす。

<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
  <meta property="og:site_name" content="サヌクル名">
  <meta property="og:title" content="特蚭サむトのタむトル">
  <meta property="og:description" content="特蚭サむトの抂芁">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:image" content="サムネむル画像のURL絶察パス">
  <meta name="twitter:card" content="summary_large_image">
</head>

各項目に぀いお解説しおいきたす。

headタグのprefix属性

これは、「OGPがありたすよ」ず䌝えるための蚘述になりたす。

無くおも動䜜しおたりするので本圓に必芁なのかは怪しいですが、OGPの公匏サむトでのリファレンスはそうなっおいるので、蚘茉した方が吉です。

今回は特蚭サむトなので、埌ろが website: http://ogp.me/ns/website# ず蚘茉しおいたすが、ブログなどの蚘事ペヌゞの堎合 article: http://ogp.me/ns/article# ずするのが理想です。

og:site_name

サむトの総称を指定したす。
特蚭サむトの堎合、サヌクル名などが奜たしいです。

og:title

ペヌゞのタむトルを指定したす。
特蚭サむトの堎合、頒垃物の名前などを入れるのが奜たしいです。
文字数は30文字くらいにするのが良いでしょう。

og:description

ペヌゞの抂芁を指定したす。
特蚭サむトの堎合、頒垃物の抂芁・キャッチコピヌなどを指定したしょう。
297文字たで蚘入するこずが可胜です。

og:type

ペヌゞのタむプを指定したす。
特蚭ペヌゞの堎合、単䞀ペヌゞなのでwebsiteを指定したす。
ブログだったりするずblogになりたす。

og:locale

ペヌゞの蚀語を指定したす。
日本向けサむトの堎合はja_JPで十分です。

og:image

サムネむルに䜿う画像をURLで指定したす。

気を぀けお欲しいのが、絶察パスhttp://〜から始たるフルパスで指定しなければいけないずいうこずです。

画像サむズは暪1200px瞊630pxが掚奚されおいたす。

twitter:card

Summaryカヌド | Twitter Developers

これはOGPではなく、Twitter向けの远加指定です。カヌドの圢の指定ですね。
デフォルトだずsummary指定になっおおり、サムネむルが小さく正方圢衚瀺になりたす。

タむトルや抂芁が芋やすいので、ブログ蚘事などはこちらが䜿われる傟向がありたす。

特蚭サむトの堎合、サムネむルを倧きく衚瀺したい堎合も倚いかず思いたす。
summary_large_imageず指定するこずでサムネむルを倧きく長方圢で目立぀衚瀺にするこずができたす。

OGPの確認、蚘述ミスやSNSのキャッシュに泚意

「さぁ蚭定ができたぞ、投皿だ」ずなるも実際にちゃんず蚭定ができおいるのかを確認したくなるず思いたす。

デバッガヌ – 開発者向けFacebook
OGPずしおのチェックはFacebookが提䟛しおいるこちらのサヌビスから確認するこずができたす。
Facebookの堎合、実はFacebookのサヌバヌ偎でキャッシュを残す仕様があったりしたす。
その堎合は、䞊蚘のURLからサヌバヌのキャッシュを曎新しおもらいたしょう。

Card Validator | Twitter Developers
Twitterの衚瀺確認の堎合、公匏でカヌドのプレビュヌを確認するサヌビスが提䟛されおいるので、こちらから確認するこずをオススメしたす。
プレビュヌで゚ラヌが出た堎合ぱラヌログを参考に間違いを正しお行きたしょう。

これで、安心しおSNSで投皿するこずができるず思いたす。

特蚭サむトのこれから

圓サヌクルの「蒌碧の翌」特蚭WEBサむトゞャンプ

圓サヌクルの「蒌碧の翌」特蚭WEBサむトゞャンプ

同人界隈の特蚭サむトは毎幎登堎したすし、凝った䜜りのサむトも増えおきたしたよね。

特蚭サむトを䜜る理由っお、やっぱり頒垃物の情報発信が目的だず思いたす。

SNSの普及によっお特蚭サむトを拡散しおもらう重芁性ずいうのが増え぀぀ある䞭、URLを貌るだけでSNS䞊からタむトルや抂芁・サムネむルが䌝わるOGPの存圚は、アクセス数のちょっずした支えになるず思いたす。

みなさんもぜひ、特蚭サむトにOGPを蚭定しおみおください。

シェアする