follow hagi.life

OGPとSNSシェアボタンを設置

2018.08.08

こんにちは、萩ドットライフ()です。

実装して数日経つんですが、問題なさそうなので記事にして報告。OGPを設定してSNSシェアボタンを設置しました。現状、アクセスが極めて少ないので、自分しか使ってないっぽいんですけどね。プラグインを使わずに設定する方法を選びました。

OGPとは

OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。
出典:OGPとは – Content Hub(コンテンツハブ) | ナイル株式会社(2018年8月8日現在)

ざっくり言えば、OGPとは、SNSでWebページをシェアするときに、アイキャッチ画像やタイトル、概要文などを表示を制御できる設定のことです。

こういうのって、シロートの僕が解説するよりも、ググり回ったほうが、良質な情報に巡り会えるし、わかりやすいと思います。
ただ、このブログははじめてwordpressを使う僕が、少しずつ知識を身に着けていく成長の記録なので、あとから読み直して「あのときは、こういう解釈をしていた」と思い出すためにも記事にして残しておきます。
偶然、この記事にたどり着かれた方は「自分も昔は、こんな感じの理解をしてたな」とか「自分と同じ初心者がいた。どんなページを参考にしたんだろう?」などなど、解説ページではなく、物語としてお読みいただければと思います。

プラグインを使わない方法を選びました

テーマをカスタマイズする段階で、wp_headを使わない構造にしてたんですよ。
meta情報を個別に設定に設定したかったので、
SEO対策に必要なmeta情報を個別に設定する方法~WordPressで自分のブログを作る – フリーランスのデザイナーが綴る在宅仕事の現場を参照しつつ、function.phpをカスタマイズしたのです。

なので、wp_headに情報を付加する(ようにできてるであろう)プラグインは、使えなくなってるので、function.phpをカスタマイズする方法を選びました。
いろいろ調べてると「プラグインって、あまり使わないほうが良さそうだな」「できるだけプラグインを使わない方法でカスタマイズしよう」って結論になってるんですよ。
今使ってるプラグインは、

  • Contact Form 7
  • Google XML Sitemaps
  • WP Multibyte Patch

の3つだけ。
とりあえず今は「シンプルなのがいいんだろうな」と信じてます。
あ、バックアップしてくれるプラグイン入れようと思ってるんだった…。

SEOの設定は、
【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
というページを参考にしました。このサルワカってサイト、調べ物をしてるとよくたどり着きます。
暇があるときに、じっくり読んで技術をパクろう。

プラグインを使わない方法を選びました

一旦設定して、数日後に変更した項目があります。
「meta name=”twitter:card」ってヤツなんですけどね。これ、twitterでシェアしたときに表示される画像のサイズを選択できるんです。アイキャッチ画像が表示されてるアレですね。
いろいろ読むと「summary_large_image(横サイズいっぱいの大きな画像)」がいいってことになってるっぽいんですよね。
でも、僕が使ってるアイキャッチ画像って、あまり本文と関係ない「なんとなくイメージ写真欲しいな」くらいの感じで使ってるものなので、控えめに小さい画像「summary」ってヤツに変えました。

facebookでの表示、まだ確認してないんですよね。
自分でシェアしてないし、他人からもシェアされてないし。一応、facebookページのアカウントは取ったんだけど、後回しにしてるからまだ公開してないんですよ。
この辺、また変更するときには報告します。

SNSシェアボタンもプラグインなし

ここまで、プラグインなしで進めてきたのですから、もちろんSNSシェアボタンもプラグインなしで設置しました。

  • twitter
  • facebook シェア
  • facebook いいね!
  • はてなブックマーク
  • LINE
  • feedly

の6つ。
それぞれ個別に「tweet+ボタン+設置」みたいなワードでググりながら探しました。
あとは、テーマにソースを書いて、CSSで成形するだけ。
htmlを書いて、CSSでレイアウトするのは、いつも仕事でやってることだから、全然苦にならないんですよ。むしろ「シンプルにシンプルに、クライアントも代理店もいないんだから」って思いながらやってます。

SNSボタン「タイトルと記事の間」「記事を読み終わったところ」の2箇所に設置してみました。
これらのボタンも、まだ自分でしか使ってません。
運用しながらトライアンドエラーを繰り返してみようと思っています。

生まれた街「萩」の小さなひとつに還ろう。