"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 2, "value": "Giriş" }, { "data": { "id": "web-sitesi-meta-verilerini-daha-önce-duymadınız-mı", "hProperties": { "id": "web-sitesi-meta-verilerini-daha-önce-duymadınız-mı" } }, "depth": 2, "value": "Web sitesi meta verilerini daha önce duymadınız mı?" }, { "data": { "id": "open-graph-meta-verilerini-ayarlamak", "hProperties": { "id": "open-graph-meta-verilerini-ayarlamak" } }, "depth": 2, "value": "Open Graph meta verilerini ayarlamak" }, { "data": { "id": "twitter-kartları-meta-verilerini-ayarlamak", "hProperties": { "id": "twitter-kartları-meta-verilerini-ayarlamak" } }, "depth": 2, "value": "Twitter Kartları meta verilerini ayarlamak" }, { "data": { "id": "kapanış-notları", "hProperties": { "id": "kapanış-notları" } }, "depth": 2, "value": "Kapanış notları" }]; const readingTime = { "minutes": 2, "words": 746, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "giriş", children: ["Giriş", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Web sitenizin bir bağlantısını sosyal medyada paylaştığınızda, güzel görünmesini istersiniz. Sadece sade bir bağlantı göstermek yerine, başlık, açıklama ve resim gibi tüm gerekli meta verilerle güzel bir önizleme göstermek istersiniz. İşte burada Open Graph ve Twitter (şimdi X) Kartlari meta verileri devreye girer." }), "\n", _jsxs(_components.p, { children: ["Bu makalede, web siteniz için Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") ve Twitter Kartları meta verilerini nasıl ayarlayacağınızı göstereceğiz. Ayrıca, meta verilerinizi sosyal medyada iyi göründüğünden emin olmak için nasıl test edeceğinizi de göstereceğiz."] }), "\n", _jsxs(_components.h2, { id: "web-sitesi-meta-verilerini-daha-önce-duymadınız-mı", children: ["Web sitesi meta verilerini daha önce duymadınız mı?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#web-sitesi-meta-verilerini-daha-önce-duymadınız-mı", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Bir insan bir web sitesini ziyaret ettiğinde, tarayıcı tarafından sunulan içeriği görür. Ancak bir bot (örneğin, bir arama motoru tarayıcısı veya bir sosyal medya tarayıcısı) bir web sitesini ziyaret ettiğinde, yalnızca ham HTML'yi görür. Web sitesi meta verileri, bot'a yapısal bilgileri sağlamak için devreye girer, böylece yapısal bir çıktı, örneğin bir önizleme kartı oluşturmada kullanılabilir." }), "\n", _jsxs(_components.p, { children: ["Bir web sitesine sağ tıklayıp \"Sayfa Kaynağını Görüntüle\"yi seçerseniz, web sitesinin ham HTML'sini görürsünüz. Meta veriler genellikle HTML'nin ", _jsx(_components.code, { children: "" }), " bölümünde bulunur ve şöyle görünür:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Yukarıdaki kod açıklayıcı: web sitesinin başlığı \"Benim Web Sitem\" ve açıklaması \"Bu benim web sitem.\"." }), "\n", _jsxs(_components.p, { children: ["Meta verilerde ", _jsx(_components.code, { children: "og:" }), " önekini fark edebilirsiniz, bu da ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), " anlamına gelir. Open Graph, Facebook tarafından geliştirilen bir protokoldur ve bir web sitesi hakkında yapısal bilgiler sağlar. Twitter (şimdi X) da kendi meta veri protokolüne sahiptir ve bu Twitter Kartları olarak adlandırılır."] }), "\n", _jsxs(_components.h2, { id: "open-graph-meta-verilerini-ayarlamak", children: ["Open Graph meta verilerini ayarlamak", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#open-graph-meta-verilerini-ayarlamak", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "En yaygın Open Graph meta etiketlerinden bazıları şunlardır:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Web sitesinin adı."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Geçerli sayfanın başlığı."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Web sitesinin kısa bir açıklaması."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": Görüntülenecek resmin URL'si."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": Web sitesinin ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "kanonik URL'si" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Web sitesinin türü (ör. web sitesi, makale, video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "og:title" }), " ile ", _jsx(_components.code, { children: "og:site_name" }), " arasındaki fark, ", _jsx(_components.code, { children: "og:title" }), " şu anki sayfanın başlığıdır (örneğin, blog yazısı başlığı), ", _jsx(_components.code, { children: "og:site_name" }), " ise web sitesinin adıdır (örneğin, blog adı). Bu sayfanın kaynak kodunu kontrol ederseniz, aşağıdaki Open Graph meta verilerini göreceksiniz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "og:type" }), " değerimiz ", _jsx(_components.code, { children: "article" }), " olduğu için, yazar ve yayın tarihi gibi ek meta veriler ekleyebiliriz. Örneğin, bir blog yazısı için etiketleri eklemek isterseniz, aşağıdaki meta verileri ekleyebilirsiniz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph, birden fazla değer eklemek isterseniz, aynı özellik adına sahip birden fazla ", _jsx(_components.code, { children: "" }), " etiketi kullanmanız gerektiğini belirtir."] }), "\n", _jsxs(_components.p, { children: ["Open Graph meta verilerini web sitenize ekledikten sonra, ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Paylaşım Hata Ayıklayıcı" }), " kullanarak test edebilirsiniz. Web sitenizin URL'sini girin ve \"Hata Ayıkla\" butonuna tıklayın. Meta verilerinizle ilgili herhangi bir sorun varsa, hata ayıklayıcı size hataları gösterecektir."] }), "\n", _jsxs(_components.p, { children: ["Facebook Paylaşım Hata Ayıklayıcı'da blog yazımızın ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "JSON Web Belirteçleri'ni (JWT) Ne Zaman Kullanmalıyım?" }), " örneği:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Facebook Hata Ayıklayıcı" }) }), "\n", _jsxs(_components.h2, { id: "twitter-kartları-meta-verilerini-ayarlamak", children: ["Twitter Kartları meta verilerini ayarlamak", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#twitter-kartları-meta-verilerini-ayarlamak", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Twitter Kartları, Open Graph meta verilerine benzer, ancak ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "kendi kurallarına" }), " sahiptir. Dört tür Twitter Kartı vardır:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Özet Kartı: Başlık, açıklama ve küçük resim içeren bir kart." }), "\n", _jsx(_components.li, { children: "Büyük Resimli Özet Kartı: Başlık, açıklama ve büyük resim içeren bir kart." }), "\n", _jsx(_components.li, { children: "Uygulama Kartı: Mobil uygulamaları tanıtmak için bir kart." }), "\n", _jsx(_components.li, { children: "Oynatıcı Kartı: Video ve ses içeriği için bir kart." }), "\n"] }), "\n", _jsx(_components.p, { children: "Blog yazımız için Büyük Resimli Özet Kartı kullanacağız. Blog yazımız için Twitter Kartları meta verileri şöyle görünecek:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Open Graph meta verilerinden iki ana fark şunlardır:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:card" }), " etiketi gereklidir ve kart türünü belirtir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:site" }), " etiketi, web sitesinin Twitter hesabını belirtir."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter Kartı Doğrulayıcı" }), " mevcut idi, ancak önizleme özelliği Tweet Composer'a taşındı (yine de kullanışlı)."] }), "\n", _jsxs(_components.h2, { id: "kapanış-notları", children: ["Kapanış notları", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kapanış-notları", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Web siteniz için Open Graph ve Twitter Kartları meta verilerini ayarlamak kolay ama kullanışlıdır. İnsanlar görüntüleri sever ve güzel bir önizleme kartı web sitenize daha fazla dikkat çekebilir. Web sitenizle iyi şanslar ve mutlu paylaşımlar!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };