Menu
Załóż konto
Shopify

Obrazki OG w
Shopify

Blok og:image w snippets/meta-tags.liquid motywu Dawn zamieniony na jedną linię Liquida.

Gdzie to wpiąć

Motywy Shopify same wypisują tagi Open Graph. W Dawn siedzą w `snippets/meta-tags.liquid`, który renderuje `layout/theme.liquid`, a blok `if page_image` wypisuje tam og:image ze zdjęcia produktu, kolekcji albo artykułu — pozostałe strony dostają obrazek do udostępniania z Online Store → Preferences. Otwórz Online Store → ⋯ → Edit code (najpierw zduplikuj motyw, jak radzi Shopify) i podmień ten blok: `og_url`, ustawiane na górze tego samego pliku z `canonical_url`, przechodzi przez `url_encode` do adresu auto-OG. Dawn nie wypisuje `twitter:image`, więc X sięga po og:image i wszędzie widać tę samą kartę. Wcześniej dodaj w panelu domenę, której używają twoje adresy kanoniczne. Liquid ma też `hmac_sha256`, więc podpisany adres `/i/` też by zadziałał — tyle że sekret do podpisywania leżałby wtedy w kodzie motywu, który przeczyta każde konto personelu z dostępem do motywów.

snippets/meta-tags.liquid

{%- comment -%}
  Dawn: snippets/meta-tags.liquid, rendered from layout/theme.liquid.
  Replace Dawn's whole `if page_image` block (it prints og:image from the
  product, collection or article image) with the lines below.
  Do not just delete it: when a theme prints no og:image, Shopify adds
  one from page_image by itself.
  og_url is assigned at the top of this file: canonical_url, or the
  shop origin on the password page.
{%- endcomment -%}
{%- assign og_card = og_url | url_encode | prepend: 'https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=' -%}
<meta property="og:image" content="{{ og_card }}">
<meta property="og:image:secure_url" content="{{ og_card }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
{%- comment -%}
  Leave the rest of the file as it is. Dawn prints no twitter:image, so X
  falls back to og:image, and twitter:card is already summary_large_image.
{%- endcomment -%}
Pułapka

Aktualizacja motywu nie zawsze zachowa twoją zmianę. Shopify instaluje aktualizację jako nową kopię motywu, a jeśli twoje zmiany w kodzie się z nią gryzą, w zaktualizowanej kopii znikają wszystkie — blok og:image z Dawn wraca, karty nie ma i nic o tym nie ostrzega. Po każdej aktualizacji motywu zajrzyj do źródła strony produktu i sprawdź, czy og:image dalej wskazuje na kartę.

Jak działa adres obrazka

Nic na Twojej stronie nie woła API: adres obrazka pobiera robot, który czyta tag, a pierwsze żądanie odczytuje tytuł, opis i obrazek strony i renderuje kartę. Kolejne żądania dostają ten sam plik. Obrazek dostają tylko strony z domen dopuszczonych w panelu — każdy inny adres dostaje 403 — więc w adresie nie ma klucza. Stronę czytamy ponownie najwyżej co 60 min, więc nowy tytuł pojawi się w tym czasie.

Obrazki OG bez kodu

Ile to kosztuje

100 obrazków miesięcznie za darmo, potem $9 za 2 000. Nowa karta zużywa jeden obrazek z limitu; kartę zapisujemy według tego, co na niej jest, więc niezmieniona strona nigdy nie kosztuje drugi raz, także udostępniona z ?utm_source=.

Inne frameworki