OGPタグはなぜ必要？

XServerさんの説明はこちら
https://www.xserver.ne.jp/bizhp/open-graph-protocol/

ざっくりな内容として「SNSなどにリンクをシェアしたときに、タイトルや画像を表示するための仕組み」です
今回、趣味開発しているWebアプリに「SNSで投稿内容をシェアするためのURLを発行する」機能を追加するにあたり、X(Twitter)などに画像やタイトルを表示させる必要があったため、OGPタグを追加することにしました。
(ちなみに、自分が作成しているサイトはライダー向けツーリングスポット共有サイトで、マップ上にスポットを投稿できるようなWebサイトです)

↓こんな感じで、Xポスト内に投稿した内容が画像付きで表示されるようになります

ヤギ！柵まで近づいてきてくれて可愛かった！
https://t.co/YMV9Hki6hV #ProjectRIDE #ツーリング

— ProjectRIDE (@ProjectRID46883) October 1, 2025

Next.jsでOGPタグを返却する仕組み

Next.jsで開発するアプリでOGPタグを返却する場合、以下の2通りの方法が利用できます

• metadataオブジェクトを定義し、固定値を返却
• generateMetaData関数を定義し、動的な値を返却

metadataオブジェクトを使用する場合

固定ページなど、動的に情報を取得する必要がない場合metadataオブジェクトをlayout.jsやpage.jsに定義してメタデータ(OGPタグなど)を返却することができます
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields

動的な取得が必要なければ、こちらを利用するのが簡単そうですね!

generateMetada関数を使用する場合

例えば、ユーザーの投稿内容を表示するなど、内容を動的に取得する必要がある場合は「generateMetadata」ファンクションを使用する必要があります
https://nextjs.org/docs/app/api-reference/functions/generate-metadata

自分のサイトでは以下の方法で実装しています。実装先はapp/page.tsxになります

type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

// SNSシェアリンク用のOGP生成処理
// https://www.project-ride.com/content_id=1 でアクセスされたときに実行される
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  
  const resolvedSearchParams = await searchParams
  const contentId = resolvedSearchParams.content_id
  const wwwBaseUrl = process.env.NEXT_PUBLIC_WWW_BASE_URL ?? ""
  const defaultImageUrl = `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL ?? ""}${process.env.NEXT_PUBLIC_NO_IMAGE ?? ""}`  

  // もし content_id が URL にあれば...
  if (typeof contentId === 'string') {
    const content = await getContent(contentId);

    if (content) {
      const imageUrl = content.image_url
        ? (process.env.NEXT_PUBLIC_IMAGE_BASE_URL ?? "") + content.image_url
        : defaultImageUrl;

      const title = content.message.replace(/<br\s*\/?>/gi, '').substring(0, 30) + '...';
      const description = content.message;

      return {
        title: title, // タイトル用にメッセージを短縮
        description: description,
        openGraph: {
          title: title,
          description: description,
          url: `${wwwBaseUrl}?content_id=${contentId}`,
          images: [{ url: imageUrl }],
        },
        twitter: {
          card: 'summary_large_image',
          title: title,
          description: description,
          images: [imageUrl],
        }
      }
    }
  }

  // 有効なコンテンツが見つからない場合、デフォルト内容を返却
  return {
    title: 'RIDE-Mono',
    description: 'バイク乗りのためのおすすめスポット共有サイト',
    openGraph: {
      title: 'RIDE-Mono',
      description: 'バイク乗りのためのおすすめスポット共有サイト',
      url: wwwBaseUrl,
      images: [{ url: "" }], // デフォルト画像
    }
  }
}

スクリプト内のgetContent関数でユーザー投稿内容を取得し、メタデータを設定しています

注意点としてgenerateMetadata関数はサーバーコンポーネントで実行する必要があります
自分が最初作成したとき、クライアントコンポーネントにてページを作成していたため、generateMetadata関数を利用するために、既存のページ内容を別途クライアントコンポーネントのファイルに別出しして対応を行いました

export default function Home() {
  return (<TopPage />);
}

もともと記載していた内容をTopPageコンポーネントに分離しています
TopPageコンポーネントでは、’use client’を利用し、クライアントコンポーネントとして動作させています

プレビューが出ない時がある

生成したリンクをX(Twitter)に貼り付けたときにプレビューが表示されたり、されなかったりといった症状がでてデバッグに苦戦しました
実際には投稿後に正しくOGPの内容が表示されたので、投稿前のプレビューの精度は参考程度に考えていたほうが良いのかもしれません(逆に投稿したのに、想定したOGPの内容が表示されない場合は、何かを間違えている可能性が高い)

以上です

ということでNext.jsからMetadata(OGPタグ)を返却する方法でした
SPAだとどうやってMetadataを返却しているのか正直謎でしたが、調べてみるときちんと仕組みが備わっているんですね！

Metadataを生成することで、SNSシェア以外にもクローラー対応など、色々できることが増えそうです

投稿 Next.jsでMetatag(OGPタグ)を返却する は Sheltie Garage Tech に最初に表示されました。

イベントハンドラとダミーデータでモックを作成する

前回まででざっくりとフォルダ構成やコンポーネントの構成を決めました。
今回はひとまずイベントハンドラとダミーデータを作成して、大まかに動くようにしたいと思います。

前回のおさらいです

・components – template : 検索条件と検索結果をそれぞれ表示するテンプレート
・components – ui-elements:ボタンやテキストボックスなどの最小単位のコンポーネント
・pages:親コンポーネントに位置するコンポーネント。この中でテンプレートを読み込む

SearchConditionTemplate.tsxの中身

import SearchButton from "../ui-elements/SearchButton";
import SearchTextBox from "../ui-elements/SearchTextBox";

const SearchConditionTemplate = (props : any) => {
    return(
        <div>
            <SearchTextBox onChange={props.handleKeywordChange} /><SearchButton onClick={props.onClick}/>
        </div>
    );
}

export default SearchConditionTemplate;

こんな感じで、テキストボックスと検索用ボタンのみとなります。
各イベントハンドラは親コンポーネントからプロパティ経由で取得します。

SearchResultTemplate.tsxの中身

import SearchResultCard from "../ui-elements/SearchResultCard";

const SearchResultTemplate = (searchResultProps: any) => {

    let list = [];

    if(searchResultProps == null){
        return ;
    }

    for(const [i, result] of searchResultProps.results.entries()){
        list.push(<SearchResultCard result/>);
    }

    return(
        <div>
            {list}
        </div>
    );
}

export default SearchResultTemplate;

検索結果を表示するだけのページになります。プロパティ経由で検索結果を受け取り、画面に表示します。

search.tsxの中身

import { SetStateAction, useState } from "react";
import SearchConditionTemplate from "@/components/template/SearchConditionTemplate";
import SearchResultTemplate from "@/components/template/SearchResultTemplate";


const Search = () => {

    // ステートの宣言
    const [keyword, setKeyword] = useState('');
    const [searchResults, setSearchResults] = useState<any[]>([]);

    // 入力値変更イベントハンドラ
    const handleKeywordChange = (e : any) => {
        console.log("キーワード変更");
        setKeyword(e.target.value);
      };

    // 検索イベントハンドラ
    const handleSearch = () => {
        console.log("検索クリック");
        // ここで実際の検索処理を実装する
        // 例: ダミーの検索結果を設定
        const dummyResults = [
          { id: 1, title: '検索結果1' },
          { id: 2, title: '検索結果2' },
          { id: 3, title: '検索結果3' },
        ];
        setSearchResults(dummyResults);
      };

    return(
        <div className="App">
            <SearchConditionTemplate handleKeywordChange={handleKeywordChange} onClick={handleSearch}/>
            <SearchResultTemplate results={searchResults}/>
        </div>
    );
}

export default Search

親コンポーネントとなるsearchコンポーネントの中身。
各テンプレートを読み込んで表示を行うことと、イベントハンドラやステートを宣言し、各コンポーネントへプロパティ経由で受け渡します。

検索結果は今のところダミーデータですが、将来的に検索ボタンをクリックしたときにOpenSearchに検索を行い、結果を受け渡すように変更します。

ここまでの動き

ここまで作成すると、以下のような画面になります。

見た目がかなりしょぼい上に、実行時エラーも発生してしまっていますが、良いのです。
このあたりの不具合はこの後修正します。

今回はここまで

ということで、本日はここまで。
進みは遅いですが、趣味で作っているものなのでご勘弁を。
毎週少しでも開発を続けていれば、いつかは完成する精神なので長い目でお付き合いいただけたらと思います。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 [ 手島 拓也 ]

created by Rinker

¥3,498 (2026/04/30 15:35:44時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

実用 Go言語 システム開発の現場で知っておきたいアドバイス [ 渋川 よしき ]

created by Rinker

¥3,960 (2026/04/30 06:22:26時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 OpenSearchでなにか作るぞ!(その8 フロントサイドを引き続きつくる） は Sheltie Garage Tech に最初に表示されました。

Nextjs + Material UIの組み合わせで行きます

フロントで利用するフレームワークは脳死的にNextjsを選択するのが、最近のマイブームです
https://nextjs.org/

GUIはMaterial UIを利用します。こちらも特に理由はなく、完全に好みの問題です。
https://mui.com/

Atomic Design的な考えを取り入れつつ、かなり簡素なディレクトリ構成にしました

ReactでUI設計を行う時は「Atomic Design」を利用することが多いと思います。本プロジェクトでもこの考え方を利用しますが、現状のアプリ内容に合うように少しカスタマイズして利用します。

というのも、今回作成するアプリはとても小さいもので、想定している機能としては
・画面から検索を行う
・検索結果を表示する
程度のものになります。

そのため、ディレクトリについても以下の画像のように
・ui-elements:画面の部品となるコンポーネント
・template:ui-componentsを組み合わせたページ
の2ディレクトリのみとしました。

一旦ここまで

ということで、こんな感じで作っていますということで、一旦ここまでになります。
各コンポーネントはビジネスロジックは持たず、最終的にnextjsのpageディレクトリに配置するページ内に処理に必要なすべてのメソッドを作成し、プロパティ経由で各コンポーネントに受け渡すような設計で進めていきます。

フロントエンド周りは自分が苦手とするところなので、サーバーサイド以上に作成に苦戦しそうですが、なんとか作っていきたいと思います。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 [ 手島 拓也 ]

created by Rinker

¥3,498 (2026/04/30 15:35:44時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

実用 Go言語 システム開発の現場で知っておきたいアドバイス [ 渋川 よしき ]

created by Rinker

¥3,960 (2026/04/30 15:35:44時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 OpenSearchでなにか作るぞ!(その7 フロントサイドを作り始める） は Sheltie Garage Tech に最初に表示されました。

概要

現在個人で作成しているWebアプリでログイン周りの実装を行っていました。
開発の環境としては、
・フロントサイド：Reactのlocalhost:3000
・バックサイド：Goのlocalhost:1323
というCORS状態で開発しています。

ログイン認証方式は昔ながらの「ログイン、パスワードを入力してログインを行い、セッションIDをCookieに保存する」方式です。

結論：GoとReactを以下のように修正

Go側の変更

	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
		AllowOrigins:     []string{"http://localhost:3000"},
		AllowHeaders:     []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
		AllowCredentials: true, // ←これを追加
	}))

React側(axios)の変更

    axios.get('http://localhost:1323/', 
      { withCredentials: true }) // ← これを追加
      .then(res => { 
      console.log(res.data)
    });

以上でCookieが保存できるようになりました。これにたどり着くまでに12時間くらいかかった・・・

ヒントにしたのは以下のサイトです。
https://stackoverflow.com/questions/72612730/browser-is-not-saving-cookie
https://stackoverflow.com/questions/43002444/make-axios-send-cookies-in-its-requests-automatically

Go側の設定は無くてもCookieが保存できましたが、以下のようなエラーが発生したため加えています。

以上！

以下、現象について

Cookieがどう頑張っても保存されない

Go + Echoでサーバーサイドを作成していますが、Cookieがどうやっても保存できずハマっていました。
クライアントサイドはReact(Nextjs)です。
EchoのCookieの利用方法はこちらになります。

Cookieのレスポンスは返却されており、有効期間も未来日に設定しているのになぜ？という状態でした。

更におかしいのが「EditThisCookie」の拡張機能からもCookieが作成できないという点。
この場合、自分のプログラムの組み方とは別の場所に問題がありそうな気がします。

問題の切り分け

試しにReactを経由せず、GoのAPIを直接叩いてみたところ無事にCookieが保存されることを確認。

ということで、React経由でアクセスすると上手く行かないことが分かり、そちらの方面で調べてみることにしました。

「react acookie not saved」などと検索して、冒頭で紹介したサイトに行き着いて解決しました。

今更ながらCookie周りについて確認

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/withCredentials

https://qiita.com/kawaz/items/1e51c374b7a13c21b7e2

CORSの環境では上記の設定が必要とのこと・・・
今までCORSの環境でいくつか個人アプリは作っていましたが、実はCookieを利用するのは今回が初めてというところもあり、予定外のところで詰まってしまいました・・・

アプリが完成した場合、本番環境でもCORSの環境になる可能性があるので、開発段階で発見できたのは良かったといえばよかったか・・・

Webアプリ開発は長らくやってきたつもりでしたが、まだまだ勉強不足な部分がありました。
サーバーサイド、フロントサイド、マイクロサービス etc　そのような環境でもつまらずに開発が続けられるようになりたい・・・

Webブラウザセキュリティ Webアプリケーションの安全性を支える仕組みを整理する

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

モダンJavaScriptの基本から始める　React実践の教科書　（最新ReactHooks対応）

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

投稿 Reactを利用したWebアプリでCookieがなかなかできずにハマった話 は Sheltie Garage Tech に最初に表示されました。

react-dropzoneを利用して画像ファイルからbase64を取得し、axiosで送信する

react-dropzoneの利用方法は以下になります
https://react-dropzone.js.org/#section-basic-example

  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

react-dropzoneの利用方法を抜粋したのが上のコードです。
acceptedFilesに選択した画像ファイルの情報が入ってきます。

    const fileReader = new FileReader();

    // ファイルをBase64でエンコード
    fileReader.onload = () => {
      const base64Data = fileReader.result as string;

      // 事前登録APIへリクエストをポスト
      axios
        .post(registerURL, base64Data)
        .then((response) => {
          console.log(response.data);
        });
    };
    fileReader.readAsDataURL(acceptedFiles[0]);

ファイル読み込み時のonloadイベントを利用してbase64形式でデータを取得。
axiosを利用してGoで作成されたAPIへPOSTメソッドで送信します。

acceptedFiles[0]としているのは、現在のアプリの想定では画像は1つのみ選択する仕様のため、選択されたファイルの先頭を取得しています。

Goでのバックエンド処理

Goでは送信されたPOSTデータを解析し、画像ファイルとして保存します。

	imageData := strings.Split(base64Data, ",")[1]
	decodedData, err := base64.StdEncoding.DecodeString(imageData)

strings.Split(base64Data, “,”)[1]としているのは、送信されたbase64データの先頭には「data:image/png;base64,」といったデータの種類を表すスキームが含まれているため、純粋なデータ部分のみを取得するためを取得するための処理になります。

err = os.WriteFile(path+fileName, decodedData, 0644)

実際にbase64(デコード済み)のデータを画像ファイルに書き出している部分はこちら。
path + fileNameは保存先のファイル名まで含めたフルパスが記載されています。
decodedDataはデコード済みのbase64データ、0644はファイルパーミッションとなります。

主要な部分の抜粋になりますが、「画像をbase64形式で受け取り、Goを利用してファイルを保存する」という流れについては概ね以上のようになります。

ちなみに、当初はreact-dropzoneではなく、MuiFileInput(Material UI File Input)を利用していたのですが、子コンポーネントとして作成したMuiFileInputに対して渡したイベントハンドラがどうやってもうまく起動せず断念しました。
react-dropzoneは「多機能すぎて気軽に使えない」ような書き込みを見たのですが、base64形式でファイルを送信する程度であれば、そこまで難しい機能を利用せず実現できます。

モダンJavaScriptの基本から始める　React実践の教科書　（最新ReactHooks対応）

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

実用 Go言語 システム開発の現場で知っておきたいアドバイス [ 渋川 よしき ]

created by Rinker

¥3,960 (2026/04/30 06:22:26時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 React dropzoneを利用してbase64形式で画像をアップし、Goでファイルを保存する は Sheltie Garage Tech に最初に表示されました。

Reactプロジェクトの作成

Reactプロジェクトの作成から、サンプルページの実行までは以下の3行を実行すればよいだけです

npx create-react-app hello-world
cd hello-world
npm start

※npxはスペルミスではなく、npm5.2から同梱されているコマンドです。こちらの記事が参考になりました

上記のコマンドを実行するとブラウザが勝手に起動し、「http://localhost:3000」にアクセスし、以下の画面が表示されると思います。

これでReactプロジェクトの作成は完了です。結構簡単に作成出来ますね！

ちょっといじってみる

画面に表示されている通り、プロジェクト内のApp.jsを編集して保存すると、自動でリロードされて変更が反映されます。
少しいじってみます。
プロジェクトの構成は以下のようになっています。

Learn Reactと記載されている部分をハローワールドに書き換えてみました

ご覧の通り、メッセージが切り替わりました。保存したタイミングで自動でリロードが走るので、手動リロードも必要ありません

ちょっとだけJSXに触れてみる

JSXはjavaScript構文を拡張したものです。Reactコンポーネントを記述する際に用いられています。
公式の説明はこちらからどうぞ！

以下のようにプログラムを書き換えてみました

ご覧の通り、H1タグを変数に大入し、その変数を{}を利用して参照しています。
JSX構文ではこの通り、変数にタグ情報を設定できたり、その内容を{}を利用して参照したり出来ます。
上記の改修を行うと、以下のような画面になります。

変数に代入したH1タグが展開されて、画面に表示されました
HTMLタグが変数に代入できるという感覚はなんとも不思議な漢字ですが、JSX構文では有効な記述となっています

以上

とりあえずReactのプロジェクトを作成し、少し改造するところまで記事にしました。
ちょっとだけ触った漢字だと、Vueよりも扱いやすい印象を受けたので、今後は趣味開発でもReactを採用していきたいと思いました。

モダンJavaScriptの基本から始める　React実践の教科書 （最新ReactHooks対応） [ じゃけぇ（岡田　拓巳） ]

created by Rinker

¥2,860 (2026/04/30 15:35:45時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

Reactハンズオンラーニング 第2版 Webアプリケーション開発のベストプラクティス [ Alex Banks ]

created by Rinker

¥3,740 (2026/04/30 15:35:46時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 Reactを始めてみる は Sheltie Garage Tech に最初に表示されました。