Web sitenizin arama motorlar\u0131ndaki ve sosyal medya platformlar\u0131ndaki g\u00f6r\u00fcn\u00fcm\u00fc, dijital pazarlama stratejinizin temel ta\u015flar\u0131ndan biridir. Ancak, bir web sayfas\u0131n\u0131n Open Graph (OG) etiketlerinin veya Arama Motoru Sonu\u00e7 Sayfas\u0131 (SERP) ba\u015fl\u0131k ve a\u00e7\u0131klamas\u0131n\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini tahmin etmek \u00e7o\u011fu zaman deneme yan\u0131lma y\u00f6ntemine d\u00f6n\u00fc\u015febilir. Peki, bu s\u00fcreci s\u0131f\u0131r gecikmeyle, an\u0131nda geri bildirim alarak y\u00f6netebilece\u011finiz bir ara\u00e7 in\u015fa etmeye ne dersiniz? Bu makalede, Next.js kullanarak nas\u0131l s\u0131f\u0131r gecikmeli bir Open Graph ve SERP \u00f6nizleyici geli\u015ftirebilece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, i\u00e7erik yay\u0131nc\u0131lar\u0131, pazarlamac\u0131lar ve geli\u015ftiriciler, de\u011fi\u015fikliklerinin etkisini an\u0131nda g\u00f6rebilecek ve web varl\u0131klar\u0131n\u0131 en etkili \u015fekilde optimize edebilecekler.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zla de\u011fi\u015fen dijital d\u00fcnyas\u0131nda, web sitenizin performans\u0131 ve g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc her zamankinden daha kritik. \u00d6zellikle sosyal medya platformlar\u0131nda payla\u015f\u0131lan ba\u011flant\u0131lar\u0131n ve arama motoru sonu\u00e7 sayfalar\u0131nda (SERP) listelenen i\u00e7eriklerin nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fc, t\u0131klanma oranlar\u0131n\u0131 (CTR) do\u011frudan etkileyen \u00f6nemli fakt\u00f6rlerdir. Bir ba\u011flant\u0131n\u0131n ilgi \u00e7ekici bir ba\u015fl\u0131k, a\u00e7\u0131klama ve g\u00f6rselle sunulmas\u0131, kullan\u0131c\u0131n\u0131n o ba\u011flant\u0131ya t\u0131klama olas\u0131l\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Ancak bu optimizasyon s\u00fcrecinde kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck zorluklardan biri, yap\u0131lan de\u011fi\u015fikliklerin etkisini an\u0131nda g\u00f6rememektir.<\/p>\n
Geleneksel olarak, bir web sayfas\u0131n\u0131n Open Graph (OG) etiketlerini veya meta a\u00e7\u0131klamalar\u0131n\u0131 g\u00fcncelledikten sonra, bu de\u011fi\u015fikliklerin sosyal medya platformlar\u0131 veya arama motorlar\u0131 taraf\u0131ndan taran\u0131p \u00f6nbelle\u011fe al\u0131nmas\u0131 zaman alabilir. Bu durum, \u00f6zellikle s\u00fcrekli i\u00e7erik \u00fcreten veya kampanyalar y\u00fcr\u00fcten ekipler i\u00e7in b\u00fcy\u00fck bir zaman kayb\u0131na ve verimsizli\u011fe yol a\u00e7ar. Bir pazarlamac\u0131, yeni bir blog yaz\u0131s\u0131n\u0131 veya \u00fcr\u00fcn sayfas\u0131n\u0131 payla\u015fmadan \u00f6nce, Facebook, Twitter veya LinkedIn gibi platformlarda nas\u0131l g\u00f6r\u00fcnece\u011fini kesin olarak bilmek ister. Ayn\u0131 \u015fekilde, bir SEO uzman\u0131, yeni bir sayfa ba\u015fl\u0131\u011f\u0131 veya meta a\u00e7\u0131klamas\u0131n\u0131n Google’da nas\u0131l g\u00f6r\u00fcnece\u011fini an\u0131nda \u00f6nizleyerek, potansiyel t\u0131klanma oran\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in ince ayarlar yapmak ister.<\/p>\n
\u0130\u015fte tam bu noktada, s\u0131f\u0131r gecikmeli bir Open Graph ve SERP \u00f6nizleyici devreye girer. Bu t\u00fcr bir ara\u00e7, bir URL girildi\u011finde veya i\u00e7erik d\u00fczenlenirken, an\u0131nda ve do\u011fru bir \u015fekilde, o i\u00e7eri\u011fin sosyal medya ve arama motorlar\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini sim\u00fcle eder. Bu, geli\u015ftiricilerin ve pazarlamac\u0131lar\u0131n deneme-yan\u0131lma d\u00f6ng\u00fcs\u00fcn\u00fc ortadan kald\u0131rarak, an\u0131nda geri bildirim almas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir g\u00f6rselin boyutu sosyal medya platformlar\u0131 i\u00e7in uygun mu? Ba\u015fl\u0131k \u00e7ok mu uzun? A\u00e7\u0131klama yeterince ikna edici mi? T\u00fcm bu sorular\u0131n cevaplar\u0131, s\u0131f\u0131r gecikmeli bir \u00f6nizleyici ile an\u0131nda elde edilebilir. Bu, sadece zamandan tasarruf etmekle kalmaz, ayn\u0131 zamanda daha etkili ve optimize edilmi\u015f web varl\u0131klar\u0131 olu\u015fturulmas\u0131na olanak tan\u0131r. \u00d6zellikle rekabet\u00e7i dijital ortamlarda, her bir pikselin ve her bir kelimenin \u00f6nemi d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, bu t\u00fcr bir arac\u0131n de\u011feri paha bi\u00e7ilmezdir. Bu \u00f6nizleyici, web varl\u0131klar\u0131n\u0131z\u0131 yay\u0131nlamadan \u00f6nce son r\u00f6tu\u015flar\u0131 yapman\u0131z\u0131 sa\u011flayarak, hedef kitlenizin dikkatini \u00e7ekmenize ve dijital hedeflerinize ula\u015fman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
S\u0131f\u0131r gecikmeli bir \u00f6nizleyici in\u015fa etmeden \u00f6nce, projemizin temelini olu\u015fturan kavramlar\u0131 ve teknolojiyi derinlemesine anlamam\u0131z gerekiyor. Bu b\u00f6l\u00fcmde, Open Graph (OG), Arama Motoru Sonu\u00e7 Sayfas\u0131 (SERP) ve Next.js’in bu projedeki rol\u00fcn\u00fc detayl\u0131ca ele alaca\u011f\u0131z.<\/p>\n
Open Graph (OG) protokol\u00fc, Facebook taraf\u0131ndan 2010 y\u0131l\u0131nda tan\u0131t\u0131lan ve herhangi bir web sayfas\u0131n\u0131n zengin bir “grafik nesnesi” haline gelmesini sa\u011flayan bir dizi meta etikettir. Bu etiketler sayesinde, bir web sayfas\u0131 sosyal medya platformlar\u0131nda payla\u015f\u0131ld\u0131\u011f\u0131nda, platformun o i\u00e7eri\u011fi nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011fini kontrol edebiliriz. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n URL’sini Facebook’ta payla\u015ft\u0131\u011f\u0131n\u0131zda, ba\u015fl\u0131k, a\u00e7\u0131klama, g\u00f6rsel ve bazen de video gibi \u00f6\u011felerin otomatik olarak \u00e7ekildi\u011fini g\u00f6r\u00fcrs\u00fcn\u00fcz. \u0130\u015fte bu \u00f6\u011feler, genellikle Open Graph etiketleri arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r.<\/p>\n
En temel Open Graph etiketleri \u015funlard\u0131r:<\/p>\n
og:title<\/code>: \u0130\u00e7eri\u011fin ba\u015fl\u0131\u011f\u0131.<\/li>\nog:type<\/code>: \u0130\u00e7eri\u011fin t\u00fcr\u00fc (\u00f6rne\u011fin, “website”, “article”, “video.movie”).<\/li>\nog:image<\/code>: \u0130\u00e7erikle ili\u015fkilendirilecek g\u00f6rselin URL’si. Bu g\u00f6rsel, sosyal medyada \u00f6nizleme olarak g\u00f6sterilir ve genellikle belirli boyutlarda (\u00f6rne\u011fin, 1200×630 piksel) olmas\u0131 \u00f6nerilir.<\/li>\nog:url<\/code>: \u0130\u00e7eri\u011fin kanonik URL’si.<\/li>\nog:description<\/code>: \u0130\u00e7eri\u011fin k\u0131sa bir a\u00e7\u0131klamas\u0131.<\/li>\n<\/ul>\nOpen Graph etiketleri, web sitenizin sosyal medyada daha profesyonel, \u00e7ekici ve bilgilendirici g\u00f6r\u00fcnmesini sa\u011flayarak, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011finizle etkile\u015fim kurma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Do\u011fru ve optimize edilmi\u015f OG etiketleri, daha y\u00fcksek t\u0131klanma oranlar\u0131na ve dolay\u0131s\u0131yla daha fazla trafik \u00e7ekmenize yard\u0131mc\u0131 olur.<\/p>\n
SERP Nedir ve Arama Motorlar\u0131ndaki Yeri Nedir?<\/h3>\n
SERP, “Search Engine Results Page” (Arama Motoru Sonu\u00e7 Sayfas\u0131) kelimelerinin k\u0131saltmas\u0131d\u0131r. Bir kullan\u0131c\u0131 Google, Bing veya di\u011fer arama motorlar\u0131nda bir arama yapt\u0131\u011f\u0131nda kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sayfad\u0131r. SERP, organik arama sonu\u00e7lar\u0131, \u00fccretli reklamlar, bilgi kartlar\u0131, g\u00f6rseller ve di\u011fer \u00f6zellikli snippet’ler gibi \u00e7e\u015fitli \u00f6\u011feler i\u00e7erebilir. Web sitenizin SERP’teki g\u00f6r\u00fcn\u00fcm\u00fc, arama motoru optimizasyonu (SEO) \u00e7al\u0131\u015fmalar\u0131n\u0131n do\u011frudan bir sonucudur.<\/p>\n
Bir web sayfas\u0131n\u0131n SERP’te nas\u0131l g\u00f6r\u00fcnece\u011fini belirleyen temel HTML etiketleri \u015funlard\u0131r:<\/p>\n
\n<title><\/code> etiketi: Sayfan\u0131n ba\u015fl\u0131\u011f\u0131d\u0131r ve SERP’te genellikle mavi, t\u0131klanabilir metin olarak g\u00f6r\u00fcn\u00fcr. Hem arama motorlar\u0131 hem de kullan\u0131c\u0131lar i\u00e7in sayfan\u0131n i\u00e7eri\u011fi hakk\u0131nda \u00f6nemli bir sinyaldir.<\/li>\n<meta name=\"description\"><\/code> etiketi: Sayfan\u0131n k\u0131sa bir \u00f6zetidir ve SERP’te ba\u015fl\u0131\u011f\u0131n alt\u0131nda g\u00f6r\u00fcn\u00fcr. Do\u011frudan bir s\u0131ralama fakt\u00f6r\u00fc olmasa da, kullan\u0131c\u0131lar\u0131n arama sonucunu t\u0131klay\u0131p t\u0131klamamas\u0131na karar vermelerinde kritik bir rol oynar.<\/li>\n<\/ul>\nSERP \u00f6nizlemesi, bu etiketlerin uzunlu\u011funu, anahtar kelime kullan\u0131m\u0131n\u0131 ve genel okunabilirli\u011fini test etmek i\u00e7in hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar\u0131n arama sonu\u00e7lar\u0131nda hangi ba\u015fl\u0131k ve a\u00e7\u0131klamaya t\u0131klayaca\u011f\u0131na karar vermesi saniyeler s\u00fcrer; bu nedenle, web sitenizin SERP g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc optimize etmek, organik trafik \u00e7ekmek i\u00e7in vazge\u00e7ilmezdir.<\/p>\n
Gecikme (Latency) Kavram\u0131 ve S\u0131f\u0131r Gecikmenin \u00d6nemi<\/h3>\n
Gecikme (latency), bir sistemde bir iste\u011fin g\u00f6nderilmesi ile yan\u0131t\u0131n al\u0131nmas\u0131 aras\u0131nda ge\u00e7en s\u00fcreyi ifade eder. Web geli\u015ftirme ba\u011flam\u0131nda, bu genellikle sunucuya bir istek g\u00f6nderip veri beklemek, bir API \u00e7a\u011fr\u0131s\u0131 yapmak veya bir g\u00f6rselin y\u00fcklenmesini beklemek gibi durumlar\u0131 kapsar. “S\u0131f\u0131r gecikme” terimi, ger\u00e7ek anlamda s\u0131f\u0131r saniye olmasa da, kullan\u0131c\u0131n\u0131n yapt\u0131\u011f\u0131 bir eyleme sistemin an\u0131nda veya alg\u0131lanamayacak kadar h\u0131zl\u0131 bir \u015fekilde yan\u0131t vermesi anlam\u0131na gelir. \u00d6nizleyici projemizde, kullan\u0131c\u0131 bir URL girdi\u011finde veya metin kutusuna yaz\u0131 yazarken, \u00f6nizlemenin neredeyse e\u015f zamanl\u0131 olarak g\u00fcncellenmesi hedeflenir.<\/p>\n
S\u0131f\u0131r gecikme, kullan\u0131c\u0131 deneyimi (UX) a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Kullan\u0131c\u0131lar, modern uygulamalardan h\u0131zl\u0131 ve ak\u0131c\u0131 etkile\u015fimler beklerler. E\u011fer bir \u00f6nizleyici, her URL giri\u015finde veya her karakter de\u011fi\u015fikli\u011finde birka\u00e7 saniye bekletirse, bu durum kullan\u0131c\u0131y\u0131 hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011frat\u0131r ve arac\u0131n kullan\u0131labilirli\u011fini azalt\u0131r. An\u0131nda geri bildirim, kullan\u0131c\u0131n\u0131n deneme-yan\u0131lma s\u00fcrecini h\u0131zland\u0131r\u0131r, daha fazla deneme yapmas\u0131n\u0131 te\u015fvik eder ve sonu\u00e7 olarak daha iyi optimize edilmi\u015f i\u00e7erikler olu\u015fturmas\u0131na yard\u0131mc\u0131 olur. Bu, \u00f6zellikle pazarlama ve SEO ekipleri i\u00e7in zaman\u0131n alt\u0131n de\u011ferinde oldu\u011fu durumlarda, i\u015f ak\u0131\u015f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
Next.js Neden Bu Projede \u0130deal Bir Se\u00e7im?<\/h3>\n
Next.js, React tabanl\u0131 bir a\u00e7\u0131k kaynak web geli\u015ftirme framework’\u00fcd\u00fcr. Sunucu Tarafl\u0131 Olu\u015fturma (SSR), Statik Site Olu\u015fturma (SSG) ve API Routes gibi g\u00fc\u00e7l\u00fc \u00f6zellikleriyle, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir tercihtir. Next.js’in projemiz i\u00e7in ideal olmas\u0131n\u0131n birka\u00e7 \u00f6nemli nedeni vard\u0131r:<\/p>\n
\n- API Routes (API Rotalar\u0131)<\/strong>: Next.js, ayn\u0131 proje i\u00e7inde hem frontend (istemci taraf\u0131) hem de backend (sunucu taraf\u0131) API u\u00e7 noktalar\u0131 olu\u015fturmam\u0131za olanak tan\u0131r. Bu, harici bir URL’den veri \u00e7ekme, HTML’i ayr\u0131\u015ft\u0131rma ve \u00f6nbellekleme gibi sunucu taraf\u0131 i\u015flemlerini kolayca y\u00f6netebilece\u011fimiz anlam\u0131na gelir. Bu sayede, ayr\u0131 bir backend projesi kurma ihtiyac\u0131m\u0131z ortadan kalkar ve geli\u015ftirme s\u00fcreci h\u0131zlan\u0131r.<\/li>\n
- Sunucu Tarafl\u0131 Olu\u015fturma (SSR) ve Statik Site Olu\u015fturma (SSG)<\/strong>: Her ne kadar \u00f6nizleyici dinamik bir yap\u0131ya sahip olsa da, Next.js’in render (olu\u015fturma) yetenekleri, uygulaman\u0131n ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131rmak i\u00e7in kullan\u0131labilir. Ayr\u0131ca, \u00f6nbellekleme stratejileri ile birle\u015fti\u011finde, belirli URL’ler i\u00e7in \u00f6nceden i\u015flenmi\u015f \u00f6nizlemeleri sunma potansiyeli sunar.<\/li>\n
- G\u00f6r\u00fcnt\u00fc Optimizasyonu<\/strong>: Next.js’in yerle\u015fik
next\/image<\/code> bile\u015feni, g\u00f6rselleri otomatik olarak optimize eder ve farkl\u0131 cihazlara uygun boyutlarda sunar. Bu, \u00f6zellikle Open Graph g\u00f6rsellerini i\u015flerken, performans ve bant geni\u015fli\u011fi a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck avantaj sa\u011flar.<\/li>\n- Performans Odakl\u0131 Yap\u0131<\/strong>: Next.js, varsay\u0131lan olarak performans odakl\u0131d\u0131r. Kod b\u00f6lme (code splitting), \u00f6nceden getirme (prefetching) gibi \u00f6zellikler sayesinde, uygulaman\u0131n genel h\u0131z\u0131 ve yan\u0131t verme yetene\u011fi art\u0131r\u0131l\u0131r. Bu, “s\u0131f\u0131r gecikme” hedefine ula\u015fmak i\u00e7in \u00f6nemli bir temel sa\u011flar.<\/li>\n
- Geli\u015ftirici Deneyimi (DX)<\/strong>: Next.js, h\u0131zl\u0131 yenileme (Fast Refresh), iyi belgelendirme ve geni\u015f bir topluluk deste\u011fi ile m\u00fckemmel bir geli\u015ftirici deneyimi sunar. Bu da projenin h\u0131zl\u0131 ve verimli bir \u015fekilde geli\u015ftirilmesine olanak tan\u0131r.<\/li>\n<\/ol>\n
Bu temel kavramlar\u0131 ve Next.js’in sundu\u011fu avantajlar\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, art\u0131k projemizin in\u015fas\u0131na ba\u015flayabiliriz.<\/p>\n
Projeyi Ba\u015flatmak: Next.js \u0130le Temelleri Atmak<\/h2>\n
S\u0131f\u0131r gecikmeli Open Graph ve SERP \u00f6nizleyicimizi olu\u015fturmak i\u00e7in ilk ad\u0131m, bir Next.js projesi kurmak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemektir. Bu b\u00f6l\u00fcmde, projenin ba\u015flang\u0131\u00e7 kurulumunu ve temel kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) yap\u0131s\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n
Yeni Bir Next.js Projesi Olu\u015fturma<\/h3>\n
Next.js projesi olu\u015fturmak olduk\u00e7a basittir. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpx create-next-app@latest og-serp-previewer --typescript --eslint<\/code><\/pre>\n<\/div>\nBu komut, og-serp-previewer<\/code> ad\u0131nda yeni bir Next.js projesi olu\u015fturacak, TypeScript ve ESLint deste\u011fini de beraberinde getirecektir. Proje olu\u015fturulduktan sonra, proje dizinine girin:<\/p>\n\ncd og-serp-previewer<\/code><\/pre>\n<\/div>\n\u015eimdi projenizi geli\u015ftirme modunda ba\u015flatabilirsiniz:<\/p>\n
\nnpm run dev<\/code><\/pre>\n<\/div>\nTaray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresine giderek Next.js’in varsay\u0131lan ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\nGerekli K\u00fct\u00fcphaneleri Y\u00fckleme<\/h3>\n
Projemizin temel i\u015flevselli\u011fi i\u00e7in iki ana k\u00fct\u00fcphaneye ihtiyac\u0131m\u0131z olacak: bir HTTP istemcisi ve bir HTML ayr\u0131\u015ft\u0131r\u0131c\u0131. HTTP istemcisi olarak axios<\/code>‘u, HTML ayr\u0131\u015ft\u0131r\u0131c\u0131 olarak da cheerio<\/code>‘yu kullanaca\u011f\u0131z.<\/p>\n\nnpm install axios cheerio<\/code><\/pre>\n<\/div>\nBu k\u00fct\u00fcphaneleri y\u00fckledikten sonra, projemiz art\u0131k d\u0131\u015f URL’lerden veri \u00e7ekmeye ve bu verileri i\u015flemeye haz\u0131r hale gelecektir.<\/p>\n
Temel UI Yap\u0131s\u0131: Input Alan\u0131 ve \u00d6nizleme Kartlar\u0131<\/h3>\n
Kullan\u0131c\u0131 aray\u00fcz\u00fcm\u00fcz olduk\u00e7a basit olacak: bir URL giri\u015f alan\u0131 ve bu URL’nin Open Graph ile SERP \u00f6nizlemelerini g\u00f6sterecek iki farkl\u0131 kart. pages\/index.tsx<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n\n<\/div>\nYukar\u0131daki kodda, basit bir React bile\u015feni olu\u015fturduk. useState<\/code> hook’u ile URL’yi, \u00f6nizleme verilerini, y\u00fckleme durumunu ve hata mesajlar\u0131n\u0131 y\u00f6netece\u011fiz. useEffect<\/code> hook’u i\u00e7inde, kullan\u0131c\u0131n\u0131n URL giri\u015fine bir “debouncing” mekanizmas\u0131 ekledik. Bu, kullan\u0131c\u0131n\u0131n her tu\u015f vuru\u015funda an\u0131nda API iste\u011fi g\u00f6ndermek yerine, yazmay\u0131 b\u0131rakt\u0131ktan sonra yar\u0131m saniye bekleyerek gereksiz istekleri \u00f6nler ve sunucu \u00fczerindeki y\u00fck\u00fc azalt\u0131r. \u00d6nizleme verileri i\u00e7in bir PreviewData<\/code> aray\u00fcz\u00fc tan\u0131mlad\u0131k ve bu verileri \/api\/preview<\/code> u\u00e7 noktas\u0131ndan \u00e7ekece\u011fiz. \u015eimdi bu API u\u00e7 noktas\u0131n\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za bakal\u0131m.<\/p>\nURL’den Veri \u00c7ekme ve Ayr\u0131\u015ft\u0131rma Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
\u00d6nizleyicimizin kalbi, d\u0131\u015f URL’lerden HTML i\u00e7eri\u011fini \u00e7ekip, bu i\u00e7eri\u011fi ayr\u0131\u015ft\u0131rarak Open Graph ve SERP etiketlerini \u00e7\u0131karmas\u0131d\u0131r. Bu i\u015flemi Next.js API Routes (API Rotalar\u0131) kullanarak sunucu taraf\u0131nda ger\u00e7ekle\u015ftirece\u011fiz. Bu sayede, taray\u0131c\u0131da CORS (Cross-Origin Resource Sharing) k\u0131s\u0131tlamalar\u0131yla u\u011fra\u015fmak zorunda kalmay\u0131z ve hassas i\u015flemleri g\u00fcvenli bir \u015fekilde sunucuda yapabiliriz.<\/p>\n
Next.js API Routes Kullan\u0131m\u0131<\/h3>\n
Next.js’de API Rotalar\u0131, pages\/api<\/code> dizini alt\u0131nda olu\u015fturulan her dosyan\u0131n bir API u\u00e7 noktas\u0131 olarak davranmas\u0131 prensibine dayan\u0131r. \u00d6rne\u011fin, pages\/api\/preview.ts<\/code> ad\u0131nda bir dosya olu\u015fturdu\u011funuzda, bu dosya \/api\/preview<\/code> adresinden eri\u015filebilir bir API u\u00e7 noktas\u0131 olacakt\u0131r. Bu API rotalar\u0131, Node.js ortam\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, sunucu taraf\u0131nda yap\u0131labilecek t\u00fcm i\u015flemleri ger\u00e7ekle\u015ftirebilir.<\/p>\npages\/api\/preview.ts<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve i\u00e7ine a\u015fa\u011f\u0131daki kodu ekleyelim:<\/p>\n\n\nimport type { NextApiRequest, NextApiResponse } from 'next';\nimport axios from 'axios';\nimport * as cheerio from 'cheerio';\n\ninterface PreviewData {\n ogTitle: string;\n ogDescription: string;\n ogImage: string;\n ogUrl: string;\n serpTitle: string;\n serpDescription: string;\n favicon: string;\n}\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse<PreviewData | { message: string }>\n) {\n const { url } = req.query;\n\n if (!url || typeof url !== 'string') {\n return res.status(400).json({ message: 'URL parametresi eksik veya ge\u00e7ersiz.' });\n }\n\n try {\n const { data } = await axios.get(url, {\n headers: {\n 'User-Agent': 'Mozilla\/5.0 (compatible; Googlebot\/2.1; +http:\/\/www.google.com\/bot.html)',\n },\n timeout: 10000, \/\/ 10 saniye zaman a\u015f\u0131m\u0131\n });\n\n const $ = cheerio.load(data);\n\n const ogTitle = $('meta[property=\"og:title\"]').attr('content') || $('title').text();\n const ogDescription = $('meta[property=\"og:description\"]').attr('content') || $('meta[name=\"description\"]').attr('content');\n let ogImage = $('meta[property=\"og:image\"]').attr('content');\n const ogUrl = $('meta[property=\"og:url\"]').attr('content') || url;\n const serpTitle = $('title').text();\n const serpDescription = $('meta[name=\"description\"]').attr('content') || $('meta[property=\"og:description\"]').attr('content');\n let favicon = $('link[rel=\"icon\"]').attr('href') || $('link[rel=\"shortcut icon\"]').attr('href');\n\n \/\/ Favicon ve OG g\u00f6rseli i\u00e7in mutlak URL'leri olu\u015fturma\n const baseUrl = new URL(url);\n if (favicon && !favicon.startsWith('http')) {\n favicon = new URL(favicon, baseUrl).href;\n }\n if (ogImage && !ogImage.startsWith('http')) {\n ogImage = new URL(ogImage, baseUrl).href;\n }\n\n res.status(200).json({\n ogTitle: ogTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n ogDescription: ogDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n ogImage: ogImage || '',\n ogUrl: ogUrl,\n serpTitle: serpTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n serpDescription: serpDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n favicon: favicon || '',\n });\n\n } catch (error: any) {\n console.error('Veri \u00e7ekme veya ayr\u0131\u015ft\u0131rma hatas\u0131:', error.message);\n res.status(500).json({ message: Belirtilen URL'den bilgi al\u0131namad\u0131. Hata: ${error.message}<\/code> });\n }\n}\n<\/code><\/pre>\n<\/div>\nBu kod blo\u011fu, \/api\/preview<\/code> u\u00e7 noktas\u0131n\u0131n temel mant\u0131\u011f\u0131n\u0131 olu\u015fturur. \u0130\u015fte ad\u0131m ad\u0131m ne yapt\u0131\u011f\u0131m\u0131z:<\/p>\n\n- URL Parametresini Alma<\/strong>: \u0130stek (
req<\/code>) i\u00e7indeki url<\/code> sorgu parametresini al\u0131r\u0131z. Bu, kullan\u0131c\u0131n\u0131n frontend’de girdi\u011fi URL’dir.<\/li>\n- URL Do\u011frulama<\/strong>: URL’nin varl\u0131\u011f\u0131n\u0131 ve tipini kontrol ederiz. Ge\u00e7ersizse 400 Bad Request yan\u0131t\u0131 d\u00f6neriz.<\/li>\n
- HTTP \u0130ste\u011fi ile HTML \u00c7ekme<\/strong>:
axios.get(url, ...)<\/code> kullanarak hedef URL’den HTML i\u00e7eri\u011fini \u00e7ekeriz.\n\nUser-Agent<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 Googlebot olarak ayarlamak, baz\u0131 web sitelerinin botlar\u0131 farkl\u0131 i\u00e7eriklerle kar\u015f\u0131lamas\u0131na izin verdi\u011finden (veya botlar\u0131 engellemesini \u00f6nledi\u011finden) \u00f6nemlidir.<\/li>\ntimeout<\/code>, iste\u011fin belirli bir s\u00fcre i\u00e7inde yan\u0131t vermemesi durumunda kesilmesini sa\u011flar, b\u00f6ylece uygulaman\u0131z donmaz.<\/li>\n<\/ul>\n<\/li>\n- Cheerio ile HTML \u0130\u00e7eri\u011fini Ayr\u0131\u015ft\u0131rma<\/strong>: \u00c7ekti\u011fimiz HTML i\u00e7eri\u011fini
cheerio.load(data)<\/code> ile bir jQuery benzeri aray\u00fcze y\u00fckleriz. Bu, HTML DOM \u00fczerinde kolayca se\u00e7im yapmam\u0131z\u0131 ve etiketlerin i\u00e7eriklerini almam\u0131z\u0131 sa\u011flar.<\/li>\n- OG ve SERP Etiketlerini \u00c7\u0131karma<\/strong>:\n
\nog:title<\/code>, og:description<\/code>, og:image<\/code>, og:url<\/code> gibi Open Graph etiketlerini se\u00e7eriz. E\u011fer OG etiketleri bulunamazsa, yedek olarak <title><\/code> veya <meta name=\"description\"><\/code> etiketlerini kullan\u0131r\u0131z.<\/li>\n- SERP i\u00e7in
<title><\/code> ve <meta name=\"description\"><\/code> etiketlerini do\u011frudan al\u0131r\u0131z.<\/li>\n- Favicon’u da bulmaya \u00e7al\u0131\u015f\u0131r\u0131z.<\/li>\n<\/ul>\n<\/li>\n
- Mutlak URL’leri Olu\u015fturma<\/strong>: \u00d6zellikle
og:image<\/code> ve favicon URL’leri genellikle g\u00f6receli (relative) yollarla belirtilebilir. Bu durumda, new URL(relativeUrl, baseUrl).href<\/code> kullanarak bunlar\u0131 mutlak URL’lere d\u00f6n\u00fc\u015ft\u00fcrmek \u00f6nemlidir, aksi takdirde taray\u0131c\u0131 bu g\u00f6rselleri bulamaz.<\/li>\n- Yan\u0131t G\u00f6nderme<\/strong>: Ayr\u0131\u015ft\u0131r\u0131lan verileri i\u00e7eren bir JSON nesnesini 200 OK durumuyla frontend’e geri g\u00f6ndeririz.<\/li>\n
- Hata Y\u00f6netimi<\/strong>: Herhangi bir hata olu\u015fursa (URL’ye eri\u015filememesi, a\u011f sorunlar\u0131 vb.), 500 Internal Server Error yan\u0131t\u0131 ve a\u00e7\u0131klay\u0131c\u0131 bir hata mesaj\u0131 d\u00f6neriz.<\/li>\n<\/ol>\n
Bu API rotas\u0131 sayesinde, frontend’deki URL giri\u015finden gelen iste\u011fi sunucu taraf\u0131nda i\u015fleyebilir ve gerekli bilgileri g\u00fcvenli ve verimli bir \u015fekilde \u00e7ekip ayr\u0131\u015ft\u0131rabiliriz. Bu, “s\u0131f\u0131r gecikme” hedefine ula\u015fmak i\u00e7in kritik bir ad\u0131md\u0131r, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flamak i\u00e7in h\u0131zl\u0131 ve g\u00fcvenilir bir veri kayna\u011f\u0131na ihtiyac\u0131m\u0131z var.<\/p>\n
Performans \u0130\u00e7in G\u00f6r\u00fcnt\u00fc Optimizasyonu ve \u00d6nbellekleme Stratejileri<\/h2>\n
S\u0131f\u0131r gecikmeli bir \u00f6nizleyici in\u015fa ederken, sadece veriyi h\u0131zl\u0131ca \u00e7ekmek yeterli de\u011fildir; ayn\u0131 zamanda bu veriyi, \u00f6zellikle g\u00f6rselleri, en verimli \u015fekilde sunmak da hayati \u00f6nem ta\u015f\u0131r. Ayr\u0131ca, s\u0131k\u00e7a sorgulanan URL’ler i\u00e7in performans\u0131 art\u0131rmak amac\u0131yla \u00f6nbellekleme (caching) stratejileri uygulamak da gereklidir.<\/p>\n
OG G\u00f6rsellerinin Proxy Edilmesi ve Optimize Edilmesi<\/h3>\n
Open Graph g\u00f6rselleri, sosyal medya payla\u015f\u0131mlar\u0131n\u0131n g\u00f6rsel \u00e7ekicili\u011fi i\u00e7in merkezi bir rol oynar. Ancak bu g\u00f6rsellerle ilgili birka\u00e7 potansiyel sorun vard\u0131r:<\/p>\n
\n- CORS (Cross-Origin Resource Sharing) K\u0131s\u0131tlamalar\u0131<\/strong>: E\u011fer bir OG g\u00f6rseli farkl\u0131 bir alandan geliyorsa ve o alan CORS ba\u015fl\u0131klar\u0131n\u0131 do\u011fru yap\u0131land\u0131rmad\u0131ysa, taray\u0131c\u0131 bu g\u00f6rseli do\u011frudan y\u00fcklemeyi reddedebilir.<\/li>\n
- G\u00f6rsel Boyutu ve Performans<\/strong>: Baz\u0131 web siteleri \u00e7ok b\u00fcy\u00fck veya optimize edilmemi\u015f OG g\u00f6rselleri kullanabilir. Bu g\u00f6rsellerin do\u011frudan y\u00fcklenmesi, \u00f6nizleyicinin yava\u015flamas\u0131na neden olabilir.<\/li>\n
- G\u00fcvenlik ve Gizlilik<\/strong>: Bazen do\u011frudan d\u0131\u015f bir URL’den g\u00f6rsel y\u00fcklemek, potansiyel g\u00fcvenlik veya gizlilik riskleri ta\u015f\u0131yabilir.<\/li>\n<\/ol>\n
Bu sorunlar\u0131 a\u015fmak i\u00e7in, OG g\u00f6rsellerini kendi sunucumuz \u00fczerinden “proxy” ederek (arac\u0131l\u0131k ederek) ve ayn\u0131 zamanda optimize ederek sunabiliriz. Bu, Next.js API Routes kullanarak yap\u0131labilir. pages\/api\/image-proxy.ts<\/code> ad\u0131nda yeni bir API rotas\u0131 olu\u015ftural\u0131m:<\/p>\n\n\nimport type { NextApiRequest, NextApiResponse } from 'next';\nimport axios from 'axios';\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n const { url } = req.query;\n\n if (!url || typeof url !== 'string') {\n return res.status(400).json({ message: 'URL parametresi eksik veya ge\u00e7ersiz.' });\n }\n\n try {\n const response = await axios.get(url, {\n responseType: 'arraybuffer', \/\/ G\u00f6rseli bir buffer olarak al\n timeout: 10000,\n });\n\n const contentType = response.headers['content-type'];\n if (!contentType || !contentType.startsWith('image\/')) {\n return res.status(400).json({ message: 'Belirtilen URL bir g\u00f6rsel de\u011fil.' });\n }\n\n \/\/ Cache kontrol ba\u015fl\u0131klar\u0131 ekleyerek taray\u0131c\u0131 ve CDN \u00f6nbelleklemesini etkinle\u015ftir\n res.setHeader('Content-Type', contentType);\n res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); \/\/ 1 y\u0131l \u00f6nbellekte tut\n res.status(200).send(response.data);\n\n } catch (error: any) {\n console.error('G\u00f6rsel proxy hatas\u0131:', error.message);\n res.status(500).json({ message: G\u00f6rsel al\u0131namad\u0131. Hata: ${error.message}<\/code> });\n }\n}\n<\/code><\/pre>\n<\/div>\n\u015eimdi pages\/api\/preview.ts<\/code> dosyas\u0131nda, ogImage<\/code> URL’sini bu proxy rotas\u0131na y\u00f6nlendirmemiz gerekiyor:<\/p>\n\n\n\/\/ ... (pages\/api\/preview.ts i\u00e7inde)\n\n \/\/ OG g\u00f6rseli i\u00e7in mutlak URL'leri olu\u015fturma\n \/\/ ...\n if (ogImage && !ogImage.startsWith('http')) {\n ogImage = new URL(ogImage, baseUrl).href;\n }\n\n \/\/ G\u00f6rsel proxy'sini kullan\n const proxiedOgImage = ogImage ? \/api\/image-proxy?url=${encodeURIComponent(ogImage)}<\/code> : '';\n\n res.status(200).json({\n ogTitle: ogTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n ogDescription: ogDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n ogImage: proxiedOgImage, \/\/ Art\u0131k proxied URL'yi kullan\u0131yoruz\n ogUrl: ogUrl,\n serpTitle: serpTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n serpDescription: serpDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n favicon: favicon || '',\n });\n\n\/\/ ...\n<\/code><\/pre>\n<\/div>\nBu yakla\u015f\u0131m sayesinde, t\u00fcm OG g\u00f6rselleri kendi sunucumuz \u00fczerinden ge\u00e7ecek, CORS sorunlar\u0131 ortadan kalkacak ve Cache-Control<\/code> ba\u015fl\u0131klar\u0131 sayesinde taray\u0131c\u0131lar ve CDN’ler bu g\u00f6rselleri daha uzun s\u00fcre \u00f6nbelle\u011fe alabilecektir. Ger\u00e7ek g\u00f6rsel optimizasyonu i\u00e7in (boyutland\u0131rma, s\u0131k\u0131\u015ft\u0131rma), bu proxy rotas\u0131na Sharp gibi bir g\u00f6r\u00fcnt\u00fc i\u015fleme k\u00fct\u00fcphanesi entegre edilebilir, ancak bu, makalenin kapsam\u0131n\u0131 a\u015fan ileri d\u00fczey bir konudur. Next.js’in kendi next\/image<\/code> bile\u015feni, frontend’de g\u00f6rselleri optimize etmek i\u00e7in harika bir ara\u00e7t\u0131r. E\u011fer bu proxy’den gelen g\u00f6rselleri next\/image<\/code> ile kullan\u0131rsak, otomatik optimizasyon \u00f6zelliklerinden de faydalanabiliriz.<\/p>\nAPI Taraf\u0131nda \u00d6nbellekleme (Caching) Mekanizmalar\u0131<\/h3>\n
“S\u0131f\u0131r gecikme” hedefine ula\u015fmak i\u00e7in \u00f6nbellekleme hayati \u00f6neme sahiptir. Her URL i\u00e7in her seferinde d\u0131\u015far\u0131dan veri \u00e7ekmek, hem performans\u0131 d\u00fc\u015f\u00fcr\u00fcr hem de hedef sunucular \u00fczerinde gereksiz y\u00fck olu\u015fturur. S\u0131k\u00e7a sorgulanan URL’ler i\u00e7in bir \u00f6nbellekleme mekanizmas\u0131 kurarak, ayn\u0131 URL i\u00e7in tekrar tekrar istek g\u00f6nderilmesinin \u00f6n\u00fcne ge\u00e7ebiliriz.<\/p>\n
Basit bir bellek i\u00e7i (in-memory) \u00f6nbellek uygulayabiliriz. Daha karma\u015f\u0131k senaryolar i\u00e7in Redis gibi harici bir \u00f6nbellek \u00e7\u00f6z\u00fcm\u00fc tercih edilebilir, ancak demo projemiz i\u00e7in basit bir JavaScript Map<\/code> objesi yeterli olacakt\u0131r.<\/p>\npages\/api\/preview.ts<\/code> dosyas\u0131n\u0131 g\u00fcncelleyelim:<\/p>\n\n\nimport type { NextApiRequest, NextApiResponse } from 'next';\nimport axios from 'axios';\nimport * as cheerio from 'cheerio';\n\ninterface PreviewData {\n ogTitle: string;\n ogDescription: string;\n ogImage: string;\n ogUrl: string;\n serpTitle: string;\n serpDescription: string;\n favicon: string;\n}\n\n\/\/ Bellek i\u00e7i \u00f6nbellek\nconst cache = new Map<string, { data: PreviewData; timestamp: number }>();\nconst CACHE_DURATION = 5 * 60 * 1000; \/\/ 5 dakika \u00f6nbellekte tut\n\nexport default async function handler(\n req: NextApiRequest,\n res: NextApiResponse<PreviewData | { message: string }>\n) {\n const { url } = req.query;\n\n if (!url || typeof url !== 'string') {\n return res.status(400).json({ message: 'URL parametresi eksik veya ge\u00e7ersiz.' });\n }\n\n \/\/ \u00d6nbelle\u011fi kontrol et\n const cached = cache.get(url);\n if (cached && (Date.now() - cached.timestamp < CACHE_DURATION)) {\n console.log(URL ${url} \u00f6nbellekten servis edildi.<\/code>);\n return res.status(200).json(cached.data);\n }\n\n try {\n const { data } = await axios.get(url, {\n headers: {\n 'User-Agent': 'Mozilla\/5.0 (compatible; Googlebot\/2.1; +http:\/\/www.google.com\/bot.html)',\n },\n timeout: 10000,\n });\n\n const $ = cheerio.load(data);\n\n const ogTitle = $('meta[property=\"og:title\"]').attr('content') || $('title').text();\n const ogDescription = $('meta[property=\"og:description\"]').attr('content') || $('meta[name=\"description\"]').attr('content');\n let ogImage = $('meta[property=\"og:image\"]').attr('content');\n const ogUrl = $('meta[property=\"og:url\"]').attr('content') || url;\n const serpTitle = $('title').text();\n const serpDescription = $('meta[name=\"description\"]').attr('content') || $('meta[property=\"og:description\"]').attr('content');\n let favicon = $('link[rel=\"icon\"]').attr('href') || $('link[rel=\"shortcut icon\"]').attr('href');\n\n const baseUrl = new URL(url);\n if (favicon && !favicon.startsWith('http')) {\n favicon = new URL(favicon, baseUrl).href;\n }\n if (ogImage && !ogImage.startsWith('http')) {\n ogImage = new URL(ogImage, baseUrl).href;\n }\n\n const proxiedOgImage = ogImage ? \/api\/image-proxy?url=${encodeURIComponent(ogImage)}<\/code> : '';\n const proxiedFavicon = favicon ? \/api\/image-proxy?url=${encodeURIComponent(favicon)}<\/code> : ''; \/\/ Favicon i\u00e7in de proxy kullanabiliriz\n\n const result: PreviewData = {\n ogTitle: ogTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n ogDescription: ogDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n ogImage: proxiedOgImage,\n ogUrl: ogUrl,\n serpTitle: serpTitle || 'Ba\u015fl\u0131k Bulunamad\u0131',\n serpDescription: serpDescription || 'A\u00e7\u0131klama Bulunamad\u0131',\n favicon: proxiedFavicon,\n };\n\n \/\/ Sonucu \u00f6nbelle\u011fe al\n cache.set(url, { data: result, timestamp: Date.now() });\n console.log(URL ${url} \u00f6nbelle\u011fe al\u0131nd\u0131.<\/code>);\n\n res.status(200).json(result);\n\n } catch (error: any) {\n console.error('Veri \u00e7ekme veya ayr\u0131\u015ft\u0131rma hatas\u0131:', error.message);\n res.status(500).json({ message: Belirtilen URL'den bilgi al\u0131namad\u0131. Hata: ${error.message}<\/code> });\n }\n}\n<\/code><\/pre>\n<\/div>\nBu \u00f6nbellekleme stratejisiyle:<\/p>\n
\n- Bir URL ilk kez sorguland\u0131\u011f\u0131nda, HTML \u00e7ekilir, ayr\u0131\u015ft\u0131r\u0131l\u0131r ve sonu\u00e7 \u00f6nbelle\u011fe al\u0131n\u0131r.<\/li>\n
- Ayn\u0131 URL, \u00f6nbellek s\u00fcresi (burada 5 dakika) dolmadan tekrar sorgulan\u0131rsa, do\u011frudan \u00f6nbellekten servis edilir. Bu, a\u011f iste\u011fi yapma ve ayr\u0131\u015ft\u0131rma maliyetini ortadan kald\u0131r\u0131r, b\u00f6ylece yan\u0131t s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r.<\/li>\n<\/ul>\n
Bu bellek i\u00e7i \u00f6nbellek, uygulaman\u0131n her yeniden ba\u015flat\u0131l\u0131\u015f\u0131nda s\u0131f\u0131rlanacakt\u0131r. \u00dcretim ortam\u0131nda daha kal\u0131c\u0131 ve \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm i\u00e7in Redis gibi da\u011f\u0131t\u0131k bir \u00f6nbellek sistemi kullanmak daha uygun olacakt\u0131r. Ancak, “s\u0131f\u0131r gecikme” hissini yaratmak ve sunucu y\u00fck\u00fcn\u00fc azaltmak i\u00e7in basit bir \u00e7\u00f6z\u00fcm olarak olduk\u00e7a etkilidir.<\/p>\n
Kullan\u0131c\u0131 Deneyimi ve \u0130leri D\u00fczey Optimizasyonlar<\/h2>\n
Bir arac\u0131n sadece i\u015flevsel olmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda kullan\u0131c\u0131 dostu ve verimli olmas\u0131 da gerekir. \u00d6nizleyicimizin “s\u0131f\u0131r gecikme” hedefine ula\u015fmas\u0131nda ve kullan\u0131c\u0131ya en iyi deneyimi sunmas\u0131nda, baz\u0131 ileri d\u00fczey optimizasyonlar ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) iyile\u015ftirmeleri b\u00fcy\u00fck rol oynar.<\/p>\n
Anl\u0131k Geri Bildirim \u0130\u00e7in Debouncing ve Throttling<\/h3>\n
Frontend taraf\u0131nda, kullan\u0131c\u0131n\u0131n URL giri\u015f alan\u0131na her karakter yazd\u0131\u011f\u0131nda API iste\u011fi g\u00f6ndermek, hem gereksiz sunucu y\u00fck\u00fcne yol a\u00e7ar hem de kullan\u0131c\u0131n\u0131n yazd\u0131\u011f\u0131 h\u0131zda yan\u0131t al\u0131namayaca\u011f\u0131 i\u00e7in gecikmeli bir deneyim sunar. Bu durumu y\u00f6netmek i\u00e7in “debouncing” ve “throttling” tekniklerini kullan\u0131r\u0131z.<\/p>\n
\n- Debouncing (Gecikmeli \u00c7a\u011fr\u0131)<\/strong>: Bir fonksiyonun, belirli bir s\u00fcre boyunca tekrar \u00e7a\u011fr\u0131lmazsa sadece bir kez \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, kullan\u0131c\u0131 yazmay\u0131 bitirdikten 500 milisaniye sonra API iste\u011fi g\u00f6nderilir. Kullan\u0131c\u0131 bu 500 milisaniye i\u00e7inde ba\u015fka bir karakter yazarsa, saya\u00e7 s\u0131f\u0131rlan\u0131r ve yeni bir 500 milisaniye beklemeye ba\u015flar. Bizim frontend kodumuzda zaten bu teknik uygulanm\u0131\u015ft\u0131r:\n\n
\n useEffect(() => {\n const handler = setTimeout(() => {\n fetchPreview(url);\n }, 500); \/\/ Yar\u0131m saniye gecikme ile istek g\u00f6nder\n\n return () => {\n clearTimeout(handler);\n };\n }, [url, fetchPreview]);\n <\/code><\/pre>\n<\/div>\n Bu kod blo\u011fu, url<\/code> state’i her de\u011fi\u015fti\u011finde (yani kullan\u0131c\u0131 her karakter yazd\u0131\u011f\u0131nda) mevcut zamanlay\u0131c\u0131y\u0131 temizler ve yeni bir zamanlay\u0131c\u0131 ba\u015flat\u0131r. B\u00f6ylece, kullan\u0131c\u0131 yazmay\u0131 durdurana kadar API iste\u011fi g\u00f6nderilmez.<\/li>\n- Throttling (K\u0131s\u0131tlama)<\/strong>: Bir fonksiyonun, belirli bir zaman dilimi i\u00e7inde en fazla bir kez \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, 1 saniyede en fazla bir kez API iste\u011fi g\u00f6nderir. Bu, s\u00fcrekli tetiklenen olaylar (scroll, resize) i\u00e7in daha uygundur. \u00d6nizleyici \u00f6rne\u011fimizde debouncing daha uygun bir se\u00e7imdir.<\/li>\n<\/ul>\n
Bu teknikler sayesinde, kullan\u0131c\u0131ya an\u0131nda geri bildirim hissi verirken, arka planda gereksiz kaynak t\u00fcketimini \u00f6nlemi\u015f oluruz.<\/p>\n
Hata Y\u00f6netimi ve Kullan\u0131c\u0131ya Bilgilendirme<\/h3>\n
Her zaman her \u015fey yolunda gitmeyebilir. Kullan\u0131c\u0131 ge\u00e7ersiz bir URL girebilir, hedef siteye eri\u015filemeyebilir veya a\u011f sorunlar\u0131 ya\u015fanabilir. Bu durumlarda, kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r ve yard\u0131mc\u0131 hata mesajlar\u0131 sunmak, iyi bir kullan\u0131c\u0131 deneyiminin vazge\u00e7ilmezidir. Frontend kodumuzda error<\/code> state’i ile bu durumu zaten ele al\u0131yoruz:<\/p>\n\n\n {error && <p style={{ textAlign: 'center', color: '#e00' }}>Hata: {error}<\/p>}\n <\/code><\/pre>\n<\/div>\nBu, kullan\u0131c\u0131ya sorunun ne oldu\u011funu ve ne yapmas\u0131 gerekti\u011fini (\u00f6rne\u011fin, URL’yi kontrol etmesi gerekti\u011fini) bildiren basit ama etkili bir y\u00f6ntemdir. API rotam\u0131z da sunucu taraf\u0131nda olu\u015fan hatalar\u0131 yakalay\u0131p uygun bir mesajla geri d\u00f6nd\u00fc\u011f\u00fc i\u00e7in, bu hata mesajlar\u0131 kullan\u0131c\u0131ya do\u011fru bir \u015fekilde iletilir.<\/p>\n
Eksik\/Hatal\u0131 OG\/SERP Etiketleri \u0130\u00e7in Uyar\u0131lar<\/h3>\n
\u00d6nizleyicimizin temel amac\u0131, bir URL’nin Open Graph ve SERP bilgilerini g\u00f6stermektir. Ancak bazen bu bilgiler eksik veya hatal\u0131 olabilir. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n og:image<\/code> etiketi olmayabilir veya meta description<\/code> \u00e7ok k\u0131sa olabilir. Bu durumlar\u0131 kullan\u0131c\u0131ya a\u00e7\u0131k\u00e7a belirtmek, web varl\u0131klar\u0131n\u0131 optimize etmelerine yard\u0131mc\u0131 olur.<\/p>\nFrontend’deki \u00f6nizleme kartlar\u0131m\u0131zda, eksik bilgiler i\u00e7in “Ba\u015fl\u0131k Bulunamad\u0131” veya “A\u00e7\u0131klama Bulunamad\u0131” gibi varsay\u0131lan metinler kullan\u0131yoruz. Bu, kullan\u0131c\u0131ya hangi bilgilerin eksik oldu\u011funu ve d\u00fczeltilmesi gerekti\u011fini g\u00f6sterir. Daha da ileri giderek, bu eksiklikleri veya potansiyel sorunlar\u0131 (\u00f6rne\u011fin, ba\u015fl\u0131k veya a\u00e7\u0131klaman\u0131n ideal karakter uzunlu\u011funu a\u015fmas\u0131) vurgulayan \u00f6zel uyar\u0131 mesajlar\u0131 veya g\u00f6rsel g\u00f6stergeler ekleyebiliriz. \u00d6rne\u011fin, bir metin alan\u0131 belirli bir karakter s\u0131n\u0131r\u0131n\u0131 a\u015ft\u0131\u011f\u0131nda k\u0131rm\u0131z\u0131 bir uyar\u0131 g\u00f6sterebiliriz.<\/p>\n
\n\n\/\/ Frontend kodunda, SERP ba\u015fl\u0131\u011f\u0131 i\u00e7in karakter kontrol\u00fc \u00f6rne\u011fi\n<h3 style={{ fontSize: '1.1em', margin: '0 0 5px 0', color: '#1a0dab' }}>\n {preview.serpTitle || 'Ba\u015fl\u0131k Bulunamad\u0131'}\n {preview.serpTitle && preview.serpTitle.length > 60 && (\n <span style={{ color: 'orange', fontSize: '0.8em', marginLeft: '10px' }}>\n (\u00c7ok uzun!)\n <\/span>\n )}\n<\/h3>\n <\/code><\/pre>\n<\/div>\nBu t\u00fcr geri bildirimler, kullan\u0131c\u0131lar\u0131n web sayfalar\u0131n\u0131 SEO ve sosyal medya dostu hale getirme s\u00fcrecini daha bilin\u00e7li bir \u015fekilde y\u00f6netmelerine olanak tan\u0131r.<\/p>\n
Ger\u00e7ek Zamanl\u0131 D\u00fczenleme ve \u00d6nizleme Senaryolar\u0131 (Vaka Analizi)<\/h3>\n
S\u0131f\u0131r gecikmeli \u00f6nizleyicimizin en b\u00fcy\u00fck faydalar\u0131ndan biri, ger\u00e7ek zamanl\u0131 d\u00fczenleme senaryolar\u0131na entegre edilebilmesidir. \u00d6rne\u011fin, bir i\u00e7erik y\u00f6netim sistemi (CMS) geli\u015ftiriyorsan\u0131z veya bir e-ticaret platformunda \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131 yaz\u0131yorsan\u0131z, bu \u00f6nizleyiciyi do\u011frudan d\u00fczenleme aray\u00fcz\u00fcne dahil edebilirsiniz.<\/p>\n
Vaka Analizi: K\u00fc\u00e7\u00fck Bir E-Ticaret Sitesi \u0130\u00e7in \u00dcr\u00fcn Sayfas\u0131n\u0131n \u00d6nizlemesi<\/strong><\/p>\nDiyelim ki, el yap\u0131m\u0131 tak\u0131lar satan k\u00fc\u00e7\u00fck bir e-ticaret i\u015fletmeniz var. Her yeni \u00fcr\u00fcn i\u00e7in bir \u00fcr\u00fcn sayfas\u0131 olu\u015fturman\u0131z gerekiyor. Bu sayfalar\u0131n hem Google’da iyi s\u0131ralanmas\u0131 hem de sosyal medyada (\u00f6zellikle Instagram ve Pinterest’te) \u00e7ekici g\u00f6r\u00fcnmesi kritik. Geleneksel olarak, \u00fcr\u00fcn sayfas\u0131n\u0131 yay\u0131nlar, sonra Google’\u0131n taramas\u0131n\u0131 bekler veya bir sosyal medya g\u00f6nderisi olu\u015fturup nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kontrol edersiniz. Bu s\u00fcre\u00e7 yava\u015f ve verimsizdir.<\/p>\n
S\u0131f\u0131r gecikmeli \u00f6nizleyicimizi, \u00fcr\u00fcn y\u00f6netim panelindeki “SEO Ayarlar\u0131” veya “Sosyal Medya Ayarlar\u0131” b\u00f6l\u00fcm\u00fcne entegre edebiliriz. \u00dcr\u00fcn ba\u015fl\u0131\u011f\u0131n\u0131, a\u00e7\u0131klamas\u0131n\u0131 ve y\u00fckledi\u011finiz \u00fcr\u00fcn g\u00f6rselini girerken, \u00f6nizleyici an\u0131nda \u015funlar\u0131 g\u00f6sterebilir:<\/p>\n
\n- Google SERP \u00d6nizlemesi<\/strong>: \u00dcr\u00fcn ba\u015fl\u0131\u011f\u0131n\u0131z\u0131n (
<title><\/code>) ve meta a\u00e7\u0131klaman\u0131z\u0131n (<meta name=\"description\"><\/code>) Google arama sonu\u00e7lar\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini. Ba\u015fl\u0131k \u00e7ok uzunsa veya a\u00e7\u0131klama anahtar kelimelerden yoksunsa an\u0131nda uyar\u0131 al\u0131rs\u0131n\u0131z.<\/li>\n- Open Graph \u00d6nizlemesi<\/strong>: \u00dcr\u00fcn sayfan\u0131z\u0131n Facebook, Twitter veya LinkedIn’de payla\u015f\u0131ld\u0131\u011f\u0131nda hangi g\u00f6rsel, ba\u015fl\u0131k ve a\u00e7\u0131klamayla g\u00f6r\u00fcnece\u011fini. G\u00f6rselin boyutu platformun \u00f6nerilen oranlar\u0131na uymuyorsa veya a\u00e7\u0131klama \u00e7ok k\u0131saysa, an\u0131nda geri bildirim al\u0131rs\u0131n\u0131z.<\/li>\n<\/ul>\n
Bu entegrasyon sayesinde, pazarlama ekibi \u00fcr\u00fcn\u00fc yay\u0131nlamadan \u00f6nce gerekli t\u00fcm optimizasyonlar\u0131 yapabilir. \u00d6rne\u011fin, “El Yap\u0131m\u0131 G\u00fcm\u00fc\u015f Kolye” ba\u015fl\u0131\u011f\u0131n\u0131 “\u00d6zel Tasar\u0131m El Yap\u0131m\u0131 G\u00fcm\u00fc\u015f Kolye | E\u015fsiz Hediyelik Tak\u0131lar” olarak de\u011fi\u015ftirdi\u011finizde, SERP \u00f6nizlemesi an\u0131nda g\u00fcncellenir ve ba\u015fl\u0131\u011f\u0131n ideal uzunlukta olup olmad\u0131\u011f\u0131n\u0131 g\u00f6sterir. Ayn\u0131 \u015fekilde, \u00fcr\u00fcn g\u00f6rselini de\u011fi\u015ftirdi\u011finizde, sosyal medya \u00f6nizlemesi an\u0131nda g\u00fcncellenir ve g\u00f6rselin \u00e7ekicili\u011fini de\u011ferlendirmenize olanak tan\u0131r. Bu, sadece zamandan tasarruf etmekle kalmaz, ayn\u0131 zamanda her \u00fcr\u00fcn sayfas\u0131n\u0131n dijital platformlarda en y\u00fcksek etkiyi yaratacak \u015fekilde optimize edilmesini sa\u011flar.<\/p>\n
Sonu\u00e7: Web Varl\u0131\u011f\u0131n\u0131z\u0131 G\u00fc\u00e7lendiren Bir Ara\u00e7<\/h2>\n
Bu makalede, Next.js kullanarak nas\u0131l s\u0131f\u0131r gecikmeli bir Open Graph (OG) ve SERP \u00f6nizleyici geli\u015ftirebilece\u011fimizi ad\u0131m ad\u0131m inceledik. Projemiz, web sitelerinin sosyal medya ve arama motoru sonu\u00e7 sayfalar\u0131ndaki g\u00f6r\u00fcn\u00fcmlerini an\u0131nda g\u00f6rselle\u015ftirmeyi ama\u00e7lamaktad\u0131r. Geli\u015ftirdi\u011fimiz bu ara\u00e7, bir URL’nin HTML i\u00e7eri\u011fini Next.js API Routes arac\u0131l\u0131\u011f\u0131yla sunucu taraf\u0131nda \u00e7ekerek, cheerio<\/code> k\u00fct\u00fcphanesi ile Open Graph ve meta etiketlerini ayr\u0131\u015ft\u0131r\u0131r. Ard\u0131ndan, bu verileri frontend’e aktararak kullan\u0131c\u0131ya ger\u00e7ek zamanl\u0131 \u00f6nizlemeler sunar.<\/p>\nUygulad\u0131\u011f\u0131m\u0131z debouncing mekanizmas\u0131, gereksiz API isteklerini \u00f6nleyerek performans\u0131 art\u0131r\u0131rken, bellek i\u00e7i \u00f6nbellekleme stratejisi s\u0131k\u00e7a sorgulanan URL’ler i\u00e7in yan\u0131t s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r. Ayr\u0131ca, OG g\u00f6rsellerini kendi sunucumuz \u00fczerinden proxy etmek, hem CORS sorunlar\u0131n\u0131 \u00e7\u00f6zer hem de g\u00f6rsellerin daha verimli bir \u015fekilde sunulmas\u0131n\u0131 sa\u011flar. Bu sayede, pazarlamac\u0131lar, SEO uzmanlar\u0131 ve i\u00e7erik \u00fcreticileri, web sayfalar\u0131n\u0131n dijital platformlardaki potansiyel etkisini an\u0131nda de\u011ferlendirebilir ve gerekli optimizasyonlar\u0131 h\u0131zl\u0131ca yapabilirler.<\/p>\n
Bu \u00f6nizleyici, deneme-yan\u0131lma d\u00f6ng\u00fcs\u00fcn\u00fc ortadan kald\u0131rarak, daha bilin\u00e7li ve etkili i\u00e7erik stratejileri olu\u015fturulmas\u0131na olanak tan\u0131r. Bir web sayfas\u0131n\u0131n ba\u015fl\u0131\u011f\u0131n\u0131n \u00e7ok uzun olup olmad\u0131\u011f\u0131n\u0131, a\u00e7\u0131klamas\u0131n\u0131n yeterince ikna edici olup olmad\u0131\u011f\u0131n\u0131 veya g\u00f6rselinin sosyal medyada nas\u0131l g\u00f6r\u00fcnece\u011fini an\u0131nda g\u00f6rmek, dijital pazarlama ve SEO \u00e7al\u0131\u015fmalar\u0131nda b\u00fcy\u00fck bir avantaj sa\u011flar. Sonu\u00e7 olarak, bu t\u00fcr bir ara\u00e7, web varl\u0131\u011f\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc ve etkile\u015fimini art\u0131rarak, dijital hedeflerinize ula\u015fman\u0131zda kritik bir rol oynar.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
1. S\u0131f\u0131r gecikmeli \u00f6nizleyici ne anlama geliyor?<\/strong><\/p>\nS\u0131f\u0131r gecikmeli \u00f6nizleyici, kullan\u0131c\u0131n\u0131n bir eylem ger\u00e7ekle\u015ftirmesi (\u00f6rne\u011fin, bir URL girmesi veya metin d\u00fczenlemesi) ile sistemin buna an\u0131nda veya alg\u0131lanamayacak kadar h\u0131zl\u0131 bir \u015fekilde yan\u0131t vermesi anlam\u0131na gelir. Ger\u00e7ek anlamda s\u0131f\u0131r saniye olmasa da, kullan\u0131c\u0131n\u0131n beklemek zorunda kalmad\u0131\u011f\u0131 ak\u0131c\u0131 bir deneyim sunar.<\/p>\n
2. Neden Next.js API Routes kullanmak yerine do\u011frudan frontend’den veri \u00e7ekemiyoruz?<\/strong><\/p>\nDo\u011frudan frontend’den (taray\u0131c\u0131dan) d\u0131\u015f bir URL’nin HTML i\u00e7eri\u011fini \u00e7ekmeye \u00e7al\u0131\u015fmak, taray\u0131c\u0131lar\u0131n uygulad\u0131\u011f\u0131 CORS (Cross-Origin Resource Sharing) g\u00fcvenlik k\u0131s\u0131tlamalar\u0131 nedeniyle genellikle m\u00fcmk\u00fcn de\u011fildir. Bu k\u0131s\u0131tlamalar, k\u00f6t\u00fc niyetli sitelerin ba\u015fka sitelerden veri \u00e7almas\u0131n\u0131 engeller. Next.js API Routes, sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in bu k\u0131s\u0131tlamalara tabi de\u011fildir ve d\u0131\u015f URL’lerden g\u00fcvenli bir \u015fekilde veri \u00e7ekebilir.<\/p>\n
3. \u00d6nbellekleme stratejisi ne kadar etkili ve daha kal\u0131c\u0131 bir \u00e7\u00f6z\u00fcm var m\u0131?<\/strong><\/p>\nMakalede uygulad\u0131\u011f\u0131m\u0131z bellek i\u00e7i (in-memory) \u00f6nbellekleme, ayn\u0131 sunucu s\u00fcreci i\u00e7inde tekrarlanan istekler i\u00e7in olduk\u00e7a etkilidir ve yan\u0131t s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Ancak, bu \u00f6nbellek sunucu yeniden ba\u015flat\u0131ld\u0131\u011f\u0131nda s\u0131f\u0131rlan\u0131r ve birden fazla sunucu \u00f6rne\u011fi (\u00f6rne\u011fin, y\u00fck dengeleyici arkas\u0131nda) kullan\u0131ld\u0131\u011f\u0131nda her \u00f6rnek kendi \u00f6nbelle\u011fini tutar. \u00dcretim ortam\u0131nda daha kal\u0131c\u0131 ve \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm i\u00e7in Redis, Memcached gibi harici ve da\u011f\u0131t\u0131k \u00f6nbellek sistemleri kullanmak daha uygun olacakt\u0131r.<\/p>\n
4. Open Graph g\u00f6rselleri neden proxy edilmeli?<\/strong><\/p>\nOG g\u00f6rsellerinin proxy edilmesi, \u00fc\u00e7 ana sorunu \u00e7\u00f6zer:<\/p>\n
\n- CORS K\u0131s\u0131tlamalar\u0131<\/strong>: Farkl\u0131 bir kaynaktan gelen g\u00f6rsellerin taray\u0131c\u0131 taraf\u0131ndan engellenmesini \u00f6nler.<\/li>\n
- Performans Optimizasyonu<\/strong>: Proxy sunucusu \u00fczerinden ge\u00e7erek g\u00f6rsellerin boyutlar\u0131 optimize edilebilir, bu da y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r.<\/li>\n
- G\u00fcvenlik ve Gizlilik<\/strong>: Do\u011frudan d\u0131\u015f kaynaklara ba\u011flanmak yerine, kendi sunucunuz \u00fczerinden kontroll\u00fc bir \u015fekilde g\u00f6rselleri \u00e7ekmenizi sa\u011flar.<\/li>\n<\/ol>\n
5. Bu \u00f6nizleyiciyi bir CMS’e veya ba\u015fka bir uygulamaya nas\u0131l entegre edebilirim?<\/strong><\/p>\nGeli\u015ftirdi\u011fimiz Next.js uygulamas\u0131n\u0131 ba\u011f\u0131ms\u0131z bir hizmet olarak da\u011f\u0131tabilir ve di\u011fer uygulamalar\u0131n\u0131zdan API u\u00e7 noktas\u0131na (\/api\/preview<\/code>) istek g\u00f6ndererek entegre edebilirsiniz. \u00d6rne\u011fin, bir CMS’in i\u00e7erik d\u00fczenleme aray\u00fcz\u00fcne, kullan\u0131c\u0131n\u0131n girdi\u011fi URL’yi bu \u00f6nizleyiciye g\u00f6nderen bir JavaScript kodu ekleyebilir ve d\u00f6nen JSON verisini kendi aray\u00fcz\u00fcn\u00fczde g\u00f6sterebilirsiniz. E\u011fer CMS’iniz React tabanl\u0131ysa, \u00f6nizleyicinin frontend bile\u015fenlerini do\u011frudan CMS’inize dahil etmeniz de m\u00fcmk\u00fcnd\u00fcr.<\/p>\n#Teknoloji #WebGeli\u015ftirme #Nextjs #SEO #OpenGraph #SERP #Performans<\/p>\n