How to Display a Thumbnail Image When Sharing a URL on LINE
When you share a URL via LINE, a thumbnail image appears on the right side of the preview, as shown above. This article explains how to configure your website so that a thumbnail image is displayed in that way. (While "URL thumbnail image" may not be the official term, it seems to be the clearest way to describe it here.)
How to Set the Thumbnail Image
There are two main ways to configure thumbnail images for URLs: one using standard HTML coding, and one using the no-code website builder Webflow.
Using Code
You can configure thumbnail display using meta tags inside the <head> section:
<meta charset="UTF-8">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:image" content="Image URL">
<meta property="og:url" content="Page URL">
<meta property="og:type" content="website">Set the og:image property to the URL of the image you want to display when the page is shared. To obtain this image URL, you'll need to upload your image to a server or hosting service first.
However, if you’re using Webflow, the process becomes much simpler.
Using Webflow
- Open your Webflow dashboard and select the project you want to configure.
- From the left sidebar, click on "Pages" (it’s the fifth icon from the top, resembling a folded sheet).
This will display a list of your created pages.
3. Hover over the page you want to edit and click the gear icon (Settings) that appears.
You’ll be taken to that page’s "Settings" panel, where you can configure details including:
- General
- SEO Settings
- Open Graph Settings
- Site Search Settings
- Custom Code
- Click on Open Graph Settings.
Here, you’ll see a field called Open Graph Image URL. Paste the image URL here to set your thumbnail.
Note: This is not an upload field; you must paste a URL of an already uploaded image.
To get this URL from Webflow:
5. Click the photo icon on the left sidebar to open your image assets.
- Hover over the image you want to use. Click the "..." icon that appears, then click Copy Link to get the image URL.
- Paste this URL into the Open Graph Image URL field.
As of 2025, Webflow also added a "Select Image" button, making it even easier to choose an image from your assets.
You can also configure different images for each individual page.
How to Confirm Your Settings
To confirm that your Open Graph image is set correctly, you can:
- Send the URL to yourself on LINE and check the preview.
- Paste the URL into a Facebook post and see if the thumbnail appears.
Note: Open Graph images may take some time to update. In some cases, we’ve seen homepages take longer to reflect the change than subpages, but they eventually display correctly.
When sharing on Twitter, a similar card layout appears. If the image isn't configured properly, it may result in an error. For Twitter-specific issues, including how to fix the “Error: No Card Found” message, refer to the following article:
[How to Fix Twitter Cache Errors When Open Graph Images Don't Show | LikePay]
Summary
If you're coding manually:
- Place meta tags in the
<head>section of your HTML.
If you're using Webflow:
- Go to your project → Pages → Settings → Open Graph Settings → Open Graph Image
- Paste the image URL (not a file upload)
- Use Webflow's asset manager to easily get the image URL
Thanks to Webflow’s no-code environment, this setup is quick and user-friendly. If you're interested in why many people build websites with Webflow, check out our related article!
.svg)
