Proč se u odkazu na váš web ukazuje špatný obrázek (a jak to opravit)

Ve zkratce: webu chybí obrázek pro sdílení, takzvaný OG image. Vyrobíte ho za pár minut přímo tady na webu v nástroji Obrázek pro sdílení: napíšete nadpis, vyberete pozadí a logo a stáhnete hotový obrázek i s kódem do webu.

Proč se ukazuje špatný nebo žádný obrázek

Když někdo pošle odkaz, síť si na stránce najde obrázek sama. Hledá v hlavičce webu řádek og:image. Pokud tam není, dopadne to takhle:

• žádný obrázek – odkaz je jen řádek textu a snadno zapadne
• náhodný obrázek – síť vezme první, který na stránce najde, třeba ikonu z patičky
• oříznutý obrázek – fotka na výšku nebo logo se roztáhne a usekne
• starý obrázek – síť si náhled uložila dřív a nový nevidí

Odkaz s pěkným obrázkem zabere několikrát víc místa a lidé na něj kliknou spíš.

Jaké rozměry má obrázek pro sdílení mít

Rozměr 1200 × 630 px doporučuje Facebook a ostatní sítě ho berou také. Menší obrázek než 600 × 315 px ukáže Facebook jen jako malý čtvereček vedle textu.

Jak obrázek vyrobit krok za krokem

V nástroji Obrázek pro sdílení to zvládnete za pár minut:

1. Napište Nadpis, případně Podnadpis a Adresu webu. Dlouhý nadpis se zmenší sám.
2. Vyberte Pozadí: barvu, přechod, nebo fotku. Fotku posunete tažením přímo v náhledu.
3. U fotky nastavte Překryv (ztmavení, barvu, nebo přechod), ať je text čitelný.
4. Nahrajte Logo. Když na pozadí není vidět, zapněte mu barevný podklad.
5. Klikněte na Stáhnout obrázek.

Nadpis nechte krátký. Náhled je při sdílení malý a víc než pár slov nikdo nepřečte.

Jak obrázek nastavit na webu

Vlastní web (HTML, PHP)

Obrázek nahrajte na web a do hlavičky stránky vložte kód, který vám nástroj připraví. Nejdůležitější je řádek og:image s celou adresou obrázku. Poslední řádek říká síti X, ať ukáže velký náhled:

<meta property="og:title" content="Titulek stránky">
<meta property="og:description" content="Krátký popis stránky.">
<meta property="og:image" content="https://vasweb.cz/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

WordPress s Rank Math

1. Otevřete stránku nebo článek v úpravách.
2. Vpravo nahoře klikněte na Rank Math a otevřete záložku Social.
3. V části Facebook klikněte na Add Image, nahrajte obrázek a stránku uložte.

Výchozí obrázek pro celý web: Rank Math → Titles & Meta → Global Meta → OpenGraph Thumbnail.

WordPress s Yoast SEO

1. Otevřete stránku nebo článek v úpravách.
2. V panelu Yoast SEO (pod textem nebo vpravo) rozbalte Social media appearance.
3. Nahrajte tam obrázek a stránku uložte.

Výchozí obrázek pro celý web: Yoast SEO → Settings → General → Site basics, pole Site image.

Názvy voleb jsou anglicky, v české verzi pluginu můžou být přeložené. Když u stránky žádný obrázek nenastavíte, použijí oba pluginy její náhledový obrázek.

Jak si náhled ověřit a obnovit

Sítě si náhledy ukládají, takže po změně obrázku ještě chvíli ukazují ten starý. Za pár dní si ho obnoví samy. Kdo nechce čekat, obnoví ho ručně:

Facebook a Messenger

Otevřete Sharing Debugger (otevře se v novém okně), vložte adresu stránky a klikněte na Debug. Potom na Scrape Again a Facebook si stránku načte znovu. Musíte být přihlášení.

LinkedIn

Otevřete Post Inspector (otevře se v novém okně), vložte adresu a klikněte na Inspect. Náhled se tím zároveň obnoví.

X (Twitter)

Dřívější nástroj Card Validator už náhled neukazuje. Vložte adresu do nového příspěvku a náhled se vykreslí přímo tam. Příspěvek odesílat nemusíte.

WhatsApp

Vlastní nástroj nemá. Připište za adresu otazník a číslo, třeba vasweb.cz/?v=2, a načte si ji znovu.

Co na obrázek dát

• krátký nadpis – tři až šest slov, velkým písmem
• logo nebo adresu webu – ať je hned jasné, čí odkaz to je
• čitelný text – na fotku patří překryv, na světlé pozadí tmavé písmo
• nic důležitého v rozích – sítě okraje někdy oříznou

Druhá drobnost, kterou web v hlavičce potřebuje, je ikona v záložce prohlížeče. Jak ji vyrobit, čtěte v článku Jak vytvořit favicon za minutu.

Na webech, které tvořím na míru, má každá důležitá stránka vlastní náhled pro sdílení. Chystáte nový web? Začít můžete návrhem webu zdarma.