Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Becky Wilkinson 6 posts 86 karma points
    Aug 06, 2019 @ 11:48
    Becky Wilkinson
    0

    When I share a link on Facebook it isn't picking up the image that I've put on the page. I know that I need to get into the Header to provide a specific reference to the image but can you remind me how to do that for just that page? Thanks :)

  • Matthew Taylor 10 posts 83 karma points
    Aug 07, 2019 @ 12:06
    Matthew Taylor
    0

    You first need to make sure that you have the right meta on your page for social media, for example;

    Twitter

    meta name="twitter:image" content="yourImageLinkHere" />

    meta name="twitter:image:alt" content="yourImageLinkHere" />

    Facebook/Open Graph

    meta property="og:image" content="yourImageLinkHere" />

    meta property="og:image:alt" content="yourImageLinkHere" />

    You could then grab the image from a Media Picker on the current page, which would give you the flexibility to change this per page.

    As a fallback take an image from a property your Home node in case someone forgets to fill this in.

  • Becky Wilkinson 6 posts 86 karma points
    Aug 08, 2019 @ 08:25
    Becky Wilkinson
    0

    Thanks for taking the time to reply. It definitely doesn't have the right meta on the social media as if I go to the Facebook Debugger tool it tells me that its an error on the page. Do I go back and change this on Facebook or do I need to go into the Umbraco html and change it there?

    Apologies for the very basic question, I'm still very new to all this.

    Thanks

  • Matthew Taylor 10 posts 83 karma points
    Aug 08, 2019 @ 09:54
    Matthew Taylor
    1

    Hi Becky

    Facebook will gather the meta from your site

    You need to go into your Master template and under section of your HTML add the relevant meta tags (there are more than the examples I gave so you will have to do some research) .

    You will also need to add an opening tag < to each of the above examples I gave you because this text editor would not allow me to publish the full code snippets

    You can then put in some logic to get the image from the media picker and the way you do this will depend on your version of Umbraco

    https://our.umbraco.com/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker/

    If you get stuck give me a shout with your version of Umbraco and I will write you some code to do what you need.

  • Becky Wilkinson 6 posts 86 karma points
    Aug 08, 2019 @ 10:05
    Becky Wilkinson
    0

    Thanks, I've been working my way through the online tutorial and got to the bit where it said to add this at the bottom of the head:

    @if(Model.Content is IOpenGraph){ @Html.Partial("openGraph") }

    I tried that on the master template but all that happened is that it then appeared as text across the top of our webpage? Have I put it in the wrong place? I scrolled down all through the head section and then put it just above where it ended?

  • Becky Wilkinson 6 posts 86 karma points
    Aug 08, 2019 @ 10:05
    Becky Wilkinson
    0

    Its version 6 if that makes a difference?

  • Matthew Taylor 10 posts 83 karma points
    Aug 08, 2019 @ 11:57
    Matthew Taylor
    0

    First things first

    Take a backup of the site and work + test locally, that way if you break anything you have a backup and customers won't see your error messages.

    You should really migrate that to V7 or V8, your life will be so much easier and your version will be patched and up to date :) The code you use and ways you do things can be completely different as well

    Its been years since I used 6 but the below will work;

    Create a Partial View Macro called Meta and add this into your head;

    For example;

    <head>
    <umbraco:Macro Alias="Meta" runat="server"></umbraco:Macro>
    </head>
    

    Inside this Partial View Macro is where you want your logic

    This will work

    @inherits Umbraco.Web.Macros.PartialViewMacroPage   
    @if (CurrentPage.HasValue("image"))
    {
        <meta name="twitter:image" content="@Umbraco.Media(CurrentPage.image).Url" />
        <meta name="twitter:image:alt" content="@Umbraco.Media(CurrentPage.image).Name" />
        <meta property="og:image" content="@Umbraco.Media(CurrentPage.image).Url" />
        <meta property="og:image:alt" content="@Umbraco.Media(CurrentPage.image).Name"< />  
    }
    
  • Amir Khan 995 posts 2013 karma points
    Aug 08, 2019 @ 12:34
    Amir Khan
    0

    In addition to what Matthew has provided, don't forget you need to add the absolute path to the image including the domain, not just the relative path, with something like below (not tested on v6, agree you should upgrade):

    var imagePath = @Request.Url.Scheme + "://" + @Request.Url.Host + @Umbraco.Media(CurrentPage.image).Url;
            <meta name="twitter:image:src" content="@imagePath">
            <meta property="og:image" content="@imagePath"/>
            <meta itemprop="image" content="@imagePath">
    
Please Sign in or register to post replies

Write your reply to:

Draft