If you’ve just shared your website with someone else, or on a social media platform, and been disappointed that the link didn’t expand, it’s an easy fix to make your links more appealing and improve SEO.
It’s Set with an Open Graph Meta Tag
If you share a website link on most social platforms or direct messaging, it will auto-expand with a fancy image, title, and tagline, like so:
This is set with a meta tag, called
og:image, and also
og:description. This whole system is called the Open Graph protocol, which most social sites support. You can read more about it here.
The important part is how you set it. It’s just a couple meta tags:
<meta property="og:image" content="https://i.imgur.com/imagelink.jpg"> <meta property="og:title" content="Website Title" /> <meta property="og:description" content="Website Description" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/" />
Twitter will recognize Open Graph tags, but also has their own:
<meta name="twitter:title" content="Website Title"> <meta name="twitter:description" content="Website Description"> <meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">
Facebook has a great tool you can use to debug these links, so you don’t have to send it to yourself a billion times.
- › NZXT Signal 4K30 Capture Card Review: Lossless High-Quality Footage
- › T-Mobile Is Selling Your App Activity: Here’s How to Opt Out
- › A World Without Wires: 25 Years of Wi-Fi
- › The 10 Best Netflix Original Movies in 2022
- › What’s New in Windows 11’s 22H2 Update: Top 10 New Features
- › “Atari Was Very, Very Hard” Nolan Bushnell on Atari, 50 Years Later