x

How do I add my own Og:Image Tag for Facebook on my site built with the classic Weebly editor?

[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? 

2,099 Views
Message 1 of 7
Report
1 Best Answer

Best Answer

@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).

View Best Answer >

2,075 Views
Message 8 of 7
Report
6 REPLIES 6
Square

Thanks for your post, @CheekyRadio.

Check out this post on using your own OG meta tag for Facebook.

2,084 Views
Message 8 of 7
Report

Best Answer

@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).

2,076 Views
Message 8 of 7
Report

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  

1,849 Views
Message 8 of 7
Report
Square

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

1,819 Views
Message 8 of 7
Report

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!image

1,817 Views
Message 8 of 7
Report
Square

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. 

1,797 Views
Message 8 of 7
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.