Açık Grafik Protokolü (Open Graph Protocol veya kısaca OG protokolü), bir web sayfasının sosyal medya platformlarındaki paylaşımlarında nasıl görüneceğini tanımlayan bir protokoldür. Next.js, bu protokolü uygulamak için kolay bir yöntem sunar.
Öncelikle, uygulamanın head bileşenine <meta> etiketleri eklemek gerekir. Bu etiketler, sosyal medya platformlarının web sayfasının açıklama, başlık, resim vb. özelliklerini anlamalarına yardımcı olur.
İlk adım olarak, next/head paketini projeye eklemek gerekir. Ardından, head bileşenine <meta> etiketleri ekleyebilirsiniz. Örneğin, aşağıdaki kod örneğinde og:title, og:description ve og:image etiketleri kullanılmaktadır:
import Head from ‘next/head’
function MyPage() {
return (
<div>
<Head>
<title>My Page</title>
<meta property="og:title" content="My Page" />
<meta property="og:description" content="This is my page." />
<meta property="og:image" content="https://example.com/my-image.jpg" />
</Head>
<h1>Welcome to my page!</h1>
<p>This is a great page, isn't it?</p>
</div>
)
}
export default MyPage
Yukarıdaki örnekte, MyPage bileşeni içinde Head bileşeni kullanılarak, title, og:title, og:description ve og:image etiketleri eklenmiştir. og:title özelliği, sayfanın başlığını belirlerken, og:description özelliği, sayfanın açıklamasını belirler. og:image özelliği ise, paylaşımın yapıldığı sosyal medya platformlarında kullanılacak resmi belirler.
Next.js, OG protokolüne uygun olarak meta etiketlerinin eklenmesini kolaylaştıran birçok özellik sunar. Bu özellikler, sosyal medya paylaşımlarının daha çekici ve ilgi çekici hale gelmesine yardımcı olabilir.