Open Graph

**RKissane** · 27 August 2021, 12:48 PM

Has anybody used the Open Graph function yet? It is now available on the Design Pro release so I assume it has been out with DP+ for awhile.

I am not really following how this is used. I did read the help file but still a little vague on the use of Open Graph. So if I post a link to my website on a social media site, how does the site know to grab the Open Graph information? Is it a special link that has to be posted? Does all social media sites use Open Graph?

Where is the Open Graph information stored on a website? Is in the main header on all of the pages of the site?

Ray

**Egg Bramhill** · 28 August 2021, 01:12 AM

Hi Ray, not loked into this addition until your post. I created a one page website containing an opengraph Title, Content and an Image which I uploaded to my server in the sub-folder '/opengraph'.

I then tested in on Facebooks https://developers.facebook.com/tools/debug/

It came up with the Title, Description and Photo. However it did show bugs of which I don't know why they're being reported. The Xara implementation is perhaps oversimplified as it could have additional tags:

**gwpriester** · 28 August 2021, 11:58 AM

Not sure if this is the problem but the first time I tried this feature it did not post on Facebook. But when I added the entire URL to the site name then it worked. I think Rob had suggested that.

**Acorn** · 28 August 2021, 02:24 PM

@Ray, when GaryP says he "added the entire URL to the site name", I imagine this is the necessary step in Web Properties > Publish > Publish to Other web host > settings > Publish details > Website URL.
When I check the rendered <head> , the full URL appears for:

canonical
og:url
og:image

All other linked content remains relative.

@Egg, the missing fb:app_id probably resolves when FB finds the og:image full path.
Your current https://parkeston.com/opengraph/ source shows the full URL is missing.

Acorn

**Initiostar** · 28 August 2021, 02:32 PM

I tried the Xara utility for one of my websites. The Open Graph utility creates the meta tags you would otherwise have to create manually. I did have to refresh the FB cache via the FB debug page, but thereafter all appeared as expected.

Click image for larger version.

Name: FB Meta Tags.jpg
Views: 57
Size: 112.7 KB
ID: 130515

Click image for larger version.

Name: OG FB Debug.jpg
Views: 61
Size: 64.2 KB
ID: 130516

Worth a read through the FB pages: https://developers.facebook.com/docs...ng/webmasters/

No substitute though for coordinating FB/Instagram/Twitter posts and website content.

Gary

**Acorn** · 28 August 2021, 08:07 PM

@Xara, still waiting --> https://www.talkgraphics.com/showthr...471#post638471.

Acorn

**forresthowie** · 06 September 2021, 08:37 PM

Hi all,
I bought the new version just for this feature but I'm obviously doing something wrong. I'm trying this out on a test page I made and uploaded to a folder on my webspace via ftp. I've included a pic of what I (think) I made, and the blank space I'm getting when I post the direct link on my fb page.
Is there something i'm missing here? Any help would, as ever, be much appreciated.
Yours,
Forrest

Click image for larger version.

Name: 1.jpg
Views: 56
Size: 44.5 KB
ID: 130575

Click image for larger version.

Name: 2.jpg
Views: 53
Size: 29.4 KB
ID: 130576

**Initiostar** · 06 September 2021, 09:58 PM

Forrest,

Once you have added your image to Open Graph, you need to re-publish your website. If you have been successful, you will see the meta 'og' tags in your source code; they should look something like this - there is no need to ftp the image to your server.

Click image for larger version.

Name: OG Tags Source Code.jpg
Views: 52
Size: 45.5 KB
ID: 130577

Thereafter, you need to head over to Facebook debug, add your full URL https://......... and 'scrape' to see the image in situ.

Click image for larger version.

Name: FB.jpg
Views: 45
Size: 40.9 KB
ID: 130578

You may get a message that the FB id is missing - this is irrelevant, but if you have a FB developer id you can manually add the meta tag to the website HTML(head): <meta property="fb:app_id" content="xxxxxxxxxxxxxxx" /> content is your FD developer ID.

Gary

**forresthowie** · 06 September 2021, 10:19 PM

Originally Posted by Initiostar

Forrest,

Once you have added your image to Open Graph, you need to re-publish your website. If you have been successful, you will see the meta 'og' tags in your source code; they should look something like this - there is no need to ftp the image to your server.

Thereafter, you need to head over to Facebook debug, add your full URL https://......... and 'scrape' to see the image in situ.

You may get a message that the FB id is missing - this is irrelevant, but if you have a FB developer id you can manually add the meta tag to the website HTML(head): <meta property="fb:app_id" content="xxxxxxxxxxxxxxx" /> content is your FD developer ID.

Gary

Thanks so much. Dumb question, if I may. Does the image have to be one on the webpage itself? The default Xara setting doesn't look like it is. Basically, can I make a special 'cover page' image and 'import' it to Xara and that will work, or does it have to be an image on the webpage? I tried importing some, but when I made them at 1200 x 630, they all changed size when they were imported.

Do I have to make a folder for these images on my server space too?

Apologies for asking dim questions.

Yours,
Forrest

**Initiostar** · 06 September 2021, 10:36 PM

Originally Posted by forresthowie

Thanks so much. Dumb question, if I may. Does the image have to be one on the webpage itself? The default Xara setting doesn't look like it is. Basically, can I make a special 'cover page' image and 'import' it to Xara and that will work, or does it have to be an image on the webpage? I tried importing some, but when I made them at 1200 x 630, they all changed size when they were imported.

Do I have to make a folder for these images on my server space too?

Apologies for asking dim questions.

Yours,
Forrest

Does the image have to be one on the webpage itself? Absolutely not, you can create any image you want in Xara, or any other software of choice, export it with the required size (1200px by 627px) and then upload back for your og image - I use the same design for FB, Twitter and LinkedIn (albeit slightly different sizes), but you might want to take your home page image and resize it.

Do I have to make a folder for these images on my server space too? No, else you will have to fiddle about with the og meta tag and change its source.

Gary