Web Sitesi Meta Bilgisi (Scraping): OpenGraph, Twitter Cards ve CORS Mimarisi
Bir web sitesinin linkini WhatsApp'a veya Twitter'a yapıştırdığınızda otomatik olarak çıkan o muazzam önizleme kartları sihir değildir; arka planda sitenin <head> etiketleri arasına gizlenmiş Meta Protocol yapılarının ayrıştırılmasıdır (Parsing). Ancak, frontend ortamında (Tarayıcıda JavaScript ile) başka bir domain'e gidip bu bilgileri okumaya kalktığınızda doğrudan CORS (Cross-Origin Resource Sharing) hatasına çarparsınız. Geliştirdiğimiz bu Meta Bilgi Sorgulama Aracı, tarayıcı kısıtlamalarını aşmak için arka planda sunucu tabanlı (Server-side) bir cURL Scraping motoru kullanır.
Sistemimiz hedef URL'e bir HTTP GET isteği gönderir, dönen Raw HTML verisini sunucuda DOMDocument nesnesi ile parse eder ve standart SEO meta etiketlerinin yanı sıra sosyal medya protokollerini (OG ve Twitter) regex kullanmadan güvenli bir şekilde ayrıştırarak (Extract) size temiz bir JSON objesi olarak sunar.
Geliştiriciler İçin Protokol Savaşları: Standart Meta vs OpenGraph
Sitenizin arama motorlarında ve sosyal medyada nasıl görüneceğini belirleyen 3 ana protokol zinciri vardır:
- Geleneksel Meta (name="description"): Sadece Google, Yandex ve Bing gibi klasik arama botlarının indeksleme yaparken (Crawling) okuduğu yapı taşlarıdır. "Title" ve "Description" içerir ancak görsel (Thumbnail) barındırmaz.
- OpenGraph (property="og:image"): Facebook tarafından yaratılan, şu an WhatsApp, LinkedIn, Slack ve Discord'un standart kabul ettiği "Zengin Snippet" mimarisidir. Bir bağlantı paylaştığınızda büyük kapak resminin çıkmasını sağlayan yapı tam olarak
og:imageveog:titleetiketleridir. - Twitter Cards (name="twitter:card"): X (Twitter) platformuna özel olan bu yapı,
summary_large_imagedeğeri ile tweet'lerin içinde devasa, tıklanabilir imajların oluşmasını sağlar. Twitter botu sitenize geldiğinde önce kendi etiketlerine, bulamazsa OpenGraph etiketlerine bakar (Fallback mantığı).
Mimari Zorluklar: Neden Sadece "fetch()" Kullanamıyoruz?
Frontend geliştiricilerin ilk denediği şey fetch('https://hedefsite.com') komutudur. Ancak tarayıcılar güvenlik mimarisi gereği Same-Origin Policy (Aynı Köken Politikası) uygularlar.
⛔ CORS Block
Hedef site, yanıt başlığında (Header) Access-Control-Allow-Origin: * göndermiyorsa, tarayıcı o sitenin HTML'ini okumanıza asla izin vermez ve konsolda acımasız bir CORS hatası fırlatır.
✅ Backend Proxy (cURL)
Aracımız bu sorunu çözmek için aracı (Proxy) bir Backend servisi kullanır. İstek tarayıcıdan değil, bizim sunucumuzdan (cURL User-Agent: Bot maskelemesiyle) gider. Sunucuların CORS kısıtlaması yoktur.
Geliştirici S.S.S.
Araç, SPA (React, Vue) tabanlı sitelerin meta etiketlerini okuyabilir mi?
Client-Side Rendering (CSR) kullanan ve kaynak kodunda boş bir <div id="root"> döndüren sitelerin meta etiketleri, JavaScript çalıştırılmadan okunamaz. Bizim cURL motorumuz JS çalıştırmaz (Headless Browser değildir), bu nedenle SPA sitelerinde doğru okuma yapılabilmesi için hedefin Server-Side Rendering (SSR) veya Next.js/Nuxt gibi frameworkler (Pre-rendering) kullanması gerekir.
Neden bazı sitelerde meta verisi yerine 403 Forbidden veya Captcha dönüyor?
Cloudflare, Akamai gibi WAF (Web Application Firewall) sistemleri kullanan devasa siteler, standart HTTP bot isteklerini (Scraping girişimi olarak algılayıp) "Rate Limiting" veya anti-bot doğrulamasına (JS Challenge) sokar. Araç, gerçekçi bir Googlebot veya Mozilla User-Agent taklidi yapsa da aşırı sıkı politikalara takılabilir.
Rakip sitelerin SEO mimarisini analiz etmek (Reverse Engineering), kendi projelerinizin sosyal medya paylaşım (Share) testlerini yapmak veya webhook entegrasyonlarında URL önizlemeleri oluşturmak için Ahmet Halit Durusoy güvencesiyle sunulan Gelişmiş Meta Extractor aracını kullanabilirsiniz.