Hi, I have just published my site through a third party hosting site and have tried to share the link. However, it always loads a blank preview of the site (see image). I think it has something to do with open graph meta tags, but I can not figure out how to changed this. Please help.
Any help would be much appreciated.
What is "Open Graph meta tags?" Is it a third party widget? What happens when you don't use it?
I'm not sure, when I researched my problem this is what I came across. Basically I want to make sure that my website shows a preview when the link is shared, which it currently doesn't (see image). When I made a website in dreamweaver, I had no problem with this. I don't know if is missed something in the process of designing my website on muse.
OpenGraph is the code standard for page information used by Facebook/Twitter, etc. See link below. This is added to the HTML for <head> section of the page under Page Properties
I have a widget that sets up the necessary code to display preview text and images If you don't want to add the code yourself.
Thanks, I did try and code it myself using that website before, but either inwas doing it wrong or it wasn't working. I presime getting a widget to do t for me, would be much simpler?
I'm late here, but to provide information for future users.
Open Graph Tags (OG) are provided by Facebook to facilitate user to provide their custom infomation on social media dialog, which is also used by Linkedin, Twitter and others.
I might be a little late but I have the solution while searching the easiest (and free) way to add Open Graph meta data to your page for any person who is looking for this.
If you want to add the same description and Open Graph image to all your site just do the next steps in your master page, if you want different descriptions and Open Graph image in every page of your website then you have to do the next steps in every page in your muse file.
(I have Muse in spanish, sorry if there's something different between Muse Tools translation)
<!--HTML Meta Tags-->
<title> PAGE TITLE </title>
<meta name="description" content="PAGE DESCRIPTION" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="PAGE KEYWORDS" />
<meta name="googlebot" content="noodp" />
<meta http-equiv="content-language" content="en-US" >
<meta name="author" content="YOUR NAME OR WEBSITE NAME" />
<link href="http://plus.google.com/u/0/GOOGLE-PLUS-ACCOUNT" rel="publisher" />
<!--Open Graph Meta Tags-->
<meta property="fb:app_id" content="FACEBOOK-APP-ID" />
<meta property="og:title" content="PAGE TITLE" />
<meta property="og:description" content="PAGE DESCRIPTION" />
<meta property="og:type" content="article" /><!--Change to “website” if home page-->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:locale" content="en_US"/>
<!--Twitter Open Graph Meta Tags-->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TWITTER-HANDLE" />
<meta name="twitter:title" content="PAGE TITLE" />
<meta name="twitter:description" content="PAGE DESCRIPTION" />
8. Replace all the CAPS in the html data with real data
8.1. In the 5th line replace PAGE KEYWORDS with words that the finder will detect for your webpage (ex.: "music store, guitars")
8.2. In the 12th line replace FACEBOOK-APP-ID with the numbers in the App ID browser from the 4th step
8.3. In the 17th line replace article with website if it is your home page
8.4. In the 18th and 27th line replace the url with the one that contains your image only, you may use a custom image, just upload that to your server and copy the url where the image would appear. I recommend 1200 x 630 px.
9. Just click in OK and upload your website
10. Debug your webpage in this page: Debugger - Facebook for Developers
11. There would say if there's a problem with your Open Graph, if not there would be a preview of your website shared in facebook.
I hope you get it done right. It works perfectly fine for me.