Grafiki dla wydawców: podglądy artykułów, nagłówki newsletterów i karty do social mediów na dużą skalę

Wydawca udostępnia każdy artykuł, a każdy udostępniony artykuł wyświetla podgląd: og:image (protokół Open Graph) w kartach linków na Facebooku, LinkedInie, X, WhatsAppie, Slacku i Discordzie. Większość serwisów albo używa zdjęcia z artykułu – które każda aplikacja przycina inaczej – albo ogólnej karty z logo. Do tego dochodzą grafiki do social mediów, karty z najlepszym cytatem, alerty o pilnych wiadomościach, nagłówki newsletterów i piny, więc produkcja grafik zamienia się w codzienną kolejkę. W Shareglint każdy format to szablon wypełniany danymi samego artykułu, więc grafiki pojawiają się razem z tekstami.

Podgląd dla każdego artykułu, także z archiwum

Najważniejsza jest karta podglądu linku. Są trzy sposoby, żeby objąć nią każdy artykuł – od najmniejszej do największej ilości kodu:

• Auto OG – jeden tag w <head> serwisu odczytuje tytuł, opis i zdjęcie każdej strony i renderuje kartę w barwach marki, dla domen, które dopuścisz (obrazki OG bez kodu). Jeśli pracujesz na WordPressie, zajrzyj do poradnika obrazki OG w WordPressie bez kodu (po angielsku).
• Podpisany adres w szablonie artykułu – szablon wylicza adres obrazka z tytułu, działu, autora i zdjęcia i podpisuje go twoim sekretem; nic się nie renderuje, dopóki crawler go nie pobierze (podpisane adresy obrazków, po angielsku).
• API w chwili publikacji – hak publikacji w CMS-ie wywołuje POST /v1/images i zapisuje adres przy artykule.

Dwa pierwsze sposoby działają leniwie: archiwum 20 000 artykułów zużywa rendery tylko na te teksty, które ktoś faktycznie udostępnia. Jak powinien wyglądać podgląd w każdej sieci, opisują strony czym jest obrazek Open Graph i rozmiar obrazka OG.

Szablony na cały tydzień redakcji

Każdy z nich renderuje się w każdym presecie rozmiaru (og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720): kartę linku 1,91:1, kwadratowy albo pionowy (4:5) post, relację 9:16 i pin 2:3 dostajesz z jednego zapytania. Kategorie blog i wiadomości w galerii pokazują je wyrenderowane.

Pilne wiadomości bez grafika

Karta z pilną wiadomością ma za każdym razem ten sam układ – etykieta, tytuł, miejsce, godzina. Wywołaj API z haka publikacji, podając szablon breaking-news i pola tekstu, a grafika do social mediów będzie gotowa razem z artykułem:

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "template": "breaking-news",
    "sizes": ["og", "square", "story"],
    "format": "jpeg",
    "modifications": {
      "kicker": "Pilne", "headline": "Rada miasta zatwierdziła nową linię tramwajową",
      "location": "Wrocław", "source": "Northwind Times", "timestamp": "14:05",
      "photo": "https://cdn.example.com/photos/tram.jpg"
    }
  }'

Długie tytuły zmniejszają się, żeby zmieścić się w swoim polu, zamiast wychodzić poza obrazek. Statyczny obrazek renderuje się w kilka sekund; poprawienie tytułu to nowe zapytanie z nowymi wartościami, a stara karta zostaje pod swoim adresem.

Newslettery

Nagłówek każdego wydania – numer, data, trzy najważniejsze teksty – to szablon weekly-digest albo newsletter-issue renderowany raz na wysyłkę. Grafiki spersonalizowane (imię czytelnika, pogoda w jego mieście) robi podpisany adres wstawiony w pole korespondencji seryjnej narzędzia do mailingu; renderuje się w chwili dostarczenia (spersonalizowane grafiki w mailach). W mailach używaj JPEG-a albo PNG; WebP nie wszędzie jest obsługiwany (Can I email).

Piny i posty w social mediach

Wydawcy piszący o stylu życia, jedzeniu i poradach potrafią ściągać z Pinteresta realny ruch: pin 2:3 do każdego artykułu, publikowany przez automatyczną publikację z RSS, którą oferuje sam Pinterest (piny na Pinterest, po angielsku). Zespołom social media te same dane artykułu wypełniają karty z cytatami i karuzele (grafiki do social mediów).

Sprostowania i aktualizacje

Tytuły zmieniają się po publikacji – literówka, nowe fakty, poprawka na prośbę prawnika. Adres obrazka jest związany z jego wartościami, więc poprawiony tytuł oznacza nowy obrazek pod nowym adresem: zaktualizuj og:image artykułu (podpisany adres w szablonie zmienia się sam, gdy zmienia się tytuł), a przy następnym udostępnieniu pojawi się poprawiona wersja. Sieci trzymają podglądy w pamięci podręcznej, więc linki udostępnione przed poprawką mogą pokazywać starą kartę, dopóki sieć nie pobierze strony ponownie; większość z nich ma debugger, który odświeża podgląd, a nasz poradnik o nieaktualnych podglądach omawia każdą z nich.

Fonty i marka

Szablony korzystają z rodzin fontów zainstalowanych na naszym rendererze (GET /v1/fonts); plików z firmowymi krojami nie wgrasz. Tytuły o charakterystycznej typografii powinny najpierw sprawdzić listę i wybrać najbliższą zainstalowaną rodzinę albo trzymać tytuł w tej części karty, gdzie nie ma zdjęcia i różnica mniej rzuca się w oczy. Kolory (accent) i jasny albo ciemny motyw (theme) działają w każdym szablonie.

Koszt

Jeden render na obrazek i rozmiar; powtórki są darmowe, a leniwe adresy renderują tylko to, co ktoś udostępnia. Serwis publikujący 30 artykułów dziennie, z kartą linku i kwadratowym postem do każdego, zużywa około 1800 renderów miesięcznie. 100 renderów w planie Free ma znak wodny; Starter kosztuje $9 miesięcznie za 2 000 renderów, a Pro $29 za 10 000 (cennik).

Czego nie robi

• Nie ma wtyczek do CMS-ów: WordPress i każdy inny CMS korzystają z auto OG, podpisanego adresu w szablonie albo wywołania API.
• Nie edytuje zdjęć i nie generuje obrazów przez AI; szablon układa zdjęcie i tekst, które wysyłasz.
• Nie publikuje w social mediach i nie planuje postów; robi to twoje narzędzie do social mediów na podstawie adresów obrazków.
• Nie pozwala wgrywać fontów.