"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "イントロダクション", "hProperties": { "id": "イントロダクション" } }, "depth": 2, "value": "イントロダクション" }, { "data": { "id": "web-サイト-メタデータを聞いたことがありませんか", "hProperties": { "id": "web-サイト-メタデータを聞いたことがありませんか" } }, "depth": 2, "value": "Web サイトメタデータを聞いたことがありませんか？" }, { "data": { "id": "open-graph-メタデータの設定", "hProperties": { "id": "open-graph-メタデータの設定" } }, "depth": 2, "value": "Open Graph メタデータの設定" }, { "data": { "id": "twitter-カード-メタデータの設定", "hProperties": { "id": "twitter-カード-メタデータの設定" } }, "depth": 2, "value": "Twitter カードメタデータの設定" }, { "data": { "id": "終わりのメモ", "hProperties": { "id": "終わりのメモ" } }, "depth": 2, "value": "終わりのメモ" }]; const readingTime = { "minutes": 2, "words": 569, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "イントロダクション", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#イントロダクション", children: _jsx(_components.span, { children: "#" }) }), "イントロダクション"] }), "\n", _jsx(_components.p, { children: "ウェブサイトへのリンクをソーシャルメディアで共有するとき、それを美しく見せたいものです。単なるプレーンなリンクを表示するのではなく、タイトル、説明、画像などの必要なメタデータを組み込んだ美しいプレビューを表示したいです。ここで Open Graph と Twitter（現在は X）カードメタデータが役立ちます。" }), "\n", _jsxs(_components.p, { children: ["この記事では、Web サイトに Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") と Twitter カードメタデータを設定する方法を示します。また、メタデータがソーシャルメディア上でどのように表示されるかをテストする方法も示します。"] }), "\n", _jsxs(_components.h2, { id: "web-サイト-メタデータを聞いたことがありませんか", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#web-サイト-メタデータを聞いたことがありませんか", children: _jsx(_components.span, { children: "#" }) }), "Web サイトメタデータを聞いたことがありませんか？"] }), "\n", _jsx(_components.p, { children: "人間がウェブサイトを訪れると、ブラウザによってレンダリングされたコンテンツが表示されます。しかし、検索エンジンクローラーやソーシャルメディアスクレーパーのようなボットがウェブサイトを訪れると、生の HTML しか見えません。ここで Web サイトメタデータが介入し、ボットに構造化情報を提供し、プレビューカードのような構造化された出力をレンダリングするための情報を提供します。" }), "\n", _jsxs(_components.p, { children: ["ウェブサイトを右クリックして「ページのソースを表示」を選択すると、ウェブサイトの生の HTML が表示されます。メタデータは通常 HTML の ", _jsx(_components.code, { children: "" }), " セクションに含まれており、次のようになります:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "上記のコードは自明です：Web サイトのタイトルは \"私のウェブサイト\" で、説明は \"これは私のウェブサイトです。\" です。" }), "\n", _jsxs(_components.p, { children: ["メタデータに ", _jsx(_components.code, { children: "og:" }), " プレフィックスが付いていることに気づくかもしれません。これは ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), " を表しています。Open Graph は Facebook が開発したプロトコルで、Web サイトに関する構造化情報を提供します。Twitter（現在は X）には、Twitter Cards と呼ばれる独自のメタデータプロトコルもあります。"] }), "\n", _jsxs(_components.h2, { id: "open-graph-メタデータの設定", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#open-graph-メタデータの設定", children: _jsx(_components.span, { children: "#" }) }), "Open Graph メタデータの設定"] }), "\n", _jsx(_components.p, { children: "最も一般的な Open Graph メタデータタグのいくつかは次のとおりです:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": ウェブサイトの名前。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": 現在のページのタイトル。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": ウェブサイトの簡単な説明。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": 表示する画像の URL。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": ウェブサイトの ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "正規 URL" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": ウェブサイトのタイプ（例：ウェブサイト、記事、ビデオ）。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "og:title" }), " と ", _jsx(_components.code, { children: "og:site_name" }), " の違いは、", _jsx(_components.code, { children: "og:title" }), " が現在のページのタイトル（例：ブログ記事のタイトル）であり、", _jsx(_components.code, { children: "og:site_name" }), " はウェブサイトの名前（例：ブログの名前）であるということです。このページのソースコードをチェックすると、次の Open Graph メタデータを確認できます:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "og:type" }), " を ", _jsx(_components.code, { children: "article" }), " に設定しているため、著者や公開日などの追加メタデータを追加できます。たとえば、ブログ記事のタグを追加したい場合、次のメタデータを追加できます:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph では、複数の値を追加したい場合、同じプロパティ名で複数の ", _jsx(_components.code, { children: "" }), " タグを使用する必要があると指定されています。"] }), "\n", _jsxs(_components.p, { children: ["ウェブサイトに Open Graph メタデータを追加した後、", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook シェアリングデバッガー" }), " を使用してテストできます。ただ URL を入力して「デバッグ」をクリックしてください。メタデータに問題がある場合、デバッガーがエラーを表示します。"] }), "\n", _jsxs(_components.p, { children: ["Facebook シェアリングデバッガーでのブログ記事 ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "JWT を使用すべきとき？" }), " の例を次に示します:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Facebook デバッガー" }) }), "\n", _jsxs(_components.h2, { id: "twitter-カード-メタデータの設定", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#twitter-カード-メタデータの設定", children: _jsx(_components.span, { children: "#" }) }), "Twitter カードメタデータの設定"] }), "\n", _jsxs(_components.p, { children: ["Twitter Cards は Open Graph メタデータと似ていますが、", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "独自の規則" }), " があります。Twitter Cards には 4 つのタイプがあります:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "サマリーカード: タイトル、説明、サムネイルを含むカード。" }), "\n", _jsx(_components.li, { children: "大きな画像付きサマリーカード: タイトル、説明、大きな画像を含むカード。" }), "\n", _jsx(_components.li, { children: "アプリカード: モバイルアプリのプロモートに使用するカード。" }), "\n", _jsx(_components.li, { children: "プレイヤーカード: ビデオおよびオーディオコンテンツのカード。" }), "\n"] }), "\n", _jsx(_components.p, { children: "ブログ記事には、大きな画像付きサマリーカードを使用します。ブログ記事の Twitter カードメタデータは次のようになります:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Open Graph メタデータと異なる主な点は次のとおりです:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:card" }), " タグは必須で、カードの種類を指定します。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:site" }), " タグはウェブサイトの Twitter ハンドルを指定します。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter カードバリデーター" }), " が利用可能でしたが、プレビュー機能は Tweet Composer に移行されました（それでも何もないよりはましです）。"] }), "\n", _jsxs(_components.h2, { id: "終わりのメモ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#終わりのメモ", children: _jsx(_components.span, { children: "#" }) }), "終わりのメモ"] }), "\n", _jsx(_components.p, { children: "Web サイトに Open Graph と Twitter Cards メタデータを設定するのは簡単ですが、有用です。人々は画像が好きで、美しいプレビューカードはあなたの Web サイトにより多くの注目を集めることができます。Web サイトの成功と共有を楽しみにしています！" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };