logo image

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

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

Precondition

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

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

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


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

Fact

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

image

Cause

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

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

Method

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

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

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

Remarks

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

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
There are no comments on this article yet.

Environment Library tools

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