#000000
Gradiens iránya
#000000
John Doe
July 13
• 5 min read
Miután elkészült az OG képed, mentsd el egyszerűen og.png néven a /public mappádba. Ezután kövesd az alábbi lépéseket a technológiai stacked alapján — legyen szó sima HTML-ről, Next.js-ről vagy Reactról. Egyszerű beállítás, tökéletes előnézet.
1
2
3
4
5
6
7
8
9
10
11
<!-- OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://mydomain.co/og.png" />
<meta property="og:url" content="https://mydomain.co" />
<!-- X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://mydomain.co/og.png" />
<!-- DO NOT forget to change the 'mydomain.co' to your domain. -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// app/page.js or app/page.tsx
export const metadata = {
title: "Your Page Title",
description: "Your page description",
openGraph: {
title: "Your Page Title",
description: "Your page description",
url: "https://mydomain.co",
siteName: "Your Site Name",
images: [
{
url: "/og.png",
width: 1200,
height: 630,
alt: "OG Image Alt Text",
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
images: ["/og.png"],
},
};
1
2
3
4
5
6
7
8
9
10
11
// Using react-helmet in React projects
import { Helmet } from "react-helmet";
<Helmet>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://mydomain.co/og.png" />
<meta property="og:url" content="https://mydomain.co" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://mydomain.co/og.png" />
</Helmet>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// gatsby-config.js
module.exports = {
plugins: ["gatsby-plugin-react-helmet"],
};
// in your page/component
import { Helmet } from "react-helmet";
<Helmet>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://mydomain.co/og.png" />
<meta property="og:url" content="https://mydomain.co" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://mydomain.co/og.png" />
</Helmet>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Nuxt 3 - in a page component
<script setup>
useHead({
title: 'Your Page Title',
meta: [
{ property: 'og:title', content: 'Your Page Title' },
{ property: 'og:description', content: 'Your page description' },
{ property: 'og:image', content: 'https://mydomain.co/og.png' },
{ property: 'og:url', content: 'https://mydomain.co' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:image', content: 'https://mydomain.co/og.png' },
],
})
</script>
Nem tudod, hogyan fog kinézni a weboldalad, amikor megosztod a közösségi médiában? A OG Kép Előnézet eszköz megmutatja, hogyan fog megjelenni a linked olyan platformokon, mint a Facebook, Twitter (X) és a Discord.
Illeszd be az URL-t, és kapj egy valós idejű előnézetet az oldaladról – pont úgy, ahogy a felhasználók látni fogják az üzenetekben vagy a hírfolyamban.
Ez a legegyszerűbb módja annak, hogy észrevedd a hibákat, tökéletesítsd a márkád, és gondoskodj róla, hogy minden megosztott linked hatást keltsen.
⚡ Azonnali szimuláció • Nincs szükség beállításra • Valósághű közösségi előnézet
Az OG kép (Open Graph kép) az a vizuális előnézet, amely akkor jelenik meg, amikor megosztod a linkedet olyan platformokon, mint a Twitter (X), Facebook, LinkedIn, Discord vagy iMessage. Ez az első benyomás – és eldönti, hogy a felhasználó rákattint-e vagy továbbgörget.
Az egyedi OG képek növelik a linkjeid elköteleződését, biztosítják a márka egységességét, és segítenek kitűnni a zsúfolt hírfolyamokban. Kis erőfeszítés, nagy megtérülés.
✅ Ajánlott méret: 1200×630 pixel. Használj éles szöveget, magas kontrasztot és releváns képi elemeket.
Nyelv kiválasztása
Téma beállítása
© 2025 ReadyTools. Minden jog fenntartva.