Tak naprawiliśmy błędne podglądy wpisów na blogu

Udostępniłem link do naszego bloga na platformie X. Obrazek podglądu wyglądał źle. Zamiast grafiki do artykułu technicznego, wyświetlał baner sprzedażowy.

Sprawdziłem nasze siedem ostatnich wpisów. Wszystkie miały ten sam baner sprzedażowy. Nasze techniczne analizy wyglądały jak reklamy. To uderzyło w naszą wiarygodność.

Problem był prosty. Nasz kod posiadał regułę zapasową (fallback). Jeśli wpis nie miał wyróżnionej grafiki, używał domyślnego baneru sprzedażowego. Ponieważ nie ustawiliśmy wyróżnionych grafik dla naszych 42 wpisów, każdy z nich korzystał z tego samego obrazu.

Mieliśmy dwa wyjścia:

  • Opcja A: Ręczne stworzenie 42 obrazów. To zajmuje czas i generuje dodatkową pracę przy każdym nowym wpisie.
  • Opcja B: Zbudowanie dynamicznego generatora obrazów. Tworzy on automatycznie spersonalizowaną grafikę dla każdego wpisu.

Wybraliśmy opcję B. Zbudowaliśmy mały silnik przy użyciu PHP GD.

Oto jak to działa:

  • Silnik tworzy plik PNG o wymiarach 1200x630 na żądanie.
  • Wykorzystuje ciemne tło oraz tytuł wpisu.
  • Pobiera tytuł z bazy danych.
  • Zapisuje obraz na dysku po pierwszym wyrenderowaniu.
  • Każde kolejne zapytanie serwuje plik z pamięci podręcznej. Dzięki temu działa to bardzo szybko.

Podczas budowania rozwiązania rozwiązaliśmy dwa konkretne problemy:

  1. Obsługa języków: Korzystanie wyłącznie z fontów łacińskich, takich jak Inter, powodowało, że tekst japoński wyświetlał się jako puste kwadraty. Dodaliśmy mechanizm sprawdzający, który podmienia czcionkę na Noto Sans JP w przypadku japońskich tytułów.

  2. Ton wizualny: Profesjonalne blogi technologiczne, takie jak Vercel czy PlanetScale, używają czystych, ciemnych kart. Dopasowaliśmy ten styl, aby budować zaufanie wśród naszych czytelników.

Kluczowe lekcje dla Ciebie:

  • Przeprowadź audyt podglądów w mediach społecznościowych. Użyj narzędzia, aby sprawdzić, czy Twoje tagi og:image działają poprawnie.
  • Unikaj ręcznego tworzenia grafik dla każdego wpisu. To nie skaluje się dobrze.
  • Stosuj proste rozwiązania. PHP GD wraz z pamięcią podręczną na dysku jest lekkie i skuteczne.
  • Planuj obsługę wielu języków. Zawsze uwzględniaj czcionkę, która obsługuje pełny zestaw znaków.

Grafiki na Twoim blogu reprezentują Twoją markę. Nie pozwól, aby domyślny fallback zepsuł Twoje pierwsze wrażenie.

Źródło: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al