Facebook open graph og:image

ProefWijnProefWijn Member Berichten: 4

De beste wensen voor alle lezers van dit bericht;)

Ik heb een vraag m.b.t. Facebook en afbeeldingen. Wanneer ik een categorielink of een productlink kopieer t.b.v. een FB post dan komt hier niet de juiste foto bij, er komt steeds een "standaard" foto bij van een banner maar geen categorie of productfoto?

Iemand een idee hoe ik dit kan oplossen?? De og:image verwijst naar een banner in het thema.

7 reacties

  • Hielke BrandsmaHielke Brandsma Member Berichten: 18

    Hoi ProefWijn,

    Wanneer je de Thema editor geactiveerd hebt, kun je onderstaande code gebruiken:

    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{ shop.description }}">
    <meta property="og:site_name" content="{{ shop.name }}">
    <meta property="og:url" content="{{ shop.domain }}">
    { % if product.image % }
    <meta property="og:image" content="{{ product.image | url_image }}">
    <meta property="og:image:width" content="1000" />
    <meta property="og:image:height" content="525" />
    { % elseif collection.image % }
    <meta property="og:image" content="{{ collection.image | url_image }}">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    { % elseif catalog.image % }
    <meta property="og:image" content="{{ catalog.image | url_image }}">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    { % else % }
    <meta property="og:image" content="alternatieve-afbeelding.png">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    

    Het was voor mij ook even puzzelen, maar dit zou moeten werken. De 'og:image:width' en 'og:image:height' kun je naar wens aanpassen.

    Ik hoop je op deze manier wat geholpen te hebben

  • JohanJJohanJ Member Berichten: 202 
  • Hielke BrandsmaHielke Brandsma Member Berichten: 18

    @JohanJ Dit kun je toevoegen / aanpassen in je custom.rain

    Ik ben geen developer, dus ik weet niet 100% zeker of elk thema zo opgebouwd is. Kijk gewoon even waar je andere META-Data geladen wordt, dan heb je de juiste locatie te pakken.

    Succes!

  • ProefWijnProefWijn Member Berichten: 4

    @Hielke Brandsma dank voor je bericht ik ga het in gang zetten. Hoop dat het allemaal gaat lukken;)

  • JohanJJohanJ Member Berichten: 202 

    Bij mij werkt het niet. Ik krijg een deel van de code boven in beeld. Ik dacht dat er een {% endif %} ontbrak maar dan ontstaan er nog meer problemen.

    We hebben een maatwerk site, dat zal er misschien mee te maken hebben.

  • YouckeYoucke Lightspeed Staff Berichten: 12 Lightspeed
    3 augustus aangepast

    De code die hier is gepost mist een aantal dingetjes. Ik heb dit nog even wat verder bewerkt en hieronder staat de code die zonder problemen moet werken :)

    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{ shop.description }}">
    <meta property="og:site_name" content="{{ shop.name }}">
    <meta property="og:url" content="{{ shop.domain }}">
    {% if template == 'pages/index.rain' %}
    <meta property="og:image" content="PLAATS LINK NAAR EIGEN AFBEELDING HIER" />
    {% elseif product.image %}
    <meta property="og:image" content="{{ product.image | url_image }}">
    <meta property="og:image:width" content="1000px" />
    <meta property="og:image:height" content="525px" />
    {% elseif collection.image %}
    <meta property="og:image" content="{{ collection.image | url_image }}">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% elseif catalog.image %}
    <meta property="og:image" content="{{ catalog.image | url_image }}">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% else %}
    <meta property="og:image" content="PLAATS LINK NAAR EIGEN AFBEELDING HIER">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% endif %}
    

    Bij 'PLAATS LINK NAAR EIGEN AFBEELDING HIER' kun je zelf een afbeelding neerzetten die moet worden getoond als je bijvoorbeeld de homepage deelt. De afbeelding kun je uploaden onder Tools - Bestanden in je backoffice, waarna je de link die je daar ziet op die plek neer zet.

    Bij de tweede 'PLAATS LINK NAAR EIGEN AFBEELDING HIER' kun je een andere afbeelding plaatsen die bijvoorbeeld wordt getoond op inhoudspagina's en dergelijke.

    Post edited by Youcke on
  • Hielke BrandsmaHielke Brandsma Member Berichten: 18

    Goeie aanvulling Youcke!

    Ik weet zeker dat mensen hier iets aan gaan hebben :)

Log In of Registreer om te reageren.