R-styleの記事にメタ情報を付与する
R-styleの記事をObsidianでWeb Clipしようとしたときに、いくつか情報の欠落があったので、index.htmlを書き換えておく
Web Clipperへの対応（必要最低限）
記事を流し込むdivをartcleに変更する（明示的に記事の容器を示す）
meta情報をscriptで設定する
code:sample.js
// 1. スクリプトタグの作成
const metaScript = document.createElement("script")
// 2. type属性の設定
metaScript.type = 'application/ld+json';
metaScript.id = 'json-ld-data'; // 後の更新のためにIDを付与しておく
// 3. スクリプトタグに埋め込むJSON-LDデータの定義
const jsonData = [
{
"@type": "BlogPosting",
"datePublished": rdate //これは読み込んだ記事のフロントマターから取得している
}
];
// 4. JSONデータを文字列に変換してテキストノードとして追加
metaScript.textContent = JSON.stringify(jsonData);
// 5. 作成したスクリプトタグをHTMLの<head>要素に追加
document.head.appendChild(metaScript);
記事を読み込むたびに、このscriptを削除しておく
code:sample.js
// IDを使って要素を取得し、親ノードから削除する
const existingScript = document.getElementById('json-ld-data');
if (existingScript) {
existingScript.parentNode.removeChild(existingScript);
}
Geminiに提示してもらった他のプロパティの可能性
code:schema
{
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
},
"headline": "ブログ記事のタイトルをここに書く",
"description": "この記事は、〜〜について解説しています。",
"image": {
"@type": "ImageObject",
"width": 1200,
"height": 630
},
"datePublished": "2025-09-24T11:43:33+09:00",
"dateModified": "2025-09-24T14:30:00+09:00",
"author": {
"@type": "Person",
"name": "著者名"
},
"publisher": {
"@type": "Organization",
"name": "ウェブサイト名",
"logo": {
"@type": "ImageObject",
"width": 600,
"height": 60
}
}
}
![https://example.com/images/main-image.jpg",](https://example.com/images/main-image.jpg",){kind=link}
![https://example.com/logo.png",](https://example.com/logo.png",){kind=link}