記事はSNSでどう見えている？｜共有時の見た目を整える

「記事のリンクを貼っても、画像が出ずに味気ない見た目のままになる」「他社の投稿は綺麗に表示されるのに、何が違うのか分からない」——記事を共有して広める場面で気づく差です。共有したときの見た目は、受け取った側の画面が勝手に選んでいるものではありません。ページの裏側に書かれた指定を、そのまま読み取って表示しています。この記事では、その指定の中身と、整えるための手順を整理します。

共有したときの見た目は指定できる

記事のURLをSNSやメッセージの道具に貼ると、多くの場合は自動で見た目が生成されます。画像、タイトル、短い説明文が組み合わさった形です。

この見た目は、貼った側が作っているのではありません。ページの側が指定している情報を、貼られた側が読み取って表示しています。

指定がなければ、それぞれの媒体が独自の判断で情報を拾います。

本文の最初の画像が使われたり、まったく画像が出なかったりします。タイトルも、意図しない部分が抜き出されることがあります。

つまり、何も指定していない状態は「運任せ」ということです。

指定する項目は多くありません。タイトル、説明文、画像、URL、種別の5つが基本です。

これらをページの裏側に書いておけば、どの媒体でも意図した形で表示されます。

記事を管理する仕組みを使っているなら、拡張機能で自動的に出力できることが多くあります。

まず、自社のサイトで出力されているかを確認するところから始めます。

確認の方法は、後の章で説明します。

なお、この指定は検索での順位には直接影響しません。あくまで共有されたときの見え方だけを決めるものです。

それでも、共有されて読まれる回数が増えれば、結果として評価に繋がることはあります。

なぜ見た目で差が付くのか

SNSのタイムラインには、大量の投稿が流れています。その中で目に留まるかどうかは、視覚的な要素に大きく左右されます。

文字だけのリンクは、画像付きの投稿に比べて明らかに目立ちません。

同じ内容でも、画像があるだけでクリックされる数が変わります。

さらに、画像とタイトルの組み合わせで内容を判断されます。ここが記事の中身と合っていないと、開いてもすぐ閉じられます。

記事を書く手間に比べれば、この設定にかかる時間はごくわずかです。

にもかかわらず、放置されていることが多い部分でもあります。

指定する5つの項目

裏側に書く項目を、1つずつ見ていきます。それぞれ役割が違います。

項目	役割	書き方の目安
タイトル	共有時に大きく表示される見出し	記事のタイトルと同じでよい。40字以内
説明文	タイトルの下に出る短い文	80字から100字。冒頭で内容が分かるように
画像	最も目を引く要素	横長で横1200かつ縦630前後。絶対のURLで指定
URL	その記事の正式なURL	転送前ではなく、最終的なURLを書く
種別	記事なのかサイトなのかの区別	記事のページなら記事を示す値にする

このうち最も重要なのが画像です。表示の面積が最も大きく、目に入る順番も最初になります。

画像だけでも指定しておけば、見た目の大半は整います。

説明文は、検索結果に出る説明文と同じものを使う会社が多くあります。それで問題ありません。

ただし、共有されたときは検索結果より短く切られることがあります。冒頭で内容が分かる書き方にしておきます。

タイトルも同様に、長いと途中で切れます。40字を超えると省略される場合があります。

記事のタイトルと分けるか

共有時のタイトルは、記事のタイトルと別に指定できます。

同じにしておくのが基本ですが、あえて変える場面もあります。

記事のタイトルが長すぎて切れる場合は、短い版を別に用意します。

ただし、内容が食い違う形にはしません。

開いた記事のタイトルと違うと、読み手が混乱します。

短くするのは構いませんが、意味を変えないようにします。

画像のサイズをどう決めるか

画像のサイズは、媒体によって推奨が少しずつ違います。すべてに完璧に合わせるのは現実的ではありません。

広く使われている目安は、横1200、縦630の画素数です。比率でいうと、およそ1.91対1の横長になります。

一部の媒体では、この比率が1200対628とされています。数画素の違いなので、実務上は同じと考えて構いません。

横1200かつ縦630で作っておけば、主要な媒体で問題なく表示されます。

注意が必要なのは、媒体によって上下や左右が切られることです。

端に重要な要素を置くと、切れて見えなくなります。

文字を入れる場合は、中央寄りに配置します。上下左右に余白を持たせておくと安全です。

正方形に近い画像を指定すると、小さく表示される形式に切り替わる媒体もあります。

横長で作ることが、大きく表示させるための条件です。

小さく表示されると、目立つ効果がかなり減ります。

容量にも上限がある

画素数だけでなく、ファイルの容量にも注意が必要です。

数メガバイトを超えると、読み込みに失敗する媒体があります。

写真をそのまま使うと、容量が大きくなりがちです。

1メガバイト以下を目安に、書き出すときに圧縮します。

共有時の表示は小さいので、高い解像度は不要です。

容量を落としても、見た目の劣化はほとんど分かりません。

画像に文字を入れるかどうか

画像に記事のタイトルを入れる作りは、広く使われています。目立ちやすく、内容も伝わります。

ただし、タイトルは画像の下にも表示されます。同じ文字が2回出ることになります。

これ自体は問題ありませんが、画像の文字が長すぎると読みにくくなります。

画像に入れる文字は、短い一言に絞るほうが読まれます。

記事のタイトルをそのまま入れるより、要点だけを大きく入れる形が効果的です。

小さい画面では、細かい文字はまず読まれません。

表示されない主な原因

指定を書いたのに画像が出ない、という相談は多くあります。原因はいくつかに絞られます。

最も多いのが、画像のURLが相対的な書き方になっていることです。

ページの中では相対的な書き方でも表示されますが、外部の媒体からは読み取れません。

画像のURLは、必ず先頭から書いた絶対のURLにします。

次に多いのが、安全でない接続で指定していることです。

多くの媒体は、安全な接続でない画像を読み込みません。サイト全体が安全な接続になっていても、画像の指定だけ古い書き方が残っていることがあります。

3つ目が、画像のファイルが大きすぎることです。数メガバイトを超えると、読み込みに失敗する場合があります。

4つ目が、記述の書き方の誤りです。項目名の綴りや、属性の書き方を間違えていると読み取られません。

これらは、確認用の道具を使えばすぐ分かります。

推測で直すより、道具で確かめるほうが速く解決します。

拡張機能どうしの衝突

複数の拡張機能が同じ指定を出力していることもあります。

この場合、2つの指定が重複して書き出され、どちらが読まれるか分からなくなります。

検索向けの拡張機能と、共有向けの拡張機能を両方入れている場合に起きます。

出力されている記述を実際に見て、重複がないかを確認します。

重複していたら、どちらか一方の機能を止めます。

この確認は、道具の設定画面だけを見ていても気づけません。

更新しても反映されないとき

画像を差し替えたのに、共有すると古い画像が出る。これもよくある相談です。

原因は、媒体の側が情報を一定期間保持しているためです。毎回ページを読みに行くわけではありません。

保持される期間は媒体によって違い、数日から1週間ほどとされています。

待てば自然に更新されますが、急ぐ場合は方法があります。

1つは、媒体が提供している確認用の道具を使うことです。URLを入力すると、その場で最新の情報を読み直させられます。

公開直後に一度この操作をしておくと、意図した形で表示されます。

もう1つは、URLの末尾に印を足す方法です。別のURLとして扱われるため、新しく読み込まれます。

ただしこの方法は、共有されるURLが増えることになります。乱用は避けます。

公開の手順に、確認用の道具でURLを読み込ませる工程を入れておきます。

30秒で終わる作業です。忘れやすいので、公開前の確認の項目に加えます。

確認の仕方

自社の設定が正しいかは、公開前に確かめられます。方法は複数あります。

最も手軽なのは、各媒体が公開している確認用の道具です。URLを入力すると、実際にどう表示されるかが分かります。

誤りがある場合は、何が問題かも表示されます。

主要な媒体それぞれに道具があるので、2つか3つで確認すれば十分です。

もう1つの方法は、実際に自分に送ってみることです。

メッセージの道具で自分宛てにURLを送れば、その場で表示を確認できます。

この方法は手軽ですが、誤りの原因までは分かりません。

まず自分に送って確かめ、問題があれば確認用の道具で原因を調べる。この順番が効率的です。

スマートフォンでの見え方も、あわせて確認します。

画面が小さいと、画像の切られ方が変わることがあります。

公開前に確認する習慣

確認は、公開してからでは遅い場面があります。

公開直後に誰かが共有すると、その時点の情報が保持されます。

後から直しても、保持された情報が残り続けます。

公開前に確認しておくのが、最も確実な進め方です。

下書きの状態で確認できる仕組みもあります。

非公開のURLでは道具が使えないため、公開直後の即時確認で代替します。

記事ごとに画像を変えるか

すべての記事に個別の画像を用意するのは、手間がかかります。

共通の画像を1枚だけ使い回す方法もあります。会社のロゴを入れた画像などです。

この方法は手軽ですが、どの記事も同じ見た目になります。

複数の記事を共有したとき、区別が付かなくなります。

記事ごとに変えるほうが望ましいのは確かです。

現実的な折衷案として、カテゴリごとに画像を変える方法があります。

5つのカテゴリがあるなら、5枚の画像を用意します。

あるいは、記事のタイトルを自動で画像に重ねる仕組みを入れる方法もあります。

この仕組みがあれば、記事を公開するだけで固有の画像が生成されます。

拡張機能や、外部の道具で実現できます。手間と効果を比べて選びます。

記事の内容と合っているか

画像を用意するとき、内容と関係のない素材を使うのは避けます。

見た目が綺麗でも、記事の内容と結びつかなければ開かれません。

開いた人も、想像と違えばすぐ閉じます。

クリックされることと、読まれることは別です。

目を引くことだけを狙うと、記事の評価に悪影響が出ることもあります。

内容を正しく表す画像を選ぶのが、結局のところ最も効果的です。

素材の権利にも注意します。無料で配布されている画像でも、商用の利用に条件が付くことがあります。

共有時の画像は自社の発信として広く出回るため、権利の確認は本文の画像以上に重要になります。

利用の条件を確かめてから使う習慣を、素材を選ぶ工程に入れておきます。

説明文の書き方

画像に比べて軽視されがちですが、説明文にも役割があります。

タイトルだけでは伝わらない部分を補い、開くかどうかの判断を後押しします。

書き方の要点は、冒頭で内容を示すことです。

媒体によっては、80字ほどで切られます。前置きから入ると、肝心の部分が切れます。

最初の一文で、この記事が何について書かれたものかを示します。

また、記事の一部をそのまま抜き出すのは避けます。

本文の冒頭は、たいてい導入なので内容が分かりません。

説明文は、記事全体を要約する形で別に書きます。

検索結果に出る説明文と同じもので構いません。

どちらも「読むかどうかを判断させる文」という点で役割が同じです。

記事ごとに書くべきか

説明文を記事ごとに書くのは、手間としては小さくありません。

拡張機能の設定で、本文の冒頭を自動で使う形にもできます。

この形でも問題ありませんが、冒頭が導入だと内容が伝わりません。

記事の冒頭を、それ単体で内容が分かる書き方にしておくのが両立の方法です。

共有時の説明文と、記事の書き出しを兼用できます。

結果として、記事そのものも読まれやすくなります。

設定する手順

実際に整えるときの順番をまとめます。

この5工程は、半日ほどで一巡できます。

2番目の自動出力を有効にするだけで、大半の問題が解決します。

個別の画像の作成は、その後で余力に応じて進めます。

社内の共有でも効いてくる

この設定が活きるのは、社外への発信だけではありません。

社内のやり取りでURLを共有する場面でも、見た目が整っていると分かりやすくなります。

業務で使う連絡の道具でも、同じ指定が読み取られて表示されます。

URLだけが並んでいる状態と比べて、何の記事か一目で分かります。

営業が顧客に記事を送るときも同様です。

メールに貼ったURLが、画像付きで表示される道具もあります。

味気ないリンクより、開かれる確率が上がります。

記事を社内で活用する取り組みをしているなら、この効果も見込めます。

設定は一度きりで、あらゆる共有の場面に効いてきます。

メールでの共有も想定する

メールの本文にURLを貼るとき、道具によっては同じ指定が読み取られます。

受け取った側の画面で、画像付きのカードとして表示されます。

営業が送るメールでも、この見え方が効いてきます。

URLだけが並んでいると、開くかどうかの判断ができません。

画像とタイトルが見えれば、内容を想像して開いてもらえます。

記事を営業に使ってもらう取り組みをしているなら、あわせて整えておく価値があります。

画像を用意する手間を減らす

記事ごとに画像を作るのは、続けるのが難しい作業です。仕組みで軽くする方法を持っておきます。

1つは、下地となる画像を数種類作り、タイトルだけを差し替える方法です。

配色や図柄を変えた下地を5枚ほど用意し、記事に応じて選びます。

毎回ゼロから作るより、圧倒的に速く済みます。

2つ目は、タイトルを自動で重ねる仕組みを入れる方法です。

記事を公開すると、タイトルの文字が下地に重ねられて画像が生成されます。

拡張機能や外部の道具で実現できます。記事数が多いサイトでは投資に見合います。

3つ目は、生成する道具で下地を作る方法です。

この場合、画風が揃うように指示の型を決めておきます。

記事ごとに画風が変わると、一覧で見たときに雑然とします。

やりがちな失敗

共有時の表示を整えるときに、外しやすい点をまとめます。

• 画像のURLを相対的な書き方で指定する：外部の媒体から読み取れず、画像が表示されない
• 安全でない接続で画像を指定する：多くの媒体が読み込みを拒否する
• 正方形に近い画像を使う：小さく表示される形式に切り替わり、目立たなくなる
• 画像の端に重要な文字を置く：媒体によって切られ、読めなくなる
• 差し替えても確認用の道具で更新しない：数日間、古い画像が表示され続ける

3つ目は、既存の画像を流用するときに起きやすい失敗です。

記事の中で使っている画像は、正方形に近いことがあります。

共有用の画像は、専用に横長で作るのが確実です。

記事内の画像とは役割が違うと考えます。

運用の決めごと

一度整えたあと、崩れないための決めごとを用意します。

• 画像は横1200、縦630で作る。正方形に近い画像は使わない
• 画像のURLは絶対のURLで、安全な接続にする
• 文字を入れるときは中央寄りにする。端は切られる前提で作る
• 公開時に、確認用の道具でURLを読み込ませる
• サイトを改修したときは、指定が残っているかを確認する

最後の項目が見落とされがちです。サイトの改修で、拡張機能の設定が初期化されることがあります。

改修の後は、代表的な記事で表示を確認する習慣を持ちます。

気づかないまま数か月放置すると、その間の共有がすべて味気ない表示になります。

確認を手順に組み込む

この確認を人の記憶に任せると、必ず抜けます。

公開前の確認の項目に、1行加えるのが最も確実です。

「共有時の表示を確認用の道具で確かめたか」という項目です。

作業としては30秒で終わります。

忘れるのは、手間だからではなく、項目にないからです。

既に確認の一覧があるなら、そこへ足すだけで運用に乗ります。

実務での目安

どこまで手をかけるかの目安を示します。

• まず自動出力を有効にする。これだけで大半が解決する
• 共通の画像を1枚用意する。カテゴリごとに変えられればなお良い
• 個別の画像は、アクセス上位の記事から順に作る
• 画像の容量は1メガバイト以下を目安にする
• 公開時の確認用の道具での読み込みは、手順に組み込む

この範囲で十分に効果が出ます。

効果はどう確かめるか

設定を整えた効果は、SNSからの流入で確かめられます。

計測の仕組みで、各媒体からの流入数を見ます。

画像が出るようになった前後で比べると、変化が見えることがあります。

ただし、投稿の内容や頻度でも数字は動きます。

設定だけの効果を切り出すのは難しいのが実情です。

細かく測るより、整えておくべきものとして済ませるのが現実的です。

記事を書く手間に比べれば、ごくわずかな作業です。

せっかく書いた記事を、味気ないリンクのまま共有させない。

それだけのことで、届く範囲が変わります。

まとめ

共有したときの見た目は、ページの裏側にある指定で決まります。

指定しなければ、媒体が独自に情報を拾うため、意図しない表示になります。

画像は横長で横1200かつ縦630前後。絶対のURLで、安全な接続にします。

表示されない原因は、相対的な書き方、安全でない接続、記述の誤りに絞られます。

差し替えたときは、確認用の道具で読み直させます。

画像を用意する手間は、下地を数種類作っておくか、自動で生成する仕組みで軽くできます。

すべての記事に個別の画像を用意する必要はありません。まず共通の1枚から始めます。

そして、公開前の確認に1行加えておけば、崩れたまま放置されることもなくなります。

記事を書く時間に比べれば、この設定にかかる時間はわずかです。書いたものを届けるための、最後の一手間だと考えます。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。