n2p blog

キャンペーンやSNSの
“ためになる”情報を
執筆しています。

N2PのSEO対策 – SNS編

「エゴサーチをしても全然出てこない!どうして?!」
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を貼るだけで、自動的にサムネイル画像等が表示されます。
n2p_seo_03
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タグを記述することで導入することができます。
n2p_seo_04

X(Twitter)カードの種類

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

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

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

実践編に続きます

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

N2PのSEO対策シリーズ目次

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