Inautilo<p><a href="https://mastodon.social/tags/Business" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Business</span></a> <a href="https://mastodon.social/tags/Experiences" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Experiences</span></a><br>They want how much for an OG image? · Open Graph images can be risky for small websites <a href="https://ilo.im/165kj8" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/165kj8</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Copyrights" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Copyrights</span></a> <a href="https://mastodon.social/tags/Image" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Image</span></a> <a href="https://mastodon.social/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://mastodon.social/tags/SocialMedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SocialMedia</span></a> <a href="https://mastodon.social/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.social/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieWeb</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a></p>
techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome
Administered by:
Server stats:
4.6Kactive users
techhub.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.1
#opengraph
2 posts · 2 participants · 0 posts today
fracicone :verified:<p><span class="h-card" translate="no"><a href="https://front-end.social/@accudio" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>accudio</span></a></span> Feel sorry for you getting forced to pay. The concept of open graph is basic to visual sharing content not only on Facebook and twitter but also on Messengers.<br>So if your publishing of open graphs was so illegal, what about all sites using this plugin?</p><p><a href="https://wordpress.org/plugins/visual-link-preview/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">wordpress.org/plugins/visual-l</span><span class="invisible">ink-preview/</span></a><br><a href="https://mastodon.uno/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://mastodon.uno/tags/wordpress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wordpress</span></a> <a href="https://mastodon.uno/tags/wordpressplugins" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wordpressplugins</span></a> <a href="https://mastodon.uno/tags/scam" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scam</span></a> <a href="https://mastodon.uno/tags/photolicensing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>photolicensing</span></a> <a href="https://mastodon.uno/tags/photolicense" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>photolicense</span></a> <a href="https://mastodon.uno/tags/urheberrecht" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>urheberrecht</span></a></p>
🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<p>If <a href="https://mastodon.social/tags/Mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Mastodon</span></a> is going to embed <a href="https://mastodon.social/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> images (sometimes?), it should show you a preview under the form as you're writing so you know when links you are posting are going to show them or not. Other <a href="https://mastodon.social/tags/socialMedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>socialMedia</span></a> sites have done this for years, and they let you decide whether or not you want that *before* you post. This game of having to post before you can see what it's going to look like is just bad user-experience. </p><p><span class="h-card" translate="no"><a href="https://mastodon.social/@Gargron" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Gargron</span></a></span></p>
ꙮ liilliil 🇫🇯🇱🇨🇱🇧<p>О, заебись, попросил и добавили <a href="https://mastodon.online/tags/openGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>openGraph</span></a> превьюху в <a href="https://mastodon.online/tags/wanderer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wanderer</span></a>, трэк показывает как надо<br>Теперь, потихоньку, оно начинает становиться юзабельным</p><p><a href="https://demo.wanderer.to/trail/view/@liilliil/6839d04xc4rxa47" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">demo.wanderer.to/trail/view/@l</span><span class="invisible">iilliil/6839d04xc4rxa47</span></a></p>
Naty<p>Just discovered this really simple, straight-forward, and free tool that generates Open Graph images for your posts!</p><p>Works like a treat!</p><p><a href="https://ogimagemaker.com" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ogimagemaker.com</span><span class="invisible"></span></a></p><p>Then I discovered another, more comprehensive, og tool called ogplayground. Also really cool!</p><p><a href="https://github.com/Mr-Sunglasses/ogplayground" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/Mr-Sunglasses/ogpla</span><span class="invisible">yground</span></a></p><p>I recently wrote a blog on Open Graph & how I got mine working on <a href="https://fosstodon.org/tags/Hugo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Hugo</span></a> and <a href="https://fosstodon.org/tags/WordPress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WordPress</span></a>, check it out if you're interested in fixing your site!</p><p>➡️<a href="https://www.burgeonlab.com/blog/hugo-and-wordpress-open-graph-meta-tags/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">burgeonlab.com/blog/hugo-and-w</span><span class="invisible">ordpress-open-graph-meta-tags/</span></a></p><p><a href="https://fosstodon.org/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://fosstodon.org/tags/ogimage" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ogimage</span></a> <a href="https://fosstodon.org/tags/seo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>seo</span></a> <a href="https://fosstodon.org/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://fosstodon.org/tags/freesoftware" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>freesoftware</span></a></p>
Naty<p>New <a href="https://fosstodon.org/tags/blogpost" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blogpost</span></a></p><p>➡️ <a href="https://www.burgeonlab.com/blog/hugo-and-wordpress-open-graph-meta-tags/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">burgeonlab.com/blog/hugo-and-w</span><span class="invisible">ordpress-open-graph-meta-tags/</span></a></p><p>I often see bloggers on Mastodon with no images for their blog links or sometimes no link card at all (this was me not too long ago).</p><p>I've been sorting out Open Graph meta tags for my three blogs (Hugo and WordPress) and I'm happy to say it's all working great now! Read my post to get some tips! 👆 </p><p><a href="https://fosstodon.org/tags/BurgeonLab" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BurgeonLab</span></a><br><a href="https://fosstodon.org/tags/blog" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blog</span></a> <a href="https://fosstodon.org/tags/blogging" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blogging</span></a> <a href="https://fosstodon.org/tags/blogs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blogs</span></a> <a href="https://fosstodon.org/tags/hugo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hugo</span></a> <a href="https://fosstodon.org/tags/wordpress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wordpress</span></a> <a href="https://fosstodon.org/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://fosstodon.org/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a></p>
Stefan Metze<p>Ein Testpost. Ich aktualisiere auf meiner <a href="https://mastodon.social/tags/astro" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>astro</span></a> Webseite gerade mal die ganzen Meta-Tags. Auch die die für <a href="https://mastodon.social/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a> und TwitterCards zuständig sind. Wenn also alles glatt läuft ist hier jetzt eine anständige Artikelvorschau zu sehen.<br><a href="https://www.stefan-metze.com/blog/eine-runde-newyork/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">stefan-metze.com/blog/eine-run</span><span class="invisible">de-newyork/</span></a></p>
Cadu Silva :v_white:<p>As search engines are useless now, I'll <a href="https://bolha.one/tags/AskFedi" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AskFedi</span></a> instead:</p><p>I'd like to know how to make Eleventy grab the first image in a blog post and then return the image path, so I could use something like {{ socialimg }} as the og:image meta tag?</p><p><a href="https://bolha.one/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Eleventy</span></a> <a href="https://bolha.one/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>11ty</span></a> <a href="https://bolha.one/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a></p>
Naty<p>I think I discovered a bug on <span class="h-card" translate="no"><a href="https://mastodon.social/@Mastodon" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Mastodon</span></a></span>. With <a href="https://fosstodon.org/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a> tags correctly set (image, title, description, site-name, url), the post shows up with: image, site-name, title (of post), description on Mastodon desktop browser.</p><p>But after adding the meta tag `fediverse:creator`, the description disappears and shows a banner at the bottom of the card "More from username". Is that on purpose? Can the og:description remain despite adding the fediverse:creator tag?</p><p>Thanks!</p><p><a href="https://fosstodon.org/tags/fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fediverse</span></a> <a href="https://fosstodon.org/tags/bug" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>bug</span></a> <a href="https://fosstodon.org/tags/mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mastodon</span></a></p>
WBCOM DESIGNS<p>📢 Woo Open Graph v2.0.0 is out now!<br>A complete overhaul with a modern UI, faster load times, advanced share buttons, product-level SEO controls, and full Pinterest, LinkedIn & Twitter meta support.</p><p>👉 Check the full changelog : <a href="https://wbcomdesigns.com/changelog/woo-open-graph-v2-0-0/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">wbcomdesigns.com/changelog/woo</span><span class="invisible">-open-graph-v2-0-0/</span></a></p><p>✅ Optimized for performance, accessibility & mobile.</p><p><a href="https://me.dm/tags/WooCommerce" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WooCommerce</span></a> <a href="https://me.dm/tags/Plugin" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Plugin</span></a> <a href="https://me.dm/tags/Update" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Update</span></a> <a href="https://me.dm/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://me.dm/tags/WordPress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WordPress</span></a> <a href="https://me.dm/tags/SEO" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SEO</span></a> <a href="https://me.dm/tags/Social" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Social</span></a> <a href="https://me.dm/tags/Sharing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sharing</span></a> <a href="https://me.dm/tags/Pinterest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Pinterest</span></a> <a href="https://me.dm/tags/eCommerce" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>eCommerce</span></a></p>
Naty<p><span class="h-card" translate="no"><a href="https://fosstodon.org/@joel" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>joel</span></a></span> Thanks Joel, yeah <a href="https://fosstodon.org/tags/hugo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hugo</span></a> has served me really well. I don't know what will happen to my websites but I'll definitely be posting about it if something big happens like consolidation! P.S. I just updated my <a href="https://fosstodon.org/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a> tags on this deploy and they're working! Yay🎉</p>
Anthony Sorace<p>Am I correct that Open Graph has no ability to address things at finer granularity than a page? So if you have multiple articles (either in the html <article> sense, or the common english sense), you’re just sort of out of luck?<br><a href="https://pdx.social/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a></p>
blog2social<p>👀 Deine Linkvorschau entscheidet, ob jemand klickt.</p><p>Mit Open Graph Tags steuerst Du Bild, Titel & Text.👇</p><p><a href="https://mastodon.social/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://mastodon.social/tags/ContentTipps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContentTipps</span></a> </p><p><a href="https://www.blog2social.com/de/blog/open-graphs-so-steigerst-du-dein-social-media-engagement/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">blog2social.com/de/blog/open-g</span><span class="invisible">raphs-so-steigerst-du-dein-social-media-engagement/</span></a></p>
TCC Partners Agency<p>Giải thích về Open Graph là gì và tác dụng của nó trong SEO<br>> Xem thêm: <a href="https://tcc-agency.com/open-graph-la-gi/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">tcc-agency.com/open-graph-la-g</span><span class="invisible">i/</span></a><br>> Website: <a href="https://tcc-agency.com/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">tcc-agency.com/</span><span class="invisible"></span></a><br><a href="https://mastodon.social/tags/tccagency" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tccagency</span></a> <a href="https://mastodon.social/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a> <a href="https://mastodon.social/tags/seo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>seo</span></a><br>Xem thêm:<br><a href="https://www.pinterest.com/pin/1023513452830143695" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">pinterest.com/pin/102351345283</span><span class="invisible">0143695</span></a><br><a href="https://flipboard.social/@tccpartnersagency/114662993260355531" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">flipboard.social/@tccpartnersa</span><span class="invisible">gency/114662993260355531</span></a><br><a href="https://myspace.com/tccpartnersagency/mixes/streammix-737358/photo/374737791" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">myspace.com/tccpartnersagency/</span><span class="invisible">mixes/streammix-737358/photo/374737791</span></a></p>
linuxmanr4<p>De esos bugs difíciles de encontrar ...<br><a href="https://mastodon.social/tags/whatsapp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>whatsapp</span></a> <a href="https://mastodon.social/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a></p><p><a href="https://linuxmanr4.com/2025/05/30/whatsapp-open-graph-comillas/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">linuxmanr4.com/2025/05/30/what</span><span class="invisible">sapp-open-graph-comillas/</span></a></p>
Jeremy Herve<blockquote><p>Here’s my suggestion. When the user specifies a <a href="https://wordpress.com/support/featured-images/" rel="nofollow noopener" target="_blank">featured image</a> for a post, set the og:image element in the head section of the page. When they don’t specify such an image, omit that element.</p><p><a href="http://scripting.com/2025/06/02/131444.html#a132153" rel="nofollow noopener" target="_blank">http://scripting.com/2025/06/02/131444.html#a132153</a></p></blockquote><p><a rel="nofollow noopener" class="u-url mention" href="https://mastodon.social/@davew" target="_blank">@davew</a> We’ve gone back and forth on this over the years. It can be a bit tricky.</p><p>Our first implementation worked just like your suggestion, and like on your site right now. It worked reasonably well, but some social networks (namely Facebook) look for images in the page’s HTML whenever no <code>og:image</code> tag is found. And at that point, you have no control over what Facebook picks up ; it may be a image in the footer of the page, a still from an embed, or any other image it would pick up from the post, your sidebar, or your footer.</p><p>Folks were understandably not happy to see Facebook pick up random images from their site, so we decided to add that fallback ; when no image is found in the post, we try to find a representative image from the site to offer instead. We look for a site logo, a site icon, a blank image, or a custom fallback image that can be provided.</p><p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://herve.bzh/t/en/" target="_blank">#EN</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://herve.bzh/t/open-graph/" target="_blank">#OpenGraph</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://herve.bzh/t/wordpress/" target="_blank">#WordPress</a></p>
NeuroWinter<p>Pretty happy with how I’m generating OG images for quotes on ArmitagesArchive.com.</p><p>I designed an SVG in Inkscape, swapped the text for HEEx vars, and used Elixir to render one SVG per highlight.</p><p>Then I convert them to PNGs using resvg (fast, handles fonts well), and rsync them to prod.</p><p>It’s not fully automated yet — still thinking through how to make that part safe and clean. But overall, it works, and it looks the way I want: clean, no fluff, author credited.</p><p>PR: <a href="https://github.com/NeuroWinter/armitagesarchive/pull/21/files" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/NeuroWinter/armitag</span><span class="invisible">esarchive/pull/21/files</span></a><br><a href="https://tilde.zone/tags/ElixirLang" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ElixirLang</span></a> <a href="https://tilde.zone/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://tilde.zone/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieWeb</span></a> <a href="https://tilde.zone/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://tilde.zone/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://tilde.zone/tags/SelfHosted" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SelfHosted</span></a> <a href="https://tilde.zone/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> <a href="https://tilde.zone/tags/Inkscape" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Inkscape</span></a></p>
Daniel Lyons<p>My <a href="https://iosdev.space/tags/opengraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opengraph</span></a> social previews are failing to be parsed on <a href="https://iosdev.space/tags/mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mastodon</span></a> but not on other sites. Must be an issue in my <a href="https://iosdev.space/tags/hugo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hugo</span></a> setup. Have to troubleshoot this later.</p>
@reiver ⊼ (Charles) :batman:<p>"Understanding Mastodon Preview Card Display Logic"</p><p><a href="https://box464.com/posts/mastodon-preview-cards/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">box464.com/posts/mastodon-prev</span><span class="invisible">iew-cards/</span></a></p><p>by <span class="h-card" translate="no"><a href="https://mastodon.social/@box464" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>box464</span></a></span> </p><p><a href="https://mastodon.social/tags/DeSo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DeSo</span></a> <a href="https://mastodon.social/tags/Fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Fediverse</span></a> <a href="https://mastodon.social/tags/Mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Mastodon</span></a> <a href="https://mastodon.social/tags/OEmbed" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OEmbed</span></a> <a href="https://mastodon.social/tags/OpenGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenGraph</span></a> <a href="https://mastodon.social/tags/Twitter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Twitter</span></a> <a href="https://mastodon.social/tags/TwitterPlayer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TwitterPlayer</span></a></p>
Matthew Brown<p><strong>WishList: A proposed extension of OpenGraph</strong></p><p>I’d like to propose an extension of the OpenGraph protocol for easy wishlist creation. A select few might be aware that <a href="https://wishlist.me.lordmatt.co.uk/" rel="nofollow noopener" target="_blank">I maintain a wishlist</a>. Currently, I manually enter each gift idea into a database. It would be dead helpful, if I could just provide a link to a page that represents an item that can be given.</p><p><em>This post contains some marked-up HTML and I don’t know how it will look on federated sites. You may need to open the original page for best results.</em></p><p><strong>Existing art that might work</strong></p><p>OpenGraph pretty much has what I need already.</p> <pre><meta property="og:type" content="product.book" /></pre> <p>As far as I can tell, the list of types in the product space is as follows – album, book, drink, food, game, movie, product, song, and tv_show. Some of this maps well to gift listing.</p><ul><li><strong>album</strong> is generally a thing you can buy and, thus, gift (digital purchases and releases are a bit fuzzy)</li><li><strong>book</strong> is a thing you can buy (includes ebooks or all kinds)</li><li><strong>drink</strong> is probably a thing you can buy or, sometimes, make</li><li><strong>food</strong> can be a thing you buy as a gift but is not strictly limited to that</li><li><strong>game</strong> is largely a thing that one can gift but exceptions apply</li><li><strong>movie</strong> is a thing you can watch but might map to DVD or Blueray which can be gifted</li><li><strong>product</strong> (product.product) is generic and is probably giftable</li><li><strong>song</strong> is something you listen to but might map to CD or digital for a given single</li><li><strong>tv_show</strong> is something you watch but could map to Box Set (DVD/Blueray/etc.)</li></ul><p>However, there are some giftable things that do not fit well within the defined product types.</p><ul><li>A <strong>custom voucher</strong> for a favour like babysitting, housework, a shoulder massage, and other no-spend gifts.</li><li><strong>Something that you could make</strong> such as a cake, cookies, pie, a custom set of shelves, a <a href="https://matrixdreams.com/blog/tag/gwl/" rel="nofollow noopener" target="_blank">GWL card</a>, and so much more.</li><li>The <strong>clarity</strong> that the product in question is something that can conceptually be given. Perhaps in a given format or media.</li></ul><p><strong>I considered adding one more product value</strong></p><p>To the product types, I would like to add something that indicates the thing that can be given. The simplest version of that is probably “gift” or “giftidea”. It would set the page as a thing that a person can gift to another. Which would make it ideal for wishlists. Something like this:</p> <pre><meta property="og:type" content="product.gift" /></pre> <p>This is not entirely a good fit. “Product” as a gift is conceptually a little narrow and is a bit too abstract for my tastes. Plus, it could break existing validators that are unaware of the new gift product type.</p><p>The other option would be a new base type with its own subtypes. This is problematic as it would create the possibility for duplicate potential types for a given page. Fortunately, there is a better way.</p><p><strong>A namespace for OpenGraph gift ideas and wishlists</strong></p><p>That better way uses good old namespaces.</p><p>If the type is not the right place to insert metadata for giftables, perhaps a new schema might be called for to cover instances when the current OpenGraph types are not a good fit. This gives us, I think, three new objects – gift idea, the wishlist, and an entry in a wishlist. Maybe it would look something like this:</p> <pre><head prefix="wishlist: https://example.com/ns#"><meta property="og:type" content="wishlist:gift" /></pre> <p>This type would provide a catchall for wishlist gift ideas that don’t fit well into the wider graph. It would also avoid breaking validators. The same namespace could be used for all wishlist, gift, and wish object data.</p><p><strong>wishlist:gift object data</strong></p><p>The namespace could provide other wishlist item data points – estimated price(s), and known retailers, for example.</p> <pre><head prefix="wishlist: https://example.com/ns#"><meta property="og:wishlist:gift:price" content="£32.99" /><meta property="og:wishlist:gift:price" content="$99.99" /><meta property="og:wishlist:gift:retailer" content="amazon.co.uk" /><meta property="og:wishlist:gift:retailer" content="CEX" /><meta property="og:wishlist:gift:retailer" content="Harry's Local Trade Shop" /></pre> <p>There is a lot more data that could be added here but I’m not sure it is strictly necessary. Maybe there is something that should be here but I’ve not thought of. I think that the rest of the data – product information, could be covered by the existing OpenGraph namespace. If there are any obvious gaps, please comment, reply, or mention with your thoughts.</p><p><strong>wishlist:list object data</strong></p><p>If we’re going to have a custom namespace, why not also include the wishlist itself? This can be where each wish in the list could go (technical limits may apply).</p> <pre><head prefix="wishlist: https://example.com/ns#"><meta property="og:type" content="wishlist:list" /><meta property="og:wishlist:list" content="https://example.com/lists/matt/birthday/" /><meta property="og:wishlist:list:user" content="Matt" /><meta property="og:wishlist:list:wish" content="https://example.com/lists/matt/birthday/tfdobl" /><meta property="og:wishlist:list:wish" content="https://example.com/lists/matt/birthday/apple" /><meta property="og:wishlist:list:wish" content="https://example.com/lists/matt/birthday/cake" /><meta property="og:wishlist:list:wish:more" content="https://example.com/lists/matt/birthday/page-2" /><meta property="og:wishlist:list:wish:more" content="https://example.com/lists/matt/birthday/page-3" /></pre> <p>For <code>wishlist:list:user</code>, I toyed with calling this “wisher” and a few other things but finally concluded that there was no good reason to invent new terms when the existing idea of a site user or member was already well established.</p><p>There are other data points that might fit inside the graph for a wishlist. Please suggest any you think I should add here.</p><p><strong>wishlist:wish object data</strong></p><p>Wishlist entry implies the existence of wish with details such as – the gift wished for, how badly you want it (priority), how many you want, why you want it, and the list the wish is from. The whole thing might look like this:</p> <pre><head prefix="wishlist: https://example.com/ns#"><meta property="og:type" content="wishlist:wish" /><meta property="og:wishlist:wish:gift" content="https://example.com/shop/item/tfdobl" /><meta property="og:wishlist:wish:priority" content="low|medium|high" /><meta property="og:wishlist:wish:quanitity" content="1" /><meta property="og:wishlist:wish:why" content="This book is the only one missing from my collection." /><meta property="og:wishlist:wish:inlist" content="https://example.com/lists/matt/wishlist-birthday" /></pre> <p>There are maybe other optional elements. Please do suggest data points you think should go here. Is, for example, <code>wishlist:wish:why</code> the best way to label that information within the graph? </p><p><strong>Existing OpenGraph object data</strong></p><p>OpenGraph neatly provides most of the other data points that could matter, I think.</p> <pre><meta property="og:title" content="Fictional Dictionary of Bad Language" /><meta property="og:url" content="https://example.com/giftideas/tfdobl" /><meta property="og:image" content="https://example.com/images/tfdobl.jpg" /><meta property="og:description" content="..." /><meta property="og:determiner" content="the" /><!-- ect. --></pre> <p><strong>One small privacy issue</strong></p><p>While writing this, it occurred to me that I did not really want to put my postal address and other sensitive information online as part of a social graph. To avoid that I went ahead and assumed that the wishlist site handling the list for the user would implement some way for gift-givers to privately obtain such data if it was even needed at all. Perhaps with some sort of request/grant system or some other similar privacy controls.</p><p><strong>Thoughts and feedback?</strong></p><p>That’s my ideas about presenting wishlists, gifts, and wishlist items using OpenGraph. I’m open to critique, objections, praise, or any other feedback.</p> <a class="" href="https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/tumblr?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/blogger?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/diaspora?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fcoding-and-development%2Fwishlist-a-proposed-extension-of-opengraph%2F&linkname=WishList%3A%20A%20proposed%20extension%20of%20OpenGraph" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/share" rel="nofollow noopener" target="_blank"></a> <p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/ideas/" target="_blank">#ideas</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/opengraph/" target="_blank">#OpenGraph</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/wishlist/" target="_blank">#wishlist</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/cat/technology/coding-and-development/" target="_blank">#CodingAndDevelopment</a></p>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload