- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
[Note: The title of this post has been edited by a moderator for clarity.]
When people post a link on Facebook the wrong thumbnail shows. How do I create an OG Image Tag?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@CheekyRadio Just to add to @Adam's reference post, you can upload your desired OG image to your Weebly file store. To do this, in the Site Editor, click Theme > Edit HTML/CSS (button at bottom of left-hand sidebar). In the left-hand sidebar, scroll down to the "Assets" section and click the "+" to the immediate right of the Assets label. Select "Upload File(s)" and then browse to the location on your computer where your desired image is.
Now, let's say that you named your image "fb_og_image.jpg" and your site's domain is "mysite.com". Per Adam's post, in the Site Editor, click Settings > SEO then scroll down the "Header Code" input box. Add the following OG image meta tag:
<meta property="og:image" content="https://mysite.com/files/theme/fb_og_image.jpg" />
Click the green Save button at the bottom of the Settings page and then re-publish your site. You can use the Facebook Sharing Debugger to preview how your site link will appear in a Facebook post: https://developers.facebook.com/tools/debug/. Or you can just create a new Facebook post and add your site's url within the post to see how it previews (you can see this before you have to actually save the post). If you want to implement different OG images on different site pages, as Adam mentions, click on Pages in the Site Editor then click your particular page, click SEO Settings then add your OG image meta tag to the "Header Code" input box there (in this case, you'll want to upload multiple images to your file store and then reference them on each of the desired pages by modifying the filename in the meta tag).
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report

- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thanks for your post, @CheekyRadio.
Check out this post on using your own OG meta tag for Facebook.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@CheekyRadio Just to add to @Adam's reference post, you can upload your desired OG image to your Weebly file store. To do this, in the Site Editor, click Theme > Edit HTML/CSS (button at bottom of left-hand sidebar). In the left-hand sidebar, scroll down to the "Assets" section and click the "+" to the immediate right of the Assets label. Select "Upload File(s)" and then browse to the location on your computer where your desired image is.
Now, let's say that you named your image "fb_og_image.jpg" and your site's domain is "mysite.com". Per Adam's post, in the Site Editor, click Settings > SEO then scroll down the "Header Code" input box. Add the following OG image meta tag:
<meta property="og:image" content="https://mysite.com/files/theme/fb_og_image.jpg" />
Click the green Save button at the bottom of the Settings page and then re-publish your site. You can use the Facebook Sharing Debugger to preview how your site link will appear in a Facebook post: https://developers.facebook.com/tools/debug/. Or you can just create a new Facebook post and add your site's url within the post to see how it previews (you can see this before you have to actually save the post). If you want to implement different OG images on different site pages, as Adam mentions, click on Pages in the Site Editor then click your particular page, click SEO Settings then add your OG image meta tag to the "Header Code" input box there (in this case, you'll want to upload multiple images to your file store and then reference them on each of the desired pages by modifying the filename in the meta tag).
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi can someone add a screengrab of where in the header code the line of code
<meta property="og:image" content="https://mysite.com/files/theme/fb_og_image.jpg" />
is added? I'm adding it at the end and it completely disrupts my home page - with images in the wrong place and it the of image still doesn't show up on FB etc - thanks
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report

- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi @Jacket 👋
Add the code under Settings > SEO > Header in the editor (not the theme code). You will need to save and publish the site, then it can be helpful to run the URL through the Facebook Debugger tool.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thanks, Bernadette - that's what I think I've been doing - as you can see below. When I do that it completely messes up my home page and the image still doesn't appear - confused!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report

- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Can you post a direct link to the image url you are using in the code? I don't see the code under the Settings tab, but you may have figured this out a different way. I do see an image loading for your URL now.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report