WEB制作OGP設定をしてないとTwitterやFacebookなどでシェアしてもらうときにしょぼいテキストしか表示されないので、ここをしっかり設定することがSNSからの流入を増やす必須項目です。#122SEOOGPTwitterTwitterCardSNSMetaOGPのタグを設定してSNSからの流入をふやそうOGPタグと呼ばれるタグがあります。protocolの略称でMETAタグの1つなんですが、SNSなどに掲載される情報を指定するタグです。OGPタグの実例このサイトで設定しているOGPタグの一覧です。前回UPしたカノニカルの記事のOGPタグになっています。content="canonical:カノニカルという設定をすることでサーチエンジンに正しいURLだと伝えることができます。URLは1つだと思っていても、実はいろいろなURLでアクセスできるんです。name="description"」はOGPじゃないんですが、関係あるので合わせて掲載しております。書いてありますが、簡単にまとめると、タイトル、ディスクリプション(記事の概要・説明)、アイキャッチ(サムネイル)画像の指定がされています。それがFacebookなどのSNS用の記述と、Twiiter用の記述の2種類が書かれています。カードの表示例ここで設定した内容がTwitter上にはこう表示されます。summary_large_imageFacebookでの表示例フェイスブックでシェアされるとこう表示されます。OGP表示例OGPタグの記述方法OGPタグの設定方法を上から1つづ見ていきましょう。/>OGPの種類を設定します。あるんですが、サイトのTOPページは「content="website"」を指定、ブログのトップにはcontent="blog"」、下層ページの場合は「content="article"」を設定します。間違ってもペナルティなどはないと思うので、出しわけが難しい場合は「content="article"」を指定しておけば、大丈夫です。/>「content="記事タイトル"」ここには表示させたいタイトルを入力します。30文字程度を目安に入力するのが良いかと思います。記事の概要を入力します。ここは文字数が少ないので、60~70文字前後を目安に書くとTwitter上では省略されずに表示されます。Facebookはもっと少ないので、私はあきらめております。30文字程度Twitterでシェアするときは、シェアしてくれる人が説明をしてくれるので、そんなに気にしなくても良いかもしれませんね。この文書読まれるかどうかも微妙ですし。/>ここにはリンクさせたいURLを記述します。絶対パスでhttpsから始まるURLを設定してください。/>こちらも絶対パスでOGPに設定するURLを記述します。画像の拡張子は「.png」が主流ですが、「.jpg」でも対応しています。PNG画像の方がキレイに表示できるというメリットがあります。Twitterカードの設定Twitterカードの設定があれば、URLをツイート内に記述するだけで、画像付きのリンクが表示されます。SNSを活用しているのであれば、絶対に設定しておきたい項目です。/>Twitterカードは種類があるんですが、一番目立つのが「summary_large_image」なので、画像が用意できる人は、これがオススメです。ツイッターカードの種類1.summary_large_image2.summary3.app4.playerこの4種類があります。前は7種類だったんですが、現状は4種類と。3のappはアプリ紹介の時に使うカードで、4のplayerは音源再生などに使えますが、審査が必要です。1番のsummary_large_imageか、2番のsummaryを使うのが一般的です。/>先に作った「property="og:image"」と同じ画像で基本的に問題ありません。最適なサイズが若干違うんですが、サイト側で調整してくれるので、基本的に同じで良いと。/>これを入れておくとTwitterカードの下部にサイト名が表示されます。/>Twitteカードに表示するタイトルとディスクリプションを設定します。文字切りされるので60~70文字前後が最適です。/>Twitterカードのリンク先URLをこちらも絶対パスで設定します。/>Twitterで使用しているアカウントのIDを設定して完了です!OGP画像に最適なサイズは?画像のURL設定はいいとして、設定する画像のサイズはいくつが最適か。これは最低限の大きさを確保したうえで、管理者のお好みでいいかなぁと思います。OGPのサイズって、仕様変更で変わるんですよね。最近のトレンドだと大きめのサイズが良いみたいです。ディスカバーあるじゃないですか、通称Google砲と呼ばれるアイツ。Discoverの推奨サイズが横幅最低1200pxで、800,000px以上の画像を用意しろと。ピクセル以上の画像)を複数指定してください。引用元:https://developers.google.com私の場合、こんなでかい画像、記事中に使う要素がないので、OGP画像をこれに合わせて最適化してます。810,000pxになって、この要件は満たせるので。TwitterやFaceBook用のOGP画像にあてるとちょっと大きいので、天地がちょっと詰まる画像になるのがデメリット。天地が切れても問題ないデザインで作るといいんですけどね、私の場合、OGP画像をブログのサムネイルにも使っているので、文字を大きくしたくてギリギリのサイズで作ってしまってます。細かいこたぁいいんだ、コンテンツが重要なんだよ!TwitterカードのOGP画像これがOGPの元画像です。本来のOGP画像ちょっとだけ天地がトリミングされているのがわかります。まとめ1200pxを最低限に設定した時の各メディアのOGP画像サイズです。630pxが最適かなぁと思います。Twitter画像に2px足りないですが、Twitter側でリサイズしてくれて、2pxの縮小だと気づかないくらいの違和感なので。Twitterカードを設定したらやること記事内に記述するOGPタグの設定はこれにて完了です。書いただけだとクロールされるまで時間がかかるので、Twitterカードのバリデータという、Twitterカードを認識させるページがあるのでそこに行って登録しましょう。card」ボタンを押します。それでTwitterカードが表示されたら準備完了です!ツイートにURLを張り付けてツイートすると、Twitterカードが表示されます。ツイートに複数のURLをはるとどうなるかツイートの中にURLを2つ以上登録しても、表示されるTwitterカードは1枚だけ。公式に解説があったので引用します。ツイート内の複数URL状況によっては、複数のURLのツイートが必要になる場合があります。ツイートに表示されるカードは1枚のみです。複数URLの処理における優先順位は次のとおりです。ツイートに添付された画像やメディアは、URLに添付されているすべてのカードよりも優先されます。カードを含むURLは、ツイート内での出現順に処理されます。引用元:https://developer.twitter.comTwitterカード設定されてても、画像を一緒にツイートすると、画像を優先するよってことですね。複数のURLの場合は、上から優先して表示すると。Amazonの書籍をTwitterカード付で紹介する方法TwitterでAmazonの書籍を紹介するときに、Twitterカードが表示されるパターンと、されないパターンがあって実験しました。Amazonの商品ページのURLって色々なパターンがあるんですけど、極力シンプルにして、電子書籍と紙の本が2つある場合、「紙」の書籍の方が出やすいみたいでした。(個人の調べなので間違ってる可能性はあります)電子書籍は出ないのかというと、そうでもなく、電子書籍しかない場合や、正規に売っていない場合は電子書籍でもTwitterカードが表示されました。AmazonのURLパターン最近購入した福満しげゆきさんの「妻に恋する66の方法」を例に説明してみたいと思います。この巻で打ち切りになってしまったそうです。(イブニングコミックス)】AmazonYahooショッピング楽天Amazonのリンク先URLの1例がこう。validatorを通してもエラー表示になります。Twitterカードが表示されません余計なパラメータを排除して登録URLの中にいらない情報があるので、それを削除してシンプルにすると、表示される場合があります。(100%ではない)https://www.amazon.co.jp/dp/4065184983/これでバリデータ通すとTwitterカードが表示されました。1回ボタンを押すだけだと、NGになることもありますが、何度かポチポチすると表示されることもあります。Twitterカードが表示されました。オススメ書籍をツイートするときに、本の写真が表示された方が興味をいだいてもらえそうですからね。写真付きで表示したいわけです。Twitterカードを表示させるURLの見極め方Amazonの商品の場合、ASINと呼ばれるアマゾン独自の商品コードがあるので、それは必須です。商品によっては「https://www.amazon.co.jp/gp/」のみにして、その後にASIN番号をくっつけると、表示させる確率があがるみたいです。OGPタグ設定のまとめOGPタグ設定はSNSが盛り上がってきてから、出てきたタグなので、昔からサイトを作っていると知らないタグだったりします。今はSNS全盛でシェアしてもらえる時には、少しでも目立った方がクリックしてもらいやすくなりますからね。シェアしてもらえるような記事なり、コンテンツなりを作るのが一番最初ですが、そこから先の流入を増やすチャンスを増やすのが、「OGPタグ」です。Descrptionの文章を考えるのがちと面倒ですが、自分の記事のリード文になりますから、気合を入れて作りましょう。鳥好きWEB制作とWEBマーケティングをやってきました。PHPとMysqlを使って面白いことをやりたいと模索中です。(イブニングコミックス)】AmazonYahooショッピング楽天OGP設定オススメ関連コンテンツSEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。基本だからこそ重要な要素SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値についてURLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定ですブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。キーワード選定の方法を考察してみたSEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。SEOで重要なtitleタグとhタグの使い方SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。カノニカル設定とリダイレクト設定URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定ですブログのアクセスアップに欠かせないSEO的リンク構造の考え方SEOのリンク構造を効果的に作るための情報をまとめました。可能な限り情報の出どころのリンクも用意しております。GTMを使ってイベント計測を簡単に行う方法グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説ブログアクセスランキングBluetoothイヤホンのペアリング方法とリダイヤル防止策Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。ネットワークオーディオを使わずにPCの音楽を再生する方法パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。α7IIIを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7IIIのレビューです。α7IIIで運動会に初参戦!ズームレンズ1本でも楽しめる!子供の運動会にα7IIIで初参戦!望遠レンズを買おうか迷ったのですが、本体とセットのズームレンズ1本で運動会を撮影してきました。鳥好きWEB制作とWEBマーケティングをやってきました。PHPとMysqlを使って面白いことをやりたいと模索中です。