Protokol Open Graph je otevřený standard metadat webových stránek pro snadnou analýzu vyhledávači, aplikacemi pro zasílání zpráv a sociálními sítěmi.
Nejoblíbenějším atributem metadat Open Graph je obrázek Open Graph – obrázek zobrazený vedle odkazů na webovou stránku jako náhled. Při sdílení jsou stránky s obrázky Open Graph poutavější a působí profesionálněji. Jakékoli webové stránky bez těchto metadat obrázků se zobrazují s šedými rámečky nebo obecnými ikonami, které nevyčnívají.
Zatímco myšlenkou obrázků Open Graph bylo poskytnout jednoduchý náhled jako doplněk na další informace o adrese URL odkazované webové stránky se trend posunul tak, aby obrázky Open Graph byly primární sdílený atribut. To je jasné, když vidíme obrázky Open Graph včetně velkého textu, log, barevných pozadí, časů čtení, dat publikování a ještě více! Nejlepší obrázky Open Graph současnosti poskytují uživatelům pocit z webu ještě předtím, než vůbec navštíví související webovou stránku.
Pojďme tedy vytvořit dynamický generátor obrázků Open Graph, který můžete použít pro své webové stránky!
Použité rámce
K vytvoření našeho webu a rozvržení obrázku Open Graph použijeme NextJS, styl Tailwind CSS ke všemu a Vercel k nasazení webu a také funkci generátoru Open Graph bez serveru. Samozřejmě využijeme také několik balíčků NPM, například chrome-aws-lambda .
Nastavení
Pojďme roztočit aplikaci NextJS. Pokud již máte aplikaci NextJS, můžete tento krok přeskočit.
> npx create-next-app open-graph-generator
Pojďme nastavit Tailwind CSS, aby bylo stylování jednodušší. Opět platí, že tento krok můžete přeskočit, pokud již máte nastaven framework CSS.
Nainstalujte Tailwind CSS a jeho závislosti:
> cd open-graph-generator
> npm i -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
Přidejte cesty k souborům JSX v konfiguraci Tailwindu
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Přidejte Tailwind do souboru stylů
@tailwind base;
@tailwind components;
@tailwind utilities;
Vytvořte rozvržení
Nejprve vytvoříme uživatelské rozhraní. Pokud máte nápad, jak by měl váš obrázek Open Graph vypadat, skvělé! Pokud ne, začněte s některými základními prvky a experimentujte! Neexistuje žádný špatný způsob, jak budovat svou image.
Pojďme vytvořit stránku pro naše rozvržení Open Graph. Běžná velikost obrázků OG je 1200 x 630 pixelů, takže tyto rozměry použijeme pro naše hranice. Přidejte název, datum, autora a profilový obrázek.
import { useRouter } from 'next/router'
export default function Opengraph() {
const { query } = useRouter()
const { title } = query
return (
<div className='w-[1200px] h-[630px]'>
<div class='flex flex-col h-full items-center justify-between px-12 py-24'>
<h1 class='text-7xl grow font-semibold'>{title}</h1>
<img class='w-24 h-24 rounded-full mb-4' src='/profile.jpg' />
<span class='text-3xl'>by Kartik Chaturvedi</span>
</div>
</div>
)
}
U tohoto kódu si všimnete několika věcí, pojďme si je tedy rozebrat.
Za prvé, ano, měli byste používat velké velikosti písma! Náhledy webových stránek pomocí obrázků Open Graph se obvykle zobrazují v malých velikostech (vzpomeňte si na odkazy ve zprávách nebo uvnitř tweetu). Tyto obrázky nelze snadno přiblížit, takže se chcete ujistit, že design je čistý a tučný a text je čitelný.
Za druhé, používáme useRouter React hook extrahujte title z URL a umístěte jej do naší komponenty React. To je klíčem k tomu, aby byl náš obrázek Open Graph dynamický. Budete moci předávat hodnoty přímo v adrese URL a získat sestavenou komponentu připravenou k převodu na obrázek.
Chcete-li to všechno vidět v akci, spusťte naše vývojářské prostředí.
> npm run dev
Navštivte localhost:3000/opengraph?title=Hello%20World a uvidíte řetězec dotazu analyzovaný do textu a vykreslený v rozložení.
Styl této komponenty rozvržení můžete dále upravovat, jak si přejete. Některé další parametry, které můžete přidat, jsou datum vydání, čas čtení, počet slov nebo počet lajků. Opravdu neexistuje žádný limit!
Nastavení funkce snímku obrazovky
Komponenta, kterou vidíme v prohlížeči výše, je samozřejmě stále komponenta React vykreslená do HTML, která nebude fungovat s Open Graph. Protokol vyžaduje obrázek, aby jej aplikace mohly konzistentně a okamžitě zobrazovat bez zpoždění při interpretaci nebo úpravě stylu.
Nejlepší způsob, jak převést naši komponentu React na obrázek, je pořídit snímek obrazovky prohlížeče. A to je přesně to, co budeme dělat ve funkci bez serveru. Použijeme chrome-aws-lambda , bezhlavá verze prohlížeče Chrome navržená pro aplikace bez serveru a často používaná pro automatizované testování uživatelského rozhraní. Budeme také potřebovat puppeteer , nástroj pro ovládání bezhlavých prohlížečů, jako je Chrome.
> npm i chrome-aws-lambda puppeteer-core
Vzhledem k tomu, že NextJS přímo podporuje funkce bez serveru, vše, co musíme udělat, je vytvořit funkci v /api složku.
import chromium from 'chrome-aws-lambda'
export default async function opengraph(req, res) {
// Parse the title
const { title } = req.query
const baseURL = req.headers.host
// Open the browser with the right window size
const browser = await chromium.puppeteer.launch({
args: chromium.args,
defaultViewport: { width: 1200, height: 630 },
executablePath: await chromium.executablePath, // change for localhost
headless: chromium.headless,
ignoreHTTPSErrors: true,
})
// Navigate a new browser page to the layout page
let page = await browser.newPage()
await page.goto(`${baseURL}/opengraph?title=${title}`, { waitUntil: 'networkidle2' })
// Take a screenshot
const screenshotBuffer = await page.screenshot({ type: 'png' })
await browser.close()
// Tell the consuming service to cache the image being sent
res.setHeader('Cache-Control', `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`)
res.setHeader('Content-Type', 'image/png')
res.status(200).send(screenshotBuffer)
}
Abyste to viděli v akci, budete muset změnit executablePath odkazovat na vaši místní instanci prohlížeče založeného na Chromiu. Pak, pokud navštívíte localhost:3000/api/generate-og?title=Hello%20World , uvidíte přesně stejné rozvržení jako předtím, kromě toho, že je to nyní obrázek PNG!
Naše funkce bez serveru načte rozložení s title předaný text, pořídí snímek obrazovky a vrátí obrázek připravený k použití.
V tuto chvíli je dobré nasadit kód a zjistit, že vše funguje tak, jak má. Budete potřebovat bezplatný účet Vercel a poté nastavíte věci ve Vercelu nebo použijete Vercel CLI k rychlému nasazení přímo z vašeho terminálu.
> vercel
🔍 Inspect: https://vercel.com/your-org/opengraph-demo/************ [3s]
✅ Preview: https://opengraph-demo-app.vercel.app [copied to clipboard] [54s]
Přejděte na trasu Open Graph API své subdomény projektu – například opengraph-demo-app.vercel.app/api/generate-og?title=This%20is%20working! a měli byste vidět svůj obrázek Open Graph vykreslený na obrazovce! Můžete zkusit změnit title dotazu a pokaždé se vygeneruje nový obrázek.
Propojit obrázek se stránkou
Zbývá pouze nasměrovat jakoukoli službu, která hledá obrázek Open Graph vašeho webu, na toto bezserverové API.
Protože Open Graph je pouze formát pro metadata, je vše definováno jako <meta> značky v záhlaví HTML webové stránky. U obrázku Open Graph musí mít obrázek meta property je og:image přičemž adresa URL obrázku je content . V případě našeho příkladu NextJS vytvořte novou stránku a funkci React a přidejte položku záhlaví pomocí NextJS Head komponent.
import Head from 'next/head'
export default function Demo() {
return (
<div>
<Head>
<meta property='og:image' content='https://opengraph-demo-app.vercel.app/api/generate-og?title=This%20is%20the%20Demo%20Page' />
</Head>
<div className='flex h-full justify-center items-center'>
<h1 className='text-4xl'>Hello World!</h1>
<p>This page is a demo for Open Graph images!</p>
</div>
</div>
)
}
Takže úplný průběh toho, co jsme udělali výše, je:
- Služba načte web a přečte metaznačku
- Značka metadat vede službu k rozhraní API bez serveru
- Serverless API pořídí snímek obrazovky komponenty React
- Serverless API vrací službě obrázek
Udělejte to dynamickým
Tento krok se bude u různých projektů lišit, ale základní nastavení je stejné. Aby byl váš obrázek Open Graph dynamický, budete muset předat dynamický title hodnotu do vašeho API v meta štítek. Nejjednodušší způsob, jak toho dosáhnout, je předat rekvizitu vaší funkci React. Například v NextJS můžete vytvářet dynamické trasy a načítat blogové příspěvky z databáze, CMS nebo jiného zdroje a extrahovat název, aby se zobrazil v horní části stránky. Jednoduše předejte stejnou hodnotu názvu API.
Rovněž se doporučuje přidat k obrázku několik dalších vlastností Open Graph.
import Head from 'next/head'
export default function BlogPost({post}) {
const ogImagePath = `https://opengraph-demo-app.vercel.app/api/generate-og?title=${post.title}`
return (
<div>
<Head>
<meta property='og:image' content={ogImagePath} />
<meta property='og:title' content={post.title} />
<meta property='og:description' content={post.description} />
<meta property='og:type' content='article' />
</Head>
<div className='flex h-full justify-center items-center'>
<h1 className='text-4xl'>{post.title}</h1>
<div>
{post.content}
</div>
</div>
</div>
)
}
export async function getStaticProps({ params }) {
const res = await fetch('https://.../posts')
const posts = await res.json()
const post = posts.filter((post) => post.title === params.slug).first
return {
props: {
post,
},
}
}
A to je vše! Váš obrázek Open Graph se zobrazí v náhledech online kdekoli, kde se protokol Open Graph používá k obohacení sdílených odkazů. Jednoduše přemístěte projekt do Vercelu pomocí --prod označte a uvidíte jej v akci, když sdílíte odkaz na svůj web.
Pokud máte nějaké dotazy, zpětnou vazbu nebo si chcete jen popovídat, můžete mě kontaktovat na Twitteru nebo GitHubu.