開発ログ：サービス公開直前！地味だけど超重要なOGP設定とメタ情報を整えた話

こんばんは！IT業界で働くアライグマです！

現在、私の個人開発プロジェクトである「瞬間記憶力ゲーム Pocket Neuron（ポケットニューロン）」は、いよいよ公開が目前に迫ってきました。機能実装やデバッグといった派手な作業が一段落し、今は公開に向けた最終準備を進めています。

今日は、そんな開発プロセスの中から、つい「後でやろう」と思われがちな、しかしWebサービスの第一印象を決定づける、地味で超重要な作業――OGPやメタ情報の設定について、PjMとしての視点も交えながらお話ししたいと思います。

OGP設定は、Webサービスの「紹介状」

皆さんは、OGP（Open Graph Protocol）をしっかり設定していますか？

OGPとは、TwitterやFacebook、LINE、SlackなどでURLがシェアされた際に、そのページのタイトル、概要、画像などをリッチに表示させるための仕組みです。

これが設定されていないと、せっかく誰かがあなたのサービスをシェアしてくれても、ただのURLリンクが表示されるだけで、何だかよく分かりません。クリック率は著しく下がり、貴重な拡散の機会を逃してしまいます。

PjMの視点から言えば、OGPはサービスの「紹介状」であり「名刺」です。この名刺が魅力的であるかどうかで、サービスの門を叩いてくれる人の数が大きく変わるのです。

Pocket Neuronで実際に設定したOGPとメタ情報

まさに今日、私が「Pocket Neuron」に設定したOGPとメタディスクリプションがこちらです。

サービスのコンセプトが瞬時に伝わるように、シンプルさと機能性を重視した「パターン1」を採用しました。

Laravelプロジェクトの共通レイアウトである resources/views/app.blade.php の<head>内に、以下のように記述します。

<head>
    <!-- 基本的なメタ情報 -->
    <title>Pocket Neuron - 1日1分からの瞬間記憶力ゲーム</title>
    <meta name="description" content="あなたのワーキングメモリを鍛える、新感覚の瞬間記憶力ゲーム「Pocket Neuron」。日々のスコアと独自IQを記録・分析し、あなたの記憶力の成長を可視化します。スキマ時間で脳を活性化させませんか？">

    <!-- OGP設定 -->
    <meta property="og:url" content="（ここにサービスのURL）" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Pocket Neuron - 1日1分からの瞬間記憶力ゲーム" />
    <meta property="og:description" content="あなたのワーキングメモリを鍛える、新感覚の瞬間記憶力ゲーム。日々のスコアと独自IQで、記憶力の成長を可視化します。" />
    <meta property="og:site_name" content="Pocket Neuron" />
    <meta property="og:image" content="（ここにOGP画像のURL）" />

    <!-- Twitterカード設定 -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Pocket Neuron - 1日1分からの瞬間記憶力ゲーム" />
    <meta name="twitter:description" content="「あれ、何だっけ？」が口癖のあなたへ。スキマ時間でワーキングメモリを鍛える、新感覚の瞬間記憶力ゲームが登場。" />
    <meta name="twitter:image" content="（ここにOGP画像のURL）" />
</head>

ポイントは、og:description（汎用）とtwitter:description（Twitter用）で、少しだけ文章のテイストを変えている点です。Twitterでは、より口語的で、共感を呼ぶような文章を意識しました。

「神は細部に宿る」- なぜこの作業を軽視しないのか

エンジニアとしては、ついつい機能実装のような「本質的」な作業に集中しがちです。しかし、PjMとしては、「ユーザーにどう見え、どう伝わるか」という視点を決して疎かにはできません。

このOGP設定のような一見地味な作業は、

  • ブランドイメージの統一
  • SNS経由の新規ユーザー獲得率の向上
  • プロジェクト全体のプロフェッショナリズムの証明に直結します。

素晴らしいサービスを作っても、その魅力が伝わらなければ存在しないのと同じです。開発の最終段階で、こうした「伝えるための努力」にどれだけ時間をかけられるかが、個人開発の成否を分ける一つのポイントだと私は考えています。

まとめ

ということで、本日はサービス公開直前の舞台裏として、OGP設定についてお話ししました。

「Pocket Neuron」は、こうして一歩一歩、世に出る準備を整えています。次回は、いよいよサーバーへのデプロイ作業ログなどをお届けできるかもしれません。

この開発ジャーニーが、これからご自身のサービスを作ろうとしている誰かの、ささやかな参考になれば幸いです。

開発ログlaravel,PHP,SNS,Twitter,個人開発