【ストーク】OGP・fabiconの設定

SANGO(PORIPU)からストークに戻ってきて2週間。
やはりOPENCAGEのブログはなぜか安心します◎

あーSANGOが至れりつくせりだったから重複しないようにAll in One SEO Packを削除してて今は何も入ってなかった(笑)

SEO SIMPLE PACK

超シンプルかつ、管理画面が全て日本語表記のプラグイン、「SEO SIMPLE PACK

WordPressでSEO用のmetaタグなどを適切に設定するために「All in one seo pack」のようなプラグインを使っているけれど、設定項目が多すぎたりバグがあって使いにくいし、Yoast SEOとか良さそうだけど英語が多くてちょっと… という人にオススメのプラグインです。

今回はこのシンプルなSEO対策プラグインを入れてOGP設定をしたいと思います。

faviconについてはストークのカスタマイズから設定できるのでそちらで。

fabicon用画像 作るのは1つだけ

こちらの記事を参考にして設定したら簡単でした!

ホームページを見ていると、タブにアイコン画像が表示されていますよね。今回は、このアイコン画像の作り方と設定方法を2018年版として最新情報をまとめました。

ストークでの設定

カスタマイズ>サイトロゴ・アイコンを開くと、3ヶ所登録するところがありますが、自分で作るのは700*700の1つでOK。

今回は↓の画像を使いました。

  1. サイズ「700px*700px」でpng画像を作成する
  2. favicon generatorに作ったpngを入れて一括生成を押す
  3. 「favicon.zip」をダウンロードして解凍
  4. 「favicon.ico」「apple-touch-icon-180×180.png」だけをコピーしてどこかに保存
  5. ストークのカスタマイズ>サイトロゴ・アイコンから登録
縮小されて16*16になるので、ある程度小さくなってもはっきり見えるデザインにしておく!

ロゴのSVG化について

カスタマイザーではpngと書いてありますが、svgも使えます。スマホだとsvgのほうがキレイに見えるし。

ただ、WordPressでSVGがメディアアップロードできないので、「Safe SVG」というプラグインを入れて対応します。

このWordPressブログでSVG画像をアップロードしようと思ったら「セキュリティの理由によりこのファイル形式は許可されていません」とエラーが出てくるようになってしまいました。このブログでは「SVG Support 」

OGP設定

基本設定(画像の設定)

SEO SIMPLE PACK」のOGP設定画面からまず、og:imageの設定をします。

画像サイズは1200*630で作成します。

ここで設定する画像は、アイキャッチ画像のないページで使われます。

今回はロゴをつかったこんな画像を用意してみました。

Twitter設定

カードタイプはこちらのサイトで見た目を紹介しているので、好みでsummaryかlargeかを選びます(笑)

他にもTwitterカードについて説明しているわかりやすいサイトをブックマーク整理のためにここに貼っておきます。

「Twitterカードとは何か」から「メリット」「使い方」「表示されない時の対処法」まで徹底解説します。設置方法はブログサービス別にまとめました。
Twitterへようこそ。ログインして通知をチェックしたり、会話に参加したり、フォローしているユーザーの最近のツイートを見てみましょう。

Facebook設定

個人ブログのように一人が管理するものならば、fb:app_idではなくfb:adminsがあれば十分です。

1. Facebookで、自分の個人 アカウント ページを開く
2.自分のプロフィール写真をクリック
3.拡大写真が表示された ページの URLの最後の方を確認
4.「.123456789012345&type=1&」の「&type」の前15桁の数字をメモ

WEB担当者の皆様、運営しているホームページにOGP設定をおこなっていますか?OGPはSNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

おわりに

SEO SIMPLE PACKがとてもすっきりした見た目でいい感じです。

日本語完全対応なのもいいですよね。

自分で書いた記事をSNSで共有することが多いことを考えると、今後はOGP設定は必須なのかもしれません。

誰かに共有してもらうももちろんですが、自分で書いたリンクを貼る時にちゃんと表示されるのが重要ですよね…