「エゴサーチをしても全然出てこない！どうして？！」
SEO対策、ちゃんとしてますか？
3回に渡ってお届けするN2PのSEO対策・SNS編です。OGPって？X（Twitter）カードはどうする？…
この投稿ではSNSでシェアされるためのSEO対策を紹介します。

基本編 | SNS編(この記事) | 実践編

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][toc]

SEOに必要な要素 – SNS編

基本編では、検索エンジンのロボットが読むポイントに絞った直接的なアプローチを紹介しました。
今回は、SNSを通じて、自分のWebサイトがシェアされやすくするためのアプローチをチェックします。

OGP

Open Graph Protocolの略で、FacebookやmixiといったSNSで表示される画像等のこと(赤枠部)。例えば、Facebookでは、投稿にURLを貼るだけで、自動的にサムネイル画像等が表示されます。

OGPは、head内に指定のmetaタグを記述することで導入することができます。OGPの公式ページで定義されている必須4項目を紹介します。

タイトル

タイトルを記述しましょう。
htmlで書くとこんな感じ。
[html] <meta property="og:title" content="タイトル">
[/html]

ページの種類

Webサイトの種類です。トップページであれば”website”、記事ページであれば”article”と記述するのが一般的です。
htmlで書くとこんな感じ。
[html] <meta property="og:type" content="article">
[/html]

画像

ぱっと見のインパクトを左右する、サムネイル画像です。
画像については、(1)1200×630より大きく、(2)縦横比が1.91:1に近いものをFacebookは推奨しています。また、画質が保たれるのでpng形式がオススメ。

The URL of the image for your object. It should be at least 600×315 pixels, but 1200×630 or larger is preferred (up to 5MB). Stay close to a 1.91:1 aspect ratio to avoid cropping. Game icons should be square and at least 600×600 pixels.
https://developers.facebook.com/docs/sharing/opengraph/object-properties

htmlで書くとこんな感じ。
[html] <meta property="og:image" content="画像のある場所">
[/html]

URL

URLを記述しましょう。
htmlで書くとこんな感じ。
[html] <meta property="og:url" content="http://example.com/"/>
[/html]

この他にも…

og:descriptionでページの説明を、og:audioやog:videoで、音声やビデオも表示することができてしまいます！
YouTubeはこのog:videoを上手く活用しています。
例えば、この動画だと…

https://www.youtube.com/watch?t=1&v=D8WMZUekK7M
[html] <meta property="og:type" content="video">
<meta property="og:video:url" content="https://www.youtube.com/embed/D8WMZUekK7M?start=1">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/D8WMZUekK7M?start=1">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
[/html] こんな感じで、動画のURLやサイズを指定しています。

X（Twitter）カード

OGPと似ていますが、こちらはX（Twitter）でURLがシェアされた際に表示するコンテンツを制御するものです。こちらも、OGPと同様に、head内に指定のmetaタグを記述することで導入することができます。

X（Twitter）カードの種類

Twiiterカードには、いくつかの種類（カードタイプ）があります。

• Summaryカード
• 大きな画像付きのSummaryカード
• Photoカード
• Galleryカード
• Appカード
• Playerカード
• Productカード

先ほどの画像の例では、「大きな画像付きのSummaryカード」が使われています。
導入に際して記述すべき情報は、カードタイプによって異なりますが、書き方はOGPによく似ていて簡単です。
詳しくは、X（Twitter）公式ドキュメントを参照！

実践編に続きます

基本編に続き、今回はSNS編をお送りしました。
次回は、実践編です。N2Pが実践しているSEO対策、公開しちゃいます！

N2PのSEO対策シリーズ目次

• N2PのSEO対策 – 基本編
• N2PのSEO対策 – SNS編(この記事)
• N2PのSEO対策 – 実践編

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

• 
• 
•