見出し画像

[Futter web]URLを貼り付けた時にwebアプリのタイトルや画像を表示する方法

チンプー@GAFAMエンジニア

Flutterで開発したWebアプリをリリースすると、SNSなどで宣伝してユーザーにアプリを使ってもらいたいですよね。
ただ、URLを貼ってもwebアプリの説明文や画像が表示されなかったりする場合はOGPの設定が必要となりますし、Twitterでこれらを表示するにはTwitterカードの設定もいります。
その設定方法について解説したいと思います！


OGPとは？

そもそもOGPとは何でしょうか？？
Open Graph Protocol (OGP) は、Webアプリの情報をよりリッチで視覚的に引き立つ形で共有するためのプロトコルです。
これは主にソーシャルメディアプラットフォーム（Facebook, Twitterなど）において、Webアプリが共有されたときにその内容をユーザーに示すために使用されます。
OGPを利用すると、ページのタイトル、説明、URL、ページタイプ、イメージURLなどを指定することができます。これにより、URLだけでなくページの見出しやイメージ、短い説明なども含めて情報を共有することができます。
OGPはHTMLの<meta>タグを使用して情報を設定します。
一般的な設定方法は以下のとおり。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="イメージのURL" />
<meta property="og:url" content="ページのURL" />

これらのタグをウェブページのHTML内の<head>タグの中に配置します。
この<meta>タグはメタデータを表しており、説明は後述します。

メタデータとは？

メタデータとは、他のデータを説明するためのデータで、ウェブのコンテキストでは通常、ウェブページの内容を説明するための情報を指します。メタデータはHTMLの<meta>タグを使用して設定され、通常は<head>タグの中に置かれます。これにより、検索エンジンやソーシャルメディアプラットフォームなどのウェブクローラーがページの内容を理解するのに役立ちます。

メタデータの例：

<meta name="description" content="ページの短い説明" />
<meta name="keywords" content="キーワード1, キーワード2" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

前述したOGPは、メタデータの特定の形式の一つであり、特にソーシャルメディアにおける情報の共有に重点を置いています。

Twitterカードとは？

Twitterカードはウェブページの内容をリッチな形式で共有するためのTwitterの仕組みです。ウェブページがTwitterにリンクとして投稿されると、Twitterカードのメタデータを読み取り、そのページの内容を要約した情報や画像を表示します。これにより、ユーザーはリンク先を訪れる前にその内容を理解することができます。

OGPとTwitterカードの設定手順

それではFlutter webにおけるOGPとTwitterカードの設定手順についてご紹介します。
Flutterプロジェクトのweb/index.htmlに移動します。
<head> </head> 要素の中に、 <!-- OGP -->や<!-- Twitter Card -->と書かれている部分のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <!-- OGP -->
  <meta property="og:type" content="ページの種類を定義">
  <meta property="og:title" content="アプリのタイトル">
  <meta property="og:description" content="アプリの説明">
  <meta property="og:image" content="アプリのサムネイルの画像URL">
  <meta property="og:url" content="アプリのURL">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="cardの種類を定義">
  <meta name="twitter:site" content="@ツイッターアカウント名">
  <meta name="twitter:title" content="アプリのタイトル">
  <meta name="twitter:description" content="アプリの説明">
  <meta name="twitter:image" content="アプリのサムネイルの画像URL">
  <!-- ... -->
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

それぞれのタグについての説明です。

OGP

"og:type"
ページの種類（ウェブサイト、ビデオ、音楽など）を定義

"og:title"
アプリのタイトル

"og:description"
アプリの簡単な説明

"og:image"
アプリの画像（サムネイル）を設定。
自分はAWSのs3バケットにアプリの画像を保存しているので、オブジェクトのURLをここに貼り付けて使用しています。

"og:url"
アプリのURL

Twitter Card

"twitter:card"
URLを貼ったときに表示したいカードの種類を示します。
Twitterカードの種類は以下のようなものがあります。

  1. summary: 最も基本的なタイプで、タイトル、説明、そしてサムネイル画像を表示します。ブログ記事やニュース記事など、テキスト情報が中心のウェブページに適しています。

  2. summary_large_image: summaryカードと同様にタイトルと説明を表示しますが、こちらは大きなサムネイル画像を含むため、視覚的なインパクトが大きいです。視覚的な情報が重要なウェブページや、写真やイラストがメインの記事に適しています。

それぞれのカードの適正サイズについては、以下のサイトが参考になりました。


"twitter:site"
Twitterのユーザーアカウント名

"twitter:title"
アプリのタイトル

"twitter:description"
アプリの簡単な説明

"twitter:image"
アプリの画像（サムネイル）を設定


OGPが設定できているかを確認するには、以下のサイトが便利です。

また、Twitter用に画像サイズを成形するにはcanvaが使いやすかったです。

https://www.canva.com/


この記事が気に入ったらサポートをしてみませんか？