logo image

Nextjs開発時、OGPの画像が表示されないときの対応方法

Icon representing a data.
2021-12-23
Icon show updated_at
2021-12-23
1
Twitter icon.
Nextjs
Vecel

前提条件

  • Nextjsを使用したウェブアプリ
  • OGPを使用して、Twitterカードを表示させたい。

Nextjsのコードは以下のような設定方法をしている。

import ogp from "src/assets/images/ogp.png"


<meta property="og:image" content={ogp.src} />

現象

以下のような感じで文字は表示されるが、Twitterのみ画像が表示されてない。
(SlackやFacebook等は表示される。)

image

原因

ビルド後、以下のようなパスになっていることが原因だった。

<meta property="og:image" content="/_next/static/media/advertisement_jp.13800cd8.png">

対応

フルパスで指定すると表示するようになった。

<meta property="og:image" content="https//:.....">

Next.jsでフルパス指定するのは難しかったため、別のクラウドストレージにOGPの画像を保存し、保存先のURLを指定することで、表示されるようになった。

備考

Next.js(Vecel)上でも、フルパスを指定できると思うので、現在調査中。

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

Nextjs
Vecel
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。