• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Open graph meta tags

New Here ,
Sep 03, 2017 Sep 03, 2017

Copy link to clipboard

Copied

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.

Screen Shot 2017-09-03 at 11.35.44.png

Views

6.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Apr 05, 2018 Apr 05, 2018

Hi hannahdaniel93.

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 t

...

Votes

Translate

Translate
Adobe Employee ,
Sep 05, 2017 Sep 05, 2017

Copy link to clipboard

Copied

What is "Open Graph meta tags?" Is it a third party widget? What happens when you don't use it?

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 05, 2017 Sep 05, 2017

Copy link to clipboard

Copied

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.

Screen Shot 2017-09-03 at 11.35.44.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Sep 06, 2017 Sep 06, 2017

Copy link to clipboard

Copied

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

The Open Graph protocol

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.

https://www.creativemuse.co/seo-and-social-media-preview-builder-widget-for-adobe-muse.html

David

Creative Muse

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 06, 2017 Sep 06, 2017

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 17, 2019 Oct 17, 2019

Copy link to clipboard

Copied

LATEST

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.

 

More info: https://neilpatel.com/blog/open-graph-meta-tags/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 05, 2018 Apr 05, 2018

Copy link to clipboard

Copied

Hi hannahdaniel93.

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)

  1. Go to https://developers.facebook.com/
  2. Go to menu at the up-right corner and select "Add an app"
  3. In name put your webpage name and then just push "Create App ID" and complete the security image
  4. At the left there would be a menu, select Configuration>Basic and keep that info in your browser
  5. Go to your Muse file and open Page>Page Properties
  6. Go to Metadata tab
  7. Insert the next code where is the space to fill the "HTML <head>" tab:

<!--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 rel="canonical" href="http://YOUR WEBSITE.COM/WEB-PAGE" />

<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:url" content="http://YOUR WEBSITE.COM/WEB-PAGE" />

<meta property="og:description" content="PAGE DESCRIPTION" />

<meta property="og:site_name" content="http://YOUR WEBSITE.COM/WEB-PAGE" />

<meta property="og:type" content="article" /><!--Change to “website” if home page-->

<meta property="og:image" content="http://YOUR WEBSITE.COM/IMAGE-LINK.JPG" />

<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" />

<meta name="twitter:url" content="http://YOUR WEBSITE.COM/WEB-PAGE" />

<meta name="twitter:image" content="http://YOUR WEBSITE.COM/IMAGE-LINK.JPG" />

    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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines