5 Replies Latest reply on Apr 5, 2018 9:05 AM by manuelt1004241

    Open graph meta tags

    hannahdaniel93 Level 1

      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

        • 1. Re: Open graph meta tags
          Preran Adobe Employee

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

           

          Thanks,

          Preran

          • 2. Re: Open graph meta tags
            hannahdaniel93 Level 1

            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

            • 3. Re: Open graph meta tags
              David Asch Level 4

              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.htm l

               

              David

              Creative Muse

              1 person found this helpful
              • 4. Re: Open graph meta tags
                hannahdaniel93 Level 1

                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?

                • 5. Re: Open graph meta tags
                  manuelt1004241 Level 1

                  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.