DOGGODが使えるよ ▶︎ HiÐΞ宣伝部

どうも、HiÐΞ宣伝部部長のアカネです(・ω・)ノ

OGPって、聞いたことありますか？

OGPとは？
「Open Graph Protocol」の略。
FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。
（引用元：いまさら聞けない！OGPとは？）

ブロガーさんとかライターさんとかは、聞き慣れてますよね。
ざっくり言うとOGPとは、TwitterとかにURLを貼ったときに表示される画像やテキストのことで、自分のコンテンツのOGPをいいかんじに整えることをOGP対応って言ったりします。

OGPの設定がちゃんとされていないと、せっかくシェアしても見栄えがしなくて拡散されにくくなりますので、けっこう重要な要素です。

HiÐΞの自分の記事のOGPを整えよう

HiÐΞ記事のOGPはどうなってるんでしょうか？
　↓
ほっといても、設定してくれてます！

投稿時にカバー画像を設定していれば、自動でそれをOGPにも設定してくれます。素晴らしいですね。
「概要」として表示されるテキストについても、記事本文の冒頭50文字を抜き出して設定してくれます。

こんなかんじ ↓ になります。

（サンプルに使った記事はこちら）

でも……

一般に、検索エンジンに見つけてもらいやすくするSEO対策において、OGPは重要な要素です。
OGPで設定する「概要」のテキストは、検索結果一覧にも表示されるため（だったはず）、そこからクリックしてもらえるかは「概要」にかかっていると言っても過言ではありません。

自ブログを運用するのに有名なツールWordPressでも、記事本文とは別にOGPの概要に掲載するテキストを設定可能なテンプレートが数多く存在しています。

（まぁ現状、HiÐΞで検索流入って重要じゃないと思いますが）

冒頭の切り抜きじゃ満足できない方もいるのでは？？

HiÐΞでOGP専用のテキストを書く方法

アイキャッチ素材提供：Chibiccoさん

どうするかと言うと、記事の冒頭にまずOGPに載せたいテキスト書いてそのブロックを丸ごと非表示にすることで、OGP設定には使用されるけど読者には見えないテキストを投稿できます。

実践したので、サッと流してご説明しますね(・ω・)ノ

上のように普通に入力すると、最初の50文字が「記事の説明」にあたる情報として採用され、HTML内の複数箇所に設定されます。
（文章はダミーテキスト生成ツールで作りました）

例えばこんな風に ↓

<meta name="description" content="あなたはほかいやしくもその教育方というもののところを踏みざるでし。無論今を経験家はいったいこの蹂躙ま"/>

本文の冒頭は使って欲しくない！！
そんな時は、下記のコードを冒頭に置き、中に50文字以上書いて余計なテキストを拾われないようにましょう。

<div style="display:none;">ここに書いてね！</div>

使うと、こうなります ↓

<meta name="description" content="額はかっこうの演奏顔たちが硝子に云わバケツならだ。すると少し愉快ないますにおいてかぶれたた。元気まし"/>

「display:none;」で消し去っているのでプレビュー等には表示されませんが、「概要」欄にはバッチリ採用されています。

OGPにこだわりたい時に、試してみてくださいね！

なんでしたらこの記事のURLをTwitterとかに貼ってみてください。
本文内に存在しないテキストが表示されるはずです👍

この記事を書いたきっかけ

HiÐΞ宣伝部は、自分の記事の最初と最後を広告枠として提供する活動をしています。
つまりOGPに使用される「記事の冒頭」を広告枠に奪われてしまうわけです。

一例として、部員のわっしょい❤️SENOさんの記事と、シェアした時にどうなるか、見てくださいよ！😭

Oh, なんと言うことでしょう……宣伝部に入ったばっかりにOGPが死んでしまうとは……申し訳なさ過ぎて部員のみんなに顔向け出来ねぇです_:(´ཀ`」 ∠):

OGPが気になる部員はぜひこの記事に書いた方法を使って、いいかんじの文言を設定してほしいです。
ほんとごめんなさい🙇‍♀️

閲覧ありがとうございました！

アカネのいろいろ

イラストのリクエストについて

しばらくお休みします！
skebなどの受付は開きっぱなしですのでよろしかったらリンク集からどうぞ！
JPYCや仮想通貨払いで何か依頼されたい方もしいらっしゃいましたらTwitterのDMでご連絡ください(・ω・)ノ