Obrazki OG w
Wix

Gdzie to wpiąć

Dla strony statycznej Wix ma na to osobne pole: Pages & Menu → More Actions przy stronie → SEO basics → Advanced SEO → Additional tags → + Add New Tag — tylko tagi meta i link, do 10 na stronę, z adresem tej strony po ?url=. Strony dynamiczne kolekcji mają jeden wspólny zestaw ustawień SEO, a ich og:image domyślnie bierze główny obrazek z kolekcji. Żeby każdy wpis dostał własną kartę, włącz Dev Mode i wklej snippet do kodu strony dynamicznej: `wixLocationFrontend.url` to adres wpisu, a `wixSeoFrontend.setMetaTags` ustawia tagi obrazka. Ta funkcja nadpisuje wcześniej ustawione meta tagi, więc snippet najpierw czyta obecne — poza onReady, jak każe Wix — i oddaje resztę z powrotem; to, że onReady zwraca obietnicę, sprawia, że roboty wyszukiwarek widzą wynik. Na darmowej stronie Wix ten adres wygląda jak nazwa-uzytkownika.wixsite.com/nazwa-strony/…, więc to ten host dodajesz w panelu, dopóki nie podłączysz domeny.

Dynamic item page → page code (Velo, Dev Mode on)

// Static pages need no code: Pages & Menu → More Actions → SEO basics →
// Advanced SEO → Additional tags → + Add New Tag:
//   <meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fwww.your-site.com%2Fabout">
//
// Dynamic item pages share one set of SEO settings, so the card is set here.
import wixSeoFrontend from 'wix-seo-frontend';
import wixLocationFrontend from 'wix-location-frontend';

const CARD = 'https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=';
const REPLACED = ['og:image', 'og:image:width', 'og:image:height', 'twitter:image', 'twitter:card'];

// Wix asks for the getter OUTSIDE onReady to get the page's current tags.
const current = wixSeoFrontend.metaTags;

$w.onReady(() => {
  // The item's own address, without ?query or #hash.
  const page = wixLocationFrontend.url.split(/[?#]/)[0];
  const image = CARD + encodeURIComponent(page);

  // setMetaTags overwrites the meta tags set earlier: pass the others back.
  const kept = current.filter((tag) => !REPLACED.includes(tag.property ?? tag.name));

  // Returned, so search bots see the tags (onReady waits for this promise).
  return wixSeoFrontend.setMetaTags([
    ...kept,
    { property: 'og:image', content: image },
    { property: 'og:image:width', content: '1200' },
    { property: 'og:image:height', content: '630' },
    { name: 'twitter:card', content: 'summary_large_image' },
  ]);
});

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