Online generátor zdarma

Obrázek pro sdílení na sociálních sítích – online generátor

Napiš nadpis. Vyber pozadí a logo. Stáhni. Vyrobíš obrázek 1200 × 630 px (OG image), který se ukáže, když někdo sdílí odkaz na tvůj web na Facebooku, LinkedInu nebo WhatsAppu. Zdarma a bez nahrávání na server.

Co chceš udělat?

    1. Napiš Nadpis, případně Podnadpis a Adresu webu.
    2. Vyber Pozadí: barvu, přechod, nebo fotku.
    3. Zmáčkni Stáhnout obrázek.
    1. Přepiš Nadpis, dlouhý se zmenší sám.
    2. Vyber Písmo, Barvu textu a Zarovnání.
    3. Velikost doladíš posuvníkem Velikost nadpisu.
    1. V Pozadí zvol Fotka a vyber ji.
    2. Tažením v náhledu ji posuň, posuvníkem přibliž.
    3. V Překryvu fotky zvol ztmavení, barvu, nebo přechod, ať je text čitelný.
    1. Vlastní web: nahraj obrázek na web a vlož kód mezi <head> a </head>.
    2. WordPress s Rank Math: v úpravě stránky otevři Rank Math → Social → Add Image.
    3. WordPress s Yoast SEO: v úpravě stránky otevři v panelu Yoast SEO část Social media appearance a nahraj obrázek.
    4. Podrobněji v části Jak obrázek dostat na web níže.

Beta Nástroj je ve vývoji. Našel jsi chybu? Napiš mi na stepan@webpodnos.cz, ať ji opravím.

Připravuju obrázek…

Připravuju obrázek…

Takhle zhruba bude vypadat odkaz

Přesný vzhled se liší podle sítě. Facebook, LinkedIn, WhatsApp i Messenger si text pod obrázkem berou z titulku a popisku v kódu níže.

Kód do hlavičky webu

Nahraj obrázek do hlavní složky webu a vlož tyhle řádky mezi <head> a </head>. Titulek a popis přepiš podle stránky.

Jak obrázek dostat na web

Na vlastním webu stačí obrázek nahrát a vložit kód. Ve WordPressu to za tebe udělá SEO plugin, kód z nástroje pak nepotřebuješ.

Vlastní web (HTML, PHP)

  1. Nahraj og-image.jpg do hlavní složky webu.
  2. Kód z nástroje vlož mezi <head> a </head>.
  3. V řádku og:image musí být celá adresa obrázku včetně https://.

WordPress s Rank Math

  1. Otevři stránku nebo článek v úpravách.
  2. Vpravo nahoře klikni na Rank Math a otevři záložku Social.
  3. V části Facebook klikni na Add Image, nahraj obrázek a stránku ulož.
  4. Pro celý web: Rank Math → Titles & Meta → Global Meta → OpenGraph Thumbnail.

WordPress s Yoast SEO

  1. Otevři stránku nebo článek v úpravách.
  2. V panelu Yoast SEO (pod textem nebo vpravo) rozbal Social media appearance.
  3. Nahraj tam obrázek a stránku ulož.
  4. Pro celý web: Yoast SEO → Settings → General → Site basics, pole Site image.

Proč se u odkazu ukazuje špatný obrázek a jak náhled obnovit, je v článku Proč se u odkazu na váš web ukazuje špatný obrázek.

Názvy voleb uvádím anglicky. V české verzi pluginu můžou být přeložené, jsou ale na stejném místě. Když u stránky žádný obrázek nenastavíš, použijí oba pluginy její náhledový obrázek. Výsledek si ověř v nástroji Sharing Debugger od Facebooku, který zároveň smaže starý uložený náhled.

Co na takový obrázek dát

Obrázek pro sdílení je vizitka tvého odkazu. Dostane malý prostor a pár vteřin pozornosti, proto je lepší jednoduchý.

Krátký nadpis

Při sdílení je obrázek malý, často jen pruh v mobilu. Víc než pár slov nikdo nepřečte, takže nadpis dej velký a stručný.

Logo nebo adresa webu

Kdo obrázek uvidí mimo kontext, hned pozná, odkud je. Stačí malé logo nahoře a adresa dole.

Bezpečný okraj

Sítě si okraje někdy ořezávají nebo je zakryjí tlačítkem. Nástroj proto nechává kolem textu okraj 72 px. Do rohů nic důležitého nedávej.

Čitelnost

Text musí být vidět i v malém náhledu. Na fotku dej překrytí, na světlé pozadí tmavé písmo.

Do hlavičky webu patří i malá ikona v záložce prohlížeče. Vyrobíš ji v favicon generátoru. Fotku na pozadí můžeš předtím zmenšit nebo oříznout v aplikaci na obrázky. Na webech, které tvořím na míru, tohle řešit nemusíš – náhled pro sdílení i ikonu nastavím už při tvorbě.

Často se ptáš

Co je OG obrázek a k čemu je?

Je to obrázek, který se ukáže u odkazu, když ho někdo pošle na Facebooku, LinkedInu, WhatsAppu, Messengeru nebo Slacku. Zkratka OG je z „Open Graph“, což je pravidlo, podle kterého si sítě berou z webu obrázek a text. Bez vlastního obrázku si síť vybere nějaký ze stránky, nebo žádný, a odkaz pak vypadá nedbale.

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

1200 × 630 px, tedy poměr zhruba 1,91 : 1. Tak to doporučuje Facebook a ostatní sítě to berou taky. Nástroj ho dělá přesně v téhle velikosti. Menší než 600 × 315 px už Facebook ukáže jen jako malý čtvereček vedle textu.

Jak obrázek dostanu na web?

Nahraj ho do hlavní složky webu a do hlavičky stránky vlož kód z nástroje. Hlavní je řádek og:image s úplnou adresou obrázku včetně https://. Titulek (og:title) a popis (og:description) přepiš podle konkrétní stránky.

Jak to nastavit ve WordPressu?

Přes SEO plugin, kód do hlavičky pak nepotřebuješ. V Rank Math otevři stránku v úpravách, klikni na Rank Math, záložka Social, a u Facebooku nahraj obrázek přes Add Image. V Yoast SEO rozbal v panelu pluginu část Social media appearance a obrázek nahraj tam. Výchozí obrázek pro celý web má Rank Math v Titles & Meta → Global Meta → OpenGraph Thumbnail a Yoast SEO v Settings → General → Site basics, pole Site image.

Mám WordPress bez SEO pluginu. Co teď?

Samotný WordPress obrázek pro sdílení nenastavuje. Nejjednodušší je nainstalovat Rank Math nebo Yoast SEO, obojí má bezplatnou verzi, která tohle umí. Kdo plugin nechce, vloží kód z nástroje do hlavičky šablony, což už je práce pro někoho, kdo se v šabloně vyzná.

Proč se při sdílení ukazuje starý nebo žádný obrázek?

Sítě si náhledy ukládají. Facebook má nástroj Sharing Debugger, kde stránku znovu načteš a starý náhled smažeš, LinkedIn má Post Inspector. U WhatsAppu někdy pomůže připsat za adresu otazník a číslo, třeba tvujweb.cz/?v=2, aby si ji síť načetla znovu.

Dá se fotka posunout nebo přiblížit?

Ano. Fotka vyplní celé plátno a tažením přímo v náhledu ji posuneš, aby byl hlavní motiv tam, kde ho chceš. Posuvníkem Přiblížení fotky ji zvětšíš, pak jde posouvat víc. Přes fotku jde dát překryv: ztmavení, jednu barvu, nebo přechod dvou barev, s nastavitelnou silou.

Má smysl mít jiný obrázek pro každou stránku?

U úvodní stránky a těch nejdůležitějších ano, zbytek si poradí s jedním společným. U článků a služeb se hodí vlastní nadpis přímo na obrázku. Nástroj ti stačí otevřít znovu a přepsat text.

Jak velký smí soubor být?

Nástroj ukládá JPG v kvalitě, která na sdílení bohatě stačí, a u obrázku vidíš jeho velikost. Některé aplikace, třeba WhatsApp, bývají citlivé na obrázky nad zhruba 300 KB. Když je fotka na pozadí hodně členitá, zkus silnější překryv, soubor se zmenší.

Logo na pozadí není vidět. Co s tím?

V nastavení loga zapni Podklad pod logem a vyber barvu, třeba bílou. Logo dostane vlastní barevné pole a bude vidět i na tmavé fotce. Hodí se, když klient nemá světlou variantu loga.

Proč se mi okraje obrázku ořezaly?

Některé sítě obrázek ořezávají nebo ukazují v jiném poměru stran. Proto nástroj nechává kolem textu a loga bezpečný okraj. Do rohů nic důležitého nedávej.

Posílají se moje fotka a logo někam?

Ne. Všechno se děje přímo ve tvém prohlížeči a obrázky tvoje zařízení neopustí. Nic se nenahrává na server a nic se neukládá.

Je nástroj opravdu zdarma?

Jo. Bez registrace, bez vodoznaku a bez omezení.