--- title: "#opengraph articles | Hashnode" description: "Explore 32 articles tagged #opengraph on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/opengraph" --- Tag # #opengraph 32 posts · 2 followers [TanLabs](https://hashnode.com/@tanlabs) · [Oct 28](https://hashnode.com/posts/how-to-bulk-check-open-graph-and-x-card-tags-before-you-share-a-link/6ae24e674991a03e12290905) ### [How to bulk-check Open Graph and X card tags before you share a link](https://tanlabs.hashnode.dev/how-to-bulk-check-open-graph-and-x-card-tags-before-you-share-a-link?utm_source=hashnode&utm_medium=feed) You ship a landing page, paste the link into Slack, X or LinkedIn, and the preview shows the wrong title, a cropped image, or nothing at all. Usually the cause is one of a handful of meta tag problems 2 min read · [tanlabs.hashnode.dev](https://tanlabs.hashnode.dev/how-to-bulk-check-open-graph-and-x-card-tags-before-you-share-a-link?utm_source=hashnode&utm_medium=feed) [Headlark](https://hashnode.com/@headlark) · [Oct 21](https://hashnode.com/posts/og-image-not-showing-in-slack-linkedin-or-x/6ad8ca05ae1bcb1febf4b872) ### [og:image not showing in Slack, LinkedIn or X](https://headlark.hashnode.dev/og-image-not-showing-in-slack-linkedin-or-x?utm_source=hashnode&utm_medium=feed) Why a shared link shows a card with no image in Slack, LinkedIn or X, the usual causes, and how to set a working og:image in Astro, Next.js and Hugo. 6 min read · [headlark.hashnode.dev](https://headlark.hashnode.dev/og-image-not-showing-in-slack-linkedin-or-x?utm_source=hashnode&utm_medium=feed) [Abid Ali](https://hashnode.com/@abidali671) · [Oct 16](https://hashnode.com/posts/open-graph-tags-in-a-react-vite-spa-why-crawlers-see-your-app-shell-and-three-ways-to-fix-it/6ad1d8df805838e2d93d7ce3) ### [Open Graph Tags in a React + Vite SPA: Why Crawlers See Your App Shell, and Three Ways to Fix It](https://abidali671.hashnode.dev/open-graph-tags-in-a-react-vite-spa-why-crawlers-see-your-app-shell-and-three-ways-to-fix-it?utm_source=hashnode&utm_medium=feed) If you've built a single-page app with React and Vite, you've probably seen this: every link you share, whether it's /pricing, /blog/my-post or /u/someone, shows the same card. Usually it's the title 6 min read · [abidali671.hashnode.dev](https://abidali671.hashnode.dev/open-graph-tags-in-a-react-vite-spa-why-crawlers-see-your-app-shell-and-three-ways-to-fix-it?utm_source=hashnode&utm_medium=feed) [3](https://hashnode.com/posts/open-graph-tags-in-a-react-vite-spa-why-crawlers-see-your-app-shell-and-three-ways-to-fix-it/6ad1d8df805838e2d93d7ce3) [Abid Ali](https://hashnode.com/@abidali671) · [Oct 16](https://hashnode.com/posts/x-twitter-card-not-showing-summary-vs-summary-large-image-fallbacks-and-the-checks-that-actually-matter/6ad1d90a915a4a6ee827673d) ### [X (Twitter) Card Not Showing? summary vs summary\_large\_image, Fallbacks, and the Checks That Actually Matter](https://abidali671.hashnode.dev/x-twitter-card-not-showing-summary-vs-summary-large-image-fallbacks-and-the-checks-that-actually-matter?utm_source=hashnode&utm_medium=feed) You post a link on X and get one of three disappointing results: a bare URL with no card, a small square thumbnail when you wanted the big wide image, or a card with an image from three redesigns ago. 6 min read · [abidali671.hashnode.dev](https://abidali671.hashnode.dev/x-twitter-card-not-showing-summary-vs-summary-large-image-fallbacks-and-the-checks-that-actually-matter?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/x-twitter-card-not-showing-summary-vs-summary-large-image-fallbacks-and-the-checks-that-actually-matter/6ad1d90a915a4a6ee827673d) [Muhammad Tahir](https://hashnode.com/@mtahir27) · [Aug 29](https://hashnode.com/posts/programmatic-seo-engineering-dynamic-metadata-opengraph-high-performance-sitemaps/6a92992d437461193773740c) ### [Programmatic SEO Engineering: Dynamic Metadata, OpenGraph & High-Performance Sitemaps](https://mtdeveloper.hashnode.dev/programmatic-seo-engineering-dynamic-metadata-opengraph-high-performance-sitemaps?utm_source=hashnode&utm_medium=feed) This article was originally published on Muhammad Tahir's Portfolio. Introduction & Industry Context In the competitive digital landscape, organic search remains the most potent channel for sustainabl 11 min read · [mtdeveloper.hashnode.dev](https://mtdeveloper.hashnode.dev/programmatic-seo-engineering-dynamic-metadata-opengraph-high-performance-sitemaps?utm_source=hashnode&utm_medium=feed) [Syed Muhammad Ali](https://hashnode.com/@s-m-ali) · [Jul 19](https://hashnode.com/posts/open-graph-vs-twitter-cards-what-s-the-difference-2026-guide/6a5c659c713b9587e7436c41) ### [Open Graph vs Twitter Cards: What's the Difference? (2026 Guide)](https://devstacked.hashnode.dev/open-graph-vs-twitter-cards-what-s-the-difference-2026-guide?utm_source=hashnode&utm_medium=feed) A beginner-friendly guide to Open Graph and Twitter Card meta tags — what they do, how they're different, and how to add both correctly in Next.js 16. 8 min read · [devstacked.hashnode.dev](https://devstacked.hashnode.dev/open-graph-vs-twitter-cards-what-s-the-difference-2026-guide?utm_source=hashnode&utm_medium=feed) [Syed Muhammad Ali](https://hashnode.com/@s-m-ali) · [Jul 17](https://hashnode.com/posts/how-to-add-metadata-in-next-js-16-2026-beginner-s-guide/6a59b11b2f72c383f7a943b3) ### [How to Add Metadata in Next.js 16 (2026 Beginner's Guide)](https://devstacked.hashnode.dev/how-to-add-metadata-in-next-js-16-2026-beginner-s-guide?utm_source=hashnode&utm_medium=feed) Learn how to add SEO metadata in Next.js 16 App Router — static metadata, generateMetadata for dynamic pages, Open Graph, Twitter Cards, and common mistakes to avoid. 13 min read · [devstacked.hashnode.dev](https://devstacked.hashnode.dev/how-to-add-metadata-in-next-js-16-2026-beginner-s-guide?utm_source=hashnode&utm_medium=feed) [KRISHNA GUPTA](https://hashnode.com/@KrishnaGupta0405) · [Jul 11](https://hashnode.com/posts/mastering-social-media-link-previews-a-guide-to-meta-tags-and-open-graph/6a523ee389944bbfb3d4458d) ### [Mastering Social Media Link Previews: A Guide to Meta Tags and Open Graph](https://krishnagupta.hashnode.dev/mastering-social-media-link-previews-a-guide-to-meta-tags-and-open-graph?utm_source=hashnode&utm_medium=feed) Paste a link into Slack, X, LinkedIn, or WhatsApp and one of two things happens. Either a polished card appears — bold title, crisp image, a short description that makes you want to click — or you get 20 min read · [krishnagupta.hashnode.dev](https://krishnagupta.hashnode.dev/mastering-social-media-link-previews-a-guide-to-meta-tags-and-open-graph?utm_source=hashnode&utm_medium=feed) [Ken Imoto](https://hashnode.com/@kenimo49) · [May 11](https://hashnode.com/posts/og-type-double-emit-three-astro-sites/6a01d2d029173e13774891e9) ### [I Run 4 Astro Sites. 3 Shipped the Same SEO Bug for Months.](https://kenimo49.hashnode.dev/og-type-double-emit-three-astro-sites?utm_source=hashnode&utm_medium=feed) A duplicate og:type tag quietly told every social platform my blog posts were 'websites' instead of 'articles'. Here is what happened and the 30-line build check that catches it. 7 min read · [kenimo49.hashnode.dev](https://kenimo49.hashnode.dev/og-type-double-emit-three-astro-sites?utm_source=hashnode&utm_medium=feed) [Nishchay Kaushik](https://hashnode.com/@kaushiknishchay) · [Apr 18](https://hashnode.com/posts/automating-my-social-cards-satori-sharp-and-the-end-of-generic-previews/69e36f379020749e6a198ae9) ### [Automating My Social Cards: Satori, Sharp, and the End of "Generic" Previews](https://nkaushik.in/writing/automating-my-social-cards-satori-sharp-and-the-end-of-generic-previews?utm_source=hashnode&utm_medium=feed) Learn how to generate dynamic, rich Open Graph images with Satori and Sharp for your content. Move beyond generic images & automate your social cards 4 min read · [nkaushik.in](https://nkaushik.in/writing/automating-my-social-cards-satori-sharp-and-the-end-of-generic-previews?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/automating-my-social-cards-satori-sharp-and-the-end-of-generic-previews/69e36f379020749e6a198ae9)