Preview pictures when sharing

Hi Weavers, when sharing one of my site pages to social media directly from site (using a share button) there is no picture that shows and this is not as attractive. However if I copy and paste the page to a social media site a preview picture does show. Why does this happen? Is their a setting I can change to ensure I get preview pictures anytime I share?

You need to use Open Graph Meta tags.

Here is a handy tool for Facebook previews:

and for working with Meta Tags in RW:

https://rapidweavercommunity.com/tutorials/new-features-in-rapidweaver-7/custom-meta-tag-templates

and from Facebook:

2 Likes

Thank you very much appreciated!

1 Like

I am struggling with this. Used the facebook sharing markup gen and got stuck.

I don’t seem to understand ‘extract’. I pasted the code in head on page and when I go to share the page it’s the favicon page

00

Is what happens. I am going to take out the code for now and republish my site without it, and re-look at this problem in the morning :blush:

You need to change the info after content= to your info

is that all I need to change?

I took out the code, before I received your tip, and now the same thing is happening without the code in there… what have I done? :cry:

Ok -. Below are the tags you need. You obviously have to replace the “your-image.jpg” with your actual file name. (I typed in your URL’s, but check for typos please).

In this example the “your-og-image.jpg” is in RW’s Resources (although you can put it anywhere else, but then you have to change the path to your file in the Tags. But I think using RW’s Resources may be the easiest way for you, so I recommend putting your image in Resources.

Also your image is wider than FB likes it, which is 1200x630 pixels, otherwise it will be cropped. If you don’t want to reduce the width of your image for some reason, type in 1029 in the og:image:width tag content, and if you don’t want to change your height, type in 539 in the og:image:height tag content.

You have to change the Title to your actual page Title, similarly with your description.

Type your info for image, description and Title between the quotation marks in content.

<meta property="og:image" content="http://anglosyrian.press/resources/your-og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="My Great Web Page">
<meta property="og:description" content="Your description of your web page.">
<meta property="og:url" content="http://anglosyrian.press/allepo_eye_hospital/">

Once your done putting the rest of your actual info in the Tags, you can paste them into the Inspector side bar for that page in the HTML Code panel in the Head window, using “paste as plain text” (always use paste as plain text when pasting code).

Alternatively you could paste them in the Meta Tag window of the Inspector, but then you need to strip out the Tags, like so:

Name: og:image content: http:/yourwebsite,com/resources/your-image.jpg

Name: og:image:width content: 1200

and so on with the remaining tags. I think the first method may be easier for you, but both work fine.

Once your done you can check it here:

You may have to use the tools in FB to re-scrape your page for the new Image, Description and Title to show up when sharing.

Hope that helps!

2 Likes

It’s just because Facebook has it cached. They only scrape about every 7 days but you can use their dev tools to force a res tape. (See above)

2 Likes

It took a minor brain haemorrhage but I got there!

Thankyou for the tip, once I have sorted out the site I will debug with FB tools, cheers! :wink:

1 Like

Glad to hear it. :sunglasses:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.