LINEでURLを共有した際に表示されるサムネイル画像の設定方法

2021-01-04
Web
デザイン
ノーコード

リンク(URL)を送信した際に表示されるサムネイル画像の変更方法

webflow サムネイル

LINEでURLを送信すると、上記の画像の様に、右端にサムネイル画像が表示されます。
このように表示される画像の設定方法を解説していきます。
(URLのサムネイル画像という表現があっているかわからないのですが、一番伝わりやすいと思いURLのサムネイル画像と呼ぶようにしています。)

そもそもwebflowとは?
webflowについてはこちら

【ノーコード 】webflowとstudioについて調べてみた

https://purikuro.com/2020/12/18/webflow_studio/

巷で話題沸騰中のノーコードツールwebflowとstudioについてのお話しです。どちらもweb制作を円滑にするノーコードツールですが、それぞれどのようなメリット、デメリットを持っているのか調べて比べていこうと思います。ノーコードって?ノーコードは名前どおり、コ...

ノーコード webflowの料金プランについてはこちら

【ノーコード】webflowとSTUDIO 料金について調べてみた

https://purikuro.com/2020/12/24/webflow-studio-price/

コードを書かずに高いクオリティの開発ができるノーコードツールとして、webflowとstudioがとても有名です。STUDIOの料金プランは日本語で書かれているのでわかりやすいですが、webflowは英語のみ。今日はノーコードを学習している僕が、webflowやstudioの料金プラン...

URLを送信した際に表示されるサムネイル画像 設定手順

1.webflowからDashboardを開き、設定したいプロジェクトを選択してください。
※前回僕が作成したプロジェクトを用いてご説明します。

webflow サムネイル

2.左に設置されてるバーから、pagesをクリックします。
(上から5番目の紙を折り曲げたアイコン)

webflow サムネイル

作成したページの一覧が開ます。
3.設定したいページの上にマウスを置くと設定の歯車アイコンが表示されるので、クリックします。
(この画像ではcautionにマウスが置かれた状態になっているので、歯車アイコンが表示されています)

webflow サムネイル

そうすると、選択したページ名+Settings という項目になります。
ここでページの情報を細かく設定していく事ができます。

general
SEO settings
Open Graph Settings
Site Search settings
Custom Code

の項目があるので、
4.Open Graph Settingsを選択します。

webflow サムネイル

Open Graph Titleの項目で、Opne Graph Image URLがあるので、こちらにサムネイル画像を設置します。

画像はイメージをアップロードする形ではなく、アップロードされた画像のURLを打ち込む必要があります。

webflowのassetsにある画像から、画像URLを調べる事ができます

webflow サムネイル

5.左のバーから、下から2番目の写真アイコンをクリックします。

写真アイコンからサムネイル画像として設定した画像を選択します。
6.カーソルを画像の上に乗せると、設定の歯車アイコンが表示されるので、そちらをクリックします。

webflow サムネイル

右の画像にアイコンが載っている状態になっているので、歯車アイコンが表示されていますね。
こちらをクリックします。

webflow サムネイル

7.四角と矢印のアイコンがあるので、そちらをクリックします。
そうするとwebflowにアップロードされている画像URLが表示されるので、
このURLをOpen Graph Imageに貼り付ける事で設定が簡単にできます。

これで終了です。
個別にページごとに画像を設定することも出来るようでした。

きちんと設定ができているか
確認する方法としては
冒頭でも説明しましたように、LINEでリンクを送信し確認する方法と
Facebookの投稿ページでURLを貼り付け、表示されるサムネイル画像の確認をする方法があります。

homeページに設定したサムネイル画像(opne graph image)は反映されるまで時間がかかる場合があります。
過去に設定した際に、他のページは反映されるのにホームページだけ反映されない現象に陥りましたが、
時間が経つと勝手に表示されるようになっていました。

今回設定した実装方法はwebflowの公式ページwebflow universityを参考にしています。
詳しく知りたい方はwebflow Universityからご覧ください。

まとめ

設定したいプロジェクトを開き、
pages→settings→Open Graph Settings→Open Graph Image
から設定ができます。
画像はイメージをアップロードではなく、アップロードされている画像URLを貼り付けます。
webflowのassetsから画像URLをすぐに調べれるのはとても便利ですね。

さすがはノーコードのwebflow、設定が凄く簡単です。

チュートリアルや使い方は全部英語なので少し抵抗があると思いますが、
実装方法自体はとても簡単だということが分かりますね。

webflowは全部英語で、日本語の情報はあまりありませんが

この記事を保存

メールアドレスを入力すれば、この記事のURLをメールで送ります。

フォーム送信することでプライバシーポリシーに同意するとみなされます。

ありがとうございます!フォームが送信されました。
送信中にエラーが発生しました

最近の記事

NoteのクローンをWebflowで作れる?

NoteのクローンをWebflowで作れる?

Noteのような、記事を投稿できる会員サイトをWebflowとその関連なノーコードツールを使った実装方法の紹介

ノウハウ
Webflowサイト公開前チェックリスト15選!

Webflowサイト公開前チェックリスト15選!

サイトを公開する前にチャックしないといけない忘れがちな項目の15選!説明付です!

豆知識
動画教材数が100本を達成

動画教材数が100本を達成

LikePay.dev Academyの動画教材数が100本を達成したことをお知らせします。

ニュース
LikePay × Webflow:日本コミュニティリーダーへ

LikePay × Webflow:日本コミュニティリーダーへ

LikePayは、Webflowから日本のコミュニティリーダーとして公式認定された話です。

ストーリー