{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/social-card-and-open-graph-workflow/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Social card and Open Graph workflow\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Getting social cards right involves more than writing the correct meta tags. The image dimensions, text truncation, domain display, and fallback behaviour all differ across platforms. Polypane's Meta panel generates accurate previews for each platform so you can check everything without publishing first.`), mdx(\"h2\", {\n    \"id\": \"1-open-the-meta-panel\"\n  }, `1. Open the Meta panel`), mdx(\"p\", null, `Open the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `panel`), ` and click the `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Meta`), ` tab under `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Info`), `. Polypane loads the metadata for the current page and shows a summary of key information: title, description, canonical URL, and Open Graph and Twitter/X card values.`), mdx(\"img\", {\n    src: metaOverview,\n    className: \"imgshadow\",\n    alt: \"The meta panel.\"\n  }), mdx(\"h2\", {\n    \"id\": \"2-check-for-missing-or-invalid-tags\"\n  }, `2. Check for missing or invalid tags`), mdx(\"p\", null, `Polypane lists all expected Open Graph and Twitter/X tags and flags the ones that are missing. Tags marked as required will prevent a card from rendering correctly on some platforms. Tags marked as recommended can improve how the card looks but will not break it entirely.`), mdx(\"p\", null, `Click the copy icon next to any missing tag to get a ready-to-paste HTML snippet with a suggested value filled in. For `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `og:image`), `, Polypane checks that the value is a fully qualified URL and warns you if it is not, since relative URLs are not supported by most social platforms.`), mdx(\"p\", null, `If you have duplicate tags, those are flagged here too.`), mdx(\"img\", {\n    src: missingtags,\n    className: \"imgshadow\",\n    alt: \"List of missing meta tags with copy buttons.\"\n  }), mdx(\"h2\", {\n    \"id\": \"3-review-the-social-card-previews\"\n  }, `3. Review the social card previews`), mdx(\"p\", null, `Scroll down to the social card preview section. Polypane generates pixel-perfect and character-perfect previews for the following platforms:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `𝕏 (formerly Twitter)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Facebook`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `LinkedIn`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Slack`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Discord`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Telegram`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Bluesky`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Mastodon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Threads`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `WhatsApp`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Google search result`)), mdx(\"p\", null, `Each preview renders in both light and dark mode, and the text truncation matches what the real platform shows: if text fits in the Polypane preview it fits on the live site.`), mdx(\"p\", null, `To hide platforms you do not use, click the gear icon in the social card section and toggle or reorder the previews to match the platforms your audience actually uses.`), mdx(\"h2\", {\n    \"id\": \"4-test-with-your-real-domain\"\n  }, `4. Test with your real domain`), mdx(\"p\", null, `If you are working on localhost, the previews will show `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `localhost`), ` as the domain, which is not what visitors will see. Enter your real domain in the `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Domain override`), ` field at the top of the social card section. You can type just the domain like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `example.com`), ` or a full URL. All previews update immediately.`), mdx(\"h2\", {\n    \"id\": \"5-open-the-platform-debuggers\"\n  }, `5. Open the platform debuggers`), mdx(\"p\", null, `For 𝕏, Facebook and LinkedIn, Polypane shows a button that opens the platform's official card debugger in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `Browse panel`), ` with your current URL pre-filled. Use these to clear the platform's cache after you push changes or to confirm your card is indexed correctly.`), mdx(\"h2\", {\n    \"id\": \"6-screenshot-the-previews\"\n  }, `6. Screenshot the previews`), mdx(\"p\", null, `Click the camera icon above any preview to take a screenshot of it at the correct dimensions. Use these to share proposed card designs with stakeholders or to document the current state before making changes.`), mdx(\"h2\", {\n    \"id\": \"see-also\"\n  }, `See also`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel`), ` for the full list of checks and previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `Browse panel`), ` for loading the platform debuggers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/making-screenshots/\"\n  }), `Making screenshots`), ` to capture previews as images`)), mdx(\"h3\", {\n    \"id\": \"from-the-blog\"\n  }, `From the blog`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/blog/where-to-put-text-so-it-doesnt-overlap-in-the-new-x-twitter-preview/\"\n  }), `Where to put text so it doesn't overlap in the new X (Twitter) preview`), `: the safe zone dimensions for X card images and where text gets clipped`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Getting social cards right involves more than writing the correct meta tags. The image dimensions, text truncation, domain display, and…","frontmatter":{"title":"Social card and Open Graph workflow","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Workspace management","nextSlug":"/docs/workspace-management/","prevTitle":"Team workflows","prevSlug":"/docs/team-workflows/","slug":"/docs/social-card-and-open-graph-workflow/","date":null,"ogFileName":"social-card-and-open-graph-workflow"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/social-card-and-open-graph-workflow/"}},"staticQueryHashes":["4164364741","425175329"]}