Zenn
🙆

ツイートした画像をAI学習されたくない？ なら、別のサイトに置いた画像を埋め込めば良いんじゃない？

2024/10/20に公開
Twitter
Bluesky
tech

はじめに

ということで。
11月の中頃から、規約変更でTwitterに投降した画像がAIの学習対象になるという話題が流れて来ました。

個人的には、別に学習されても困りはしないのですが（と言うか、下手すぎて、絵柄が安定しないんですよね）。
でも、別に、画像を埋め込めば良いだけなので、簡単なのでは？　と思ったので、ちょっと色々試してみました。

Twitter サンプル

https://x.com/ryuuri_tweet/status/1847959866146717874

貼り付けたURL

https://ryuuri.jp/photos/20240905_205334_1920x1440.html

https://ryuuri.jp/photos/20240905_205334_1920x1440.html

HTMLの内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.jpg">
<meta name="twitter:url" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.html">
<meta name="twitter:title" content="２０２４年の月見バーガー(倍)">
<meta name="twitter:description" content="２０２４年の月見バーガー(倍)の写真です。２種類を購入しました。">
<title>２０２４年の月見バーガー(倍)</title>
<style>
  .cute-header {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
    color: #003060; /* 文字色 */
  }
  .cute-text {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 20px; /* 文字サイズ */
    color: #003060; /* 文字色 */
    border-radius: 10px; /* 角の丸み */
  }
  body {
    background-color: #F0FFFF
  }
</style>
</head>
<body>
<h1 class="cute-header">２０２４年の月見バーガー(倍)</h1>

<hr>
<div class="cute-text">
芳醇ふわとろ月見の倍バーガーと、チーズ月見バーガー。
</div>
<hr>

<img src="20240905_205334_orig.jpg" width="100%">
</body>
</html>

metaタグの説明

  • <meta name="twitter:card" content="summary_large_image">
    • 固定。基本的に、このままです。
  • <meta name="twitter:image:src" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.jpg">
    • Twitterに埋め込みたい画像のURLを入れます。
  • <meta name="twitter:url" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.html">
    • 元の画像を使っているページのURLを指定します。
  • <meta name="twitter:title" content="２０２４年の月見バーガー(倍)">
    • 画像のタイトルを指定します(本来はページのタイトルを入れる箇所ですね)。
  • <meta name="twitter:description" content="２０２４年の月見バーガー(倍)の写真です。２種類を購入しました。">
    • 詳細を記述します。元々は、ページの概略を書く場所です。

この５つのmetaタグを HEAD部に入れれば、twitterがtwitter:image:srcで指定したURLの画像を埋め込んで表示してくれます。
いくつか注意点があります。

  • タグは５つとも必ず入れ必要があります。省くと上手く表示されません。
    • descriptionとか要らんやろ、と省いたら、表示されなくなりました 笑
  • 画像は jpg か png だそうです。（今は jpg でしか試していません)
  • あまり小さな画像だと、うまく動作しません。
    • 480x360では、表示されました。320x240だと表示されませんでした。
  • twitter では表示できますが、blueskyやZennでは表示できません。

ということで、bluesky編に行きます。

blueskyサンプル

https://bsky.app/profile/ryuuri.bsky.social/post/3l6wvap3sfz2g

Zennが、blueskyをうまく埋め込んでくれませんね。
下に画像で貼っておきます。

貼り付けたURL (Bluesky版)

https://ryuuri.jp/photos/20240905_205334_1920x1440_blue.html

https://ryuuri.jp/photos/20240905_205334_1920x1440_blue.html

こちらだと、Zennでも画像が埋め込まれますね。

HTMLの内容 (Bluesky版)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.jpg">
<meta name="twitter:url" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.html">
<meta name="twitter:title" content="２０２４年の月見バーガー(倍)">
<meta name="twitter:description" content="２０２４年の月見バーガー(倍)の写真です。２種類を購入しました。">

<meta property="og:title" content="２０２４年の月見バーガー(倍)">
<meta property="og:image" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.jpg">
<meta property="og:type" content="photo">
<meta property="og:url" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.html">
<meta property="og:site_name" content="ryuuri.jp">
<title>２０２４年の月見バーガー(倍)</title>
<style>
  .cute-header {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
    color: #003060; /* 文字色 */
  }
  .cute-text {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 20px; /* 文字サイズ */
    color: #003060; /* 文字色 */
    border-radius: 10px; /* 角の丸み */
  }
  body {
    background-color: #F0FFFF
  }
</style>
</head>
<body>
<h1 class="cute-header">２０２４年の月見バーガー(倍)</h1>

<hr>
<div class="cute-text">
芳醇ふわとろ月見の倍バーガーと、チーズ月見バーガー。
</div>
<hr>

<img src="20240905_205334_orig.jpg" width="100%">
</body>
</html>

og: のmetaタグが増えた以外は、twitterのものと同じです。

metaタグの説明 (bluesky)

  • <meta property="og:title" content="２０２４年の月見バーガー(倍)">
    • 画像のタイトルを記述します。
  • <meta property="og:image" content="https://ryuuri.jp/photos/20240905_205334_1920x1440.jpg">
    • 「Blueskyに埋め込みたい画像」のURLを記述します。
  • <meta property="og:type" content="photo">
    • あまり、厳密な解釈はされないようです。(本当はphotoというtypeはありません)
    • 正式な説明は、https://ogp.me/#types を参照してください。
  • <meta property="og:url" content="https://ryuuri.jp/photos/20240905_205334_1920x1440_blue.html">
    • 元の画像を使っているページのURLを指定します。
  • <meta property="og:site_name" content="ryuuri.jp">
    • サイトの名前を設定します。

Discussion