# Obrazki OG w HubSpot

Jedna linijka HubL w szablonie wpisu blogowego albo Head HTML na pojedynczej stronie.

## Gdzie to wpiąć

HubSpot sam ustawia tytuł, opis meta i obrazek wyróżniający wpisów blogowych, a to obrazek wyróżniający pokazuje udostępniony wpis. Żeby każdy wpis dostał własną wygenerowaną kartę, edytuj szablon wpisu blogowego motywu potomnego w Design Managerze: szablony to HubL, więc `content.absolute_url` (pełny adres strony lub wpisu) przechodzi przez filtr `urlencode` do adresu auto-OG, obok `standard_header_includes` w nagłówku. Bez dostępu do szablonu artykuł pomocy HubSpota pokazuje drugą drogę: otwórz stronę albo wpis, Settings → Advanced, i wklej tag og:image w pole Head HTML — jeden tag na stronę, z jej adresem po ?url=. Najpierw dopuść w panelu domenę, na której publikujesz strony.

`Blog post template (Design Manager), in the head`

```html
{# Blog post template of a child theme (Design Manager), in the <head>
   next to {{ standard_header_includes }}. HubL fills in each post's own
   address; urlencode makes it safe after ?url=. #}
{% set og_card = 'https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=' ~ (content.absolute_url|urlencode) %}
<meta property="og:image" content="{{ og_card }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

<!-- A single page or post without template access: the editor's
     Settings → Advanced → Head HTML, with that page's address
     URL-encoded after ?url=
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fwww.your-site.com%2Fpricing">
-->
```

## Pułapka

HubSpot ostrzega, że każdy meta tag powinien wystąpić raz: przy kilku og:image sieci mogą wybrać zły. Wpisy blogowe dostają jeden automatycznie z obrazka wyróżniającego, więc po dodaniu swojego otwórz źródło opublikowanego wpisu i sprawdź, czy został jeden og:image — jeśli tag z obrazka wyróżniającego nadal tam jest, wyłącz obrazek wyróżniający wpisu albo usuń go z szablonu i sprawdź ponownie.

## 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.

## 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=.