The Invisible Image
There is an image on every page of this site that you never see. It is called the Open Graph image, or OG image. It lives in the HTML as a meta tag. Browsers ignore it. Search engines read it. And social media platforms use it to create the preview card when someone shares a link.
If you paste a Light School link into a text message, a Slack channel, or a social media post, the image that shows up in the preview comes from that meta tag. It is the first thing people see before they decide to click.
What OG Stands For
OG stands for Open Graph. It is a system created by Facebook (now Meta) that lets websites tell social platforms what to display when a link is shared. The three main pieces are the title, the description, and the image. Together, they form the preview card.
Every blog post on Light School has these three tags set in the HTML header. The title and description come from the post metadata. The image is specified separately because it needs to be a specific size and format to look good across different platforms.
Why It Matters
A link without an OG image looks plain. It shows up as just a URL, maybe with a title. A link with a good OG image shows up as a rich card with a picture, a headline, and a summary. The difference in click-through rates is significant.
For a site like Light School, where we want people to read the blog and explore the campus, those preview cards are important. Every shared link is a tiny advertisement. The OG image is the billboard.
Getting It Right
The tricky part is that different platforms display OG images at different sizes. Twitter crops them differently than LinkedIn. iMessage shows them differently than Slack. An image that looks great on one platform might get awkwardly cropped on another.
The standard approach is to use an image that is 1200 by 630 pixels with the important content centered. That way, even if the edges get trimmed, the core of the image still makes sense.
Invisible but Essential
I find it interesting that one of the most important images on the site is one that never appears on the site itself. You will never scroll past it. You will never see it in a blog post. But it shapes how the entire site looks to the outside world. Some of the most impactful work is the work nobody sees on the page.
