Open Graph tags instellen in Shopify
Goed nieuws: Shopify-thema's genereren Open Graph tags automatisch. Productpagina's gebruiken de eerste productafbeelding, de homepage gebruikt je ingestelde social-afbeelding. Het slechte nieuws: die standaardwaarden zijn zelden optimaal — productfoto's hebben vaak de verkeerde verhouding en de homepage-preview is regelmatig gewoon leeg.
De gratis checker toont je previews voor X, LinkedIn, Facebook, Slack en Discord.
Check eerst wat er nu staat
Plak je shop-URL en een productpagina in de MetaPeek-checker. Grote kans dat de basis er is, maar de afbeelding niet klopt (verkeerde crop) of og:description ontbreekt.
Stel de site-brede social-afbeelding in
Ga in de thema-editor naar Thema-instellingen (meestal onder "Social media" of "Favicon & social"). Upload daar een social sharing image van 1200×630. Deze wordt de fallback voor pagina's zonder eigen afbeelding.
Productpagina's: de eerste afbeelding telt
Shopify pakt de uitgelichte (eerste) productafbeelding als og:image. Vierkante productfoto's worden op de meeste platforms gecropt. Wil je perfecte previews voor topproducten, zet dan een 1,91:1-afbeelding als eerste media-item, of accepteer de crop.
Oudere thema's: check de code
Werkt je thema nog niet met de automatische tags, kijk dan in de code-editor naar snippets/social-meta-tags.liquid of de <head> in layout/theme.liquid. Moderne (OS 2.0) thema's regelen dit zelf — handmatig ingrijpen is daar zelden nodig.
Codevoorbeeld
{% comment %} Alleen voor oudere thema's zonder social-meta snippet — in layout/theme.liquid, binnen <head> {% endcomment %}
<meta property="og:title" content="{{ page_title | escape }}" />
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:type" content="{% if template contains 'product' %}product{% else %}website{% endif %}" />
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
{% if template contains 'product' and product.featured_image %}
<meta property="og:image" content="https:{{ product.featured_image | img_url: '1200x' }}" />
{% elsif settings.share_image %}
<meta property="og:image" content="https:{{ settings.share_image | img_url: '1200x' }}" />
{% endif %}
<meta name="twitter:card" content="summary_large_image" />Veelgemaakte fouten
- Apps die dubbele tags injecterenSommige SEO- of review-apps voegen eigen og:-tags toe naast die van je thema. Check met MetaPeek of er maar één set staat.
- Vierkante productfoto als previewPlatforms croppen naar 1,91:1 — bij een vierkante foto verdwijnt de boven- en onderkant. Zet belangrijke elementen in het midden.
- Homepage zonder social-afbeeldingZonder ingestelde share-afbeelding is de homepage-preview van veel shops kaal. Twee minuten werk in de thema-instellingen.
Veelgestelde vragen
Moet ik code aanpassen in Shopify?
Meestal niet. Moderne thema's genereren og:-tags automatisch; jij stuurt ze via thema-instellingen en productafbeeldingen. Code aanpassen is alleen nodig bij oude of sterk aangepaste thema's.
Kan ik per product een andere social-afbeelding instellen?
Shopify gebruikt standaard de eerste productafbeelding. Een afwijkende og:image per product vereist thema-aanpassing (bijv. via een metafield) — voor de meeste shops is de eerste afbeelding goed genoeg.
Waarom ziet mijn preview er anders uit dan in de editor?
Platforms cachen previews. Controleer met MetaPeek wat er nú in je HTML staat — dat is wat platforms bij de volgende scrape zien.
Plak je URL en zie binnen twee seconden of alles klopt — op elk platform.