役立つ記事をクライアントに送ったのに、メッセージにはスタジオ共通の画像と、内容のわかりにくいタイトルが表示される。読者はページを開く前から、リンク先を推測しなければなりません。修正は、すべての入力欄を書き換えることからではなく、単純な編集上の問いから始めましょう。紹介しているのはどのページで、クリックする前に何を理解してもらいたいのでしょうか。
まず、三つの表示場所を分ける
HTMLの<title>要素は、ブラウザーのタブに表示される文書名を指定します。MDNのリファレンス。ページの説明にはmeta name="description"を使えます。MDNのmeta解説。
Googleは複数の情報源から検索結果のタイトルを自動生成します。Googleの公式資料。検索スニペットは主に本文、場合によってはメタディスクリプションから作られ、検索語によって変わります。スニペットの公式資料。
Open Graphの必須項目はog:title、og:type、og:image、og:urlです。任意のog:image:widthとog:image:heightは寸法を示し、og:image:altはキャプションではなく画像の内容を説明します。Open Graph仕様。
作業用の文書に「タブ」「検索」「共有」の行を分けて用意し、意図した文章と、実際に確認した表示を並べて記録します。こうすれば、編集上の判断と、特定のアプリの動作をチーム内で混同せずに済みます。
リンクのための短い企画メモを作る
ポートフォリオ用の写真を準備する記事を考えてみましょう。「お役立ち情報」ではなく、「ポートフォリオに載せる写真12枚の選び方」とします。説明の案は「選定基準、写真の並べ方、公開前の確認手順」です。これは架空の表現例であり、成果を約束するものではありません。「12枚」と書いてよいのは、記事が実際にその枚数の選定を扱っている場合だけです。
画像を外して企画メモを確認します。テーマは伝わるでしょうか。次に説明を外します。タイトルだけでも具体的でしょうか。同僚に、クリック後に何が読めると思うか、一文で答えてもらいましょう。その答えが記事の内容と違うなら、宣伝的な形容詞を足すのではなく、表現そのものを直します。
トップページと記事ではカバー画像を分ける
トップページには、ブランドが一目でわかる構成が適しています。個別の記事には、そのテーマを説明する画像を用意しましょう。写真の組み合わせ、作業工程の一部、シンプルなテーマ別イラストなどが候補です。共通の色や小さなブランドマークで連載の統一感を出すことはできますが、記事の中身の代わりにはしないでください。
画像編集ソフトで横長と正方形の切り抜きを試します。これは見え方の耐性を確認するテストであり、全プラットフォーム共通の仕様ではありません。重要な被写体は中央寄りに置き、端には余白を残します。スマートフォンで小さく表示して確認し、拡大しなければ読めない文字は削除するか、大幅に短くします。
共有前のチェックリスト
- URLを記録する。 下書きやトップページではなく、対象言語の最終的な公開URLを確認します。
- 内容を照合する。 タイトル、説明、カバー画像が同じ記事を表しているか確認し、別の記事から誤って引き継がれた項目を取り除きます。
- 画像を単独で開く。 ログインせずに、そのURLから目的の画像ファイルを開けることを確かめます。
- 入力フォームだけでなくページを見る。 編集画面で保存できても、公開HTMLに意図したデータが出力された証拠にはなりません。
- 実際のカードを見る。 対象アプリで画像、トリミング、文章、遷移先を確認します。未確認なら、その状態を明記します。
- 各言語版で繰り返す。 タイトルの翻訳だけで済ませず、説明、文字入り画像、リンク先ページも照合します。
「完了」は何を意味するか
URL、言語、確認時刻、アプリ、結果、次の作業を簡潔に記録します。「入力欄を保存済み」「HTMLを確認済み」「カードの表示を確認済み」は別の状態です。変更後も古い表示が残る場合、即時更新を約束したり、キャッシュの保持時間を推測で断言したりしないでください。表示例を保存し、そのサービスで利用できる再取得の方法を調べます。目的は明快です。読者がリンクの内容を理解でき、チームが何を確認できたのか正確に把握できる状態にすることです。