Jeden skrypt w Custom Code dla strony CMS, z {{Slug}} w adresie obrazka.
Social preview strony CMS w Framerze przyjmuje pole typu Image z kolekcji (Page Settings → Page images → Social preview → CMS Variables), więc wygenerowany adres musi wejść przez własny kod. Dokumentacja Framera pokazuje zmienne CMS we własnym kodzie ze składnią `{{}}` dla JSON-LD; wstaw zmienną Slug z wyboru zmiennych w edytorze zamiast wpisywać ją ręcznie, bo dokładna nazwa zależy od twojej kolekcji. Wtedy jeden skrypt obsłuży każdy wpis: Project Settings → Custom Code → Add Script, umieść go w nagłówku i zaznacz na liście tylko stronę CMS. Wartości są escapowane, chyba że dodasz `unsafeRaw`, a slug nie potrzebuje ani jednego, ani drugiego. Po publikacji otwórz źródło strony jednego wpisu i sprawdź, czy `{{Slug}}` zamieniło się w jego slug.
Project Settings → Custom Code → Add Script (CMS page, head)
<!-- Project Settings → Custom Code → Add Script. Place it in the head and
select only your CMS page (e.g. the blog post page) in the page list.
Insert the Slug variable from the editor's picker (shown here as
{{Slug}}) and check one published item's source. -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://www.your-site.com/blog/{{Slug}}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Framer prints its own twitter:image before custom code, and X
reads twitter:image before og:image. -->
<meta name="twitter:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://www.your-site.com/blog/{{Slug}}">Framer wypisuje własne og:image i twitter:image, wzięte z Social preview strony, przed twoim kodem — widać to w źródle każdej opublikowanej strony na Framerze. X czyta twitter:image przed og:image, więc skrypt z samym og:image zmieni kartę na LinkedInie i w Slacku, a X zostanie przy starym obrazku. Ustaw też twitter:image i wyczyść Social preview strony CMS, żeby Framer nie miał własnego obrazka do wypisania.
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.
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=.