Urgent.News

What's breaking now, across thousands of outlets.

Tech

Why Your og:image Works in the Browser but Not for Crawlers: Relative Paths, Redirects and Wrong Content-Types

There is a special kind of frustration reserved for the image that works. You open https://yoursite.com/og/launch.png in a tab, it loads instantly, it looks great. You paste the page into LinkedIn and get a headline, a domain, and no picture. Most write-ups about broken link previews stop at "make sure og:image is set". This post is about the next layer: the tag is set, the file exists, and the…

When an image appears correctly in a browser but fails to load for crawlers, several URL-level issues could be the culprit. These problems often involve relative paths, redirects, or incorrect content types.

First, ensure the og:image tag contains a full URL instead of a relative one. The Open Graph protocol requires the use of a complete URL. For example, instead of using /og/launch.png, set the content attribute to https://yoursite.com/og/launch.png. Some crawlers may resolve relative paths differently, leading to the image being requested from the wrong host.

Another issue could be redirects. A chain of redirects may cause the crawler to land on an incorrect page, such as a login page or the home page. To diagnose this, use the command curl -sIL -A LinkedInBot/1.0 https://yoursite.com/og/launch.png | grep -iE ^(HTTP|location|content-type) to see the number of redirects and the final URL. If the final URL is a web page instead of an image, the crawler won't display the image.

The server might also lie about the content type. Some storage buckets or frameworks may return files with incorrect content types, such as serving .png files as application/octet-stream or returning a web page instead of an image. To check the content type, use the command curl -s https://yoursite.com/og/launch.png -o /tmp/og.png && file /tmp/og.png. If the file is identified as an HTML document, the image URL is not pointing to a valid image.

Additionally, signed URLs, which expire after a certain period, can also cause issues with og:image. The tag gets updated once, and if the signed URL expires before the crawler revisits the page, the crawler won't be able to load the image. Instead, use a stable public URL that doesn't expire.

Sometimes, the image file itself may be too large or too small. A 6 MB PNG file can cause timeouts during the crawler's fetch, while a 150x150 logo might be too small to be used for large card images. Export the image in a compressed format, such as JPG or WebP, and ensure it's around 1200x630 pixels in size. Most platforms prefer JPG, PNG, or WebP formats.

Lastly, when updating the image, remember to version the URL to avoid serving the old image. Include a version number or a content hash in the filename, which most build tools already do for other assets.

Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.

Read the original at dev.to →

More in Tech

FBR Stopped From Accessing Bank Records

The Lahore High Court (LHC) has set aside tax notices seeking taxpayers’ bank statements, ruling that the Federal Board of … Read More The post FBR Stopped From Accessing Bank Records appeared first…

Firefox about:config: The Power User Settings Guide

Firefox's about:config page is a direct interface to the browser's preference system — hundreds of settings not exposed in the regular UI. Here's a practical guide for power users.

  • Access about:config via address bar to view hidden Firefox settings
  • Use search bar to filter and modify preferences like gfx.webrender.all
  • Reset preferences or use user.js to persist changes across updates

Add a Link Preview Smoke Test to Your Deploy Pipeline (Node Script + GitHub Actions)

We test our APIs, our components, and sometimes our CSS. Then a release goes out, marketing drops the new page into a Slack channel and a LinkedIn post, and the card shows last month's image with a…

  • Node script checks Open Graph and Twitter Card tags on production URLs
  • GitHub Actions job runs after each deploy to test link previews
  • Script asserts missing/duplicate meta tags, incorrect image URLs, and wrong URLs

Firefox Security Settings: What They Do and How to Harden Them

Firefox ships with robust security defaults, but understanding them helps you make informed decisions about what to keep, what to change, and what to add.

  • Firefox enables HTTPS by default, warns on unsupported sites
  • Enhanced Tracking Protection blocks trackers and cookies
  • Multi-process architecture with OS-level sandboxing isolates processes

More from Friday 16 October →