"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "never-heard-of-website-metadata", "hProperties": { "id": "never-heard-of-website-metadata" } }, "depth": 2, "value": "Never heard of website metadata?" }, { "data": { "id": "setting-up-open-graph-metadata", "hProperties": { "id": "setting-up-open-graph-metadata" } }, "depth": 2, "value": "Setting up Open Graph metadata" }, { "data": { "id": "setting-up-twitter-cards-metadata", "hProperties": { "id": "setting-up-twitter-cards-metadata" } }, "depth": 2, "value": "Setting up Twitter Cards metadata" }, { "data": { "id": "closing-notes", "hProperties": { "id": "closing-notes" } }, "depth": 2, "value": "Closing notes" }]; const readingTime = { "minutes": 3, "words": 877, "text": "3 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: "introduction", children: ["Introduction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "When you share a link to your website on social media, you want it to look good. Instead of just showing a plain link, you want to show a beautiful preview with all the necessary metadata like title, description, and image. This is where Open Graph and Twitter (now X) Cards metadata come in." }), "\n", _jsxs(_components.p, { children: ["In this article, we will show you how to set up Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") and Twitter Cards metadata for your website. We will also show you how to test your metadata to make sure it looks good on social media."] }), "\n", _jsxs(_components.h2, { id: "never-heard-of-website-metadata", children: ["Never heard of website metadata?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#never-heard-of-website-metadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "When a human visits a website, they see the content rendered by the browser. But when a bot (like a search engine crawler or a social media scraper) visits a website, it only sees the raw HTML. Website metadata now kicks in to provide structured information about the website to the bot, that it can use to render a structured output, like a preview card." }), "\n", _jsxs(_components.p, { children: ["If you right-click on a website and select \"View Page Source\", you will see the raw HTML of the website. The metadata is usually included in the ", _jsx(_components.code, { children: "" }), " section of the HTML, and it looks something like this:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "The above code is self-explanatory: the title of the website is \"My Website\" and the description is \"This is my website.\"." }), "\n", _jsxs(_components.p, { children: ["You may notice the ", _jsx(_components.code, { children: "og:" }), " prefix in the metadata, which stands for ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph is a protocol developed by Facebook to provide structured information about a website. Twitter (now X) also has its own metadata protocol, called Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "setting-up-open-graph-metadata", children: ["Setting up Open Graph metadata", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#setting-up-open-graph-metadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Some of the most common Open Graph metadata tags are:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": The name of the website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": The title of the current page."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": A short description of the website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": The URL of the image to be displayed."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": The ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "canonical URL" }), " of the website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": The type of the website (e.g., website, article, video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["The difference between ", _jsx(_components.code, { children: "og:title" }), " and ", _jsx(_components.code, { children: "og:site_name" }), " is that ", _jsx(_components.code, { children: "og:title" }), " is the title of the current page (e.g. the blog post title), while ", _jsx(_components.code, { children: "og:site_name" }), " is the name of the website (e.g. the blog name). If you check the source code of this page, you will see the following Open Graph metadata:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Since we have ", _jsx(_components.code, { children: "og:type" }), " set to ", _jsx(_components.code, { children: "article" }), ", additional metadata like author and publication date can be added. For example, if you want to add the tags for a blog post, you can add the following metadata:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph specifies that if you want to add multiple values, you should use multiple ", _jsx(_components.code, { children: "" }), " tags with the same property name."] }), "\n", _jsxs(_components.p, { children: ["After adding the Open Graph metadata to your website, you can test it using the ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Just enter the URL of your website and click \"Debug\". If there are any issues with the metadata, the debugger will show you the errors."] }), "\n", _jsxs(_components.p, { children: ["Here's an example of our blog post ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "When should I use JWTs?" }), " in the Facebook Sharing Debugger:"] }), "\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 Debugger" }) }), "\n", _jsxs(_components.h2, { id: "setting-up-twitter-cards-metadata", children: ["Setting up Twitter Cards metadata", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#setting-up-twitter-cards-metadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Twitter Cards are similar to Open Graph metadata, but they have ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "their own conventions" }), ". There are four types of Twitter Cards:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Summary Card: A card with a title, description, and thumbnail." }), "\n", _jsx(_components.li, { children: "Summary Card with Large Image: A card with a title, description, and large image." }), "\n", _jsx(_components.li, { children: "App Card: A card for promoting mobile apps." }), "\n", _jsx(_components.li, { children: "Player Card: A card for video and audio content." }), "\n"] }), "\n", _jsx(_components.p, { children: "For our blog post, we will use the Summary Card with Large Image. The Twitter Cards metadata for the blog post will look like this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "The two main differences from Open Graph metadata are:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "twitter:card" }), " tag is required and specifies the type of card."] }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "twitter:site" }), " tag specifies the Twitter handle of the website."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["There was a ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter Card Validator" }), " available, however, the preview feature has been moved Tweet Composer (better than nothing, though)."] }), "\n", _jsxs(_components.h2, { id: "closing-notes", children: ["Closing notes", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#closing-notes", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Setting up Open Graph and Twitter Cards metadata for your website is easy yet useful. People love images, and a beautiful preview card can attract more attention to your website. Wish you good luck with your website and happy sharing!" })] }); } 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 };