Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimini en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in Tek Sayfa Uygulamalar\u0131 (Single Page Applications – SPA) s\u0131kl\u0131kla tercih edilmektedir. Vue.js, bu alanda sundu\u011fu esneklik, reaktif yap\u0131 ve kolay \u00f6\u011frenme e\u011frisi ile geli\u015ftiricilerin en \u00e7ok tercih etti\u011fi \u00e7er\u00e7evelerden biridir. Ancak, SPA mimarisinin getirdi\u011fi harika kullan\u0131c\u0131 deneyiminin yan\u0131nda, beraberinde getirdi\u011fi baz\u0131 teknik zorluklar da vard\u0131r. Bu zorluklar\u0131n ba\u015f\u0131nda Arama Motoru Optimizasyonu (SEO) gelmektedir.<\/p>\n
Geleneksel web sitelerinde her sayfa sunucudan ayr\u0131 bir HTML belgesi olarak y\u00fcklenir. Bu sayede her sayfan\u0131n kendine ait ba\u015fl\u0131\u011f\u0131, a\u00e7\u0131klamas\u0131 ve di\u011fer yap\u0131land\u0131r\u0131lm\u0131\u015f verileri haz\u0131r olarak taray\u0131c\u0131ya ula\u015f\u0131r. Vue.js gibi istemci taraf\u0131nda derlenen (Client-Side Rendered) uygulamalarda ise durum farkl\u0131d\u0131r. Sunucudan d\u00f6nen tek bir bo\u015f \u015fablon dosyas\u0131n\u0131n \u00fczerine, JavaScript arac\u0131l\u0131\u011f\u0131yla dinamik i\u00e7erik in\u015fa edilir. Bu durum, arama motoru botlar\u0131n\u0131n ve sosyal medya platformlar\u0131n\u0131n sitenizi anlamland\u0131rmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
\u0130\u015fte bu noktada, sayfa bazl\u0131 dinamik veri y\u00f6netimi sa\u011flamak amac\u0131yla geli\u015ftirilmi\u015f olan “vue-meta” k\u00fct\u00fcphanesi devreye girer. Bu makalede, Vue.js projelerinizde arama motorlar\u0131n\u0131n ve sosyal medya botlar\u0131n\u0131n sitenizi en iyi \u015fekilde tarayabilmesi i\u00e7in vue-meta k\u00fct\u00fcphanesini nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, kurulumundan ileri d\u00fczey yap\u0131land\u0131rmalar\u0131na kadar t\u00fcm detaylar\u0131yla ele alaca\u011f\u0131z.<\/p>\n
Tek Sayfa Uygulamalar\u0131, kullan\u0131c\u0131 bir sayfadan di\u011ferine ge\u00e7ti\u011finde t\u00fcm sayfay\u0131 yeniden y\u00fcklemek yerine sadece de\u011fi\u015fen bile\u015fenleri ve verileri g\u00fcnceller. Bu, uygulaman\u0131n bir masa\u00fcst\u00fc yaz\u0131l\u0131m\u0131 kadar h\u0131zl\u0131 ve ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Ancak, bu mimarinin temel ta\u015f\u0131 olan istemci taraf\u0131 render i\u015flemi (CSR), arama motoru optimizasyonu a\u00e7\u0131s\u0131ndan baz\u0131 engeller yarat\u0131r.<\/p>\n
Google gibi geli\u015fmi\u015f arama motorlar\u0131n\u0131n botlar\u0131 art\u0131k JavaScript kodlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rabilmektedir. Ancak bu i\u015flem, statik bir HTML sayfas\u0131n\u0131 taramaktan \u00e7ok daha fazla bilgi i\u015flem g\u00fcc\u00fc ve zaman gerektirir. Botlar sitenizi ziyaret etti\u011finde, JavaScript dosyalar\u0131n\u0131n tamamen y\u00fcklenmesini ve \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 her zaman beklemeyebilir. E\u011fer bot sayfan\u0131n i\u00e7eri\u011fini ve ba\u015fl\u0131k bilgilerini hemen g\u00f6remezse, sitenizi bo\u015f veya eksik bir sayfa olarak dizine ekleyebilir.<\/p>\n
Daha da \u00f6nemlisi, Bing, Yandex, DuckDuckGo gibi di\u011fer arama motorlar\u0131 veya Facebook, Twitter, LinkedIn gibi sosyal medya platformlar\u0131n\u0131n botlar\u0131 JavaScript \u00e7al\u0131\u015ft\u0131rma konusunda Google kadar geli\u015fmi\u015f de\u011fildir. Bu platformlarda sitenizin bir ba\u011flant\u0131s\u0131 payla\u015f\u0131ld\u0131\u011f\u0131nda, platformun botu sayfadaki open graph veya twitter card bilgilerini okumak ister. E\u011fer bu bilgiler dinamik olarak istemci taraf\u0131nda olu\u015fturuluyorsa ve do\u011fru bir \u015fekilde y\u00f6netilmiyorsa, payla\u015f\u0131lan ba\u011flant\u0131da sadece sitenizin ad\u0131 g\u00f6r\u00fcn\u00fcr; ilgili sayfaya \u00f6zel ba\u015fl\u0131k, a\u00e7\u0131klama ve g\u00f6rsel bilgileri bo\u015f kal\u0131r.<\/p>\n
Bu sorunu \u00e7\u00f6zmek i\u00e7in her sayfa ge\u00e7i\u015finde taray\u0131c\u0131n\u0131n \u00fcst k\u0131sm\u0131nda yer alan ba\u015fl\u0131k, a\u00e7\u0131klama, anahtar kelimeler ve sosyal medya etiketleri gibi verilerin dinamik olarak g\u00fcncellenmesi gerekir. Vue.js ekosisteminde bu i\u015fi en pratik ve standartlara uygun \u015fekilde yapan ara\u00e7 vue-meta k\u00fct\u00fcphanesidir.<\/p>\n
vue-meta, Vue.js uygulamalar\u0131 i\u00e7in \u00f6zel olarak geli\u015ftirilmi\u015f bir metadata y\u00f6neticisidir. Bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunarak, her bir Vue bile\u015feninin kendi \u00fcst bilgilerini tan\u0131mlamas\u0131na olanak tan\u0131r.<\/p>\n
K\u00fct\u00fcphanenin \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir: Vue bile\u015fen a\u011fac\u0131n\u0131 yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru tarar. En d\u0131\u015ftaki ana bile\u015fenden ba\u015flayarak alt bile\u015fenlere do\u011fru ilerler ve tan\u0131mlanan t\u00fcm meta bilgilerini birle\u015ftirir. E\u011fer bir alt bile\u015fen, \u00fcst bile\u015fende tan\u0131mlanm\u0131\u015f olan bir \u00f6zelli\u011fi (\u00f6rne\u011fin sayfa ba\u015fl\u0131\u011f\u0131n\u0131) yeniden tan\u0131mlarsa, vue-meta otomatik olarak bu de\u011feri ezerek en g\u00fcncel ve spesifik olan veriyi taray\u0131c\u0131n\u0131n head alan\u0131na yans\u0131t\u0131r.<\/p>\n
Bu k\u00fct\u00fcphane sadece sayfa ba\u015fl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirmekle kalmaz; ayn\u0131 zamanda stil dosyalar\u0131, harici script kaynaklar\u0131, dil nitelikleri ve her t\u00fcrl\u00fc yap\u0131land\u0131r\u0131lm\u0131\u015f veriyi (JSON-LD gibi) dinamik olarak y\u00f6netmenizi sa\u011flar. \u00dcstelik t\u00fcm bunlar\u0131 Vue’nun reaktif veri ba\u011flama sistemiyle tam uyumlu bir \u015fekilde ger\u00e7ekle\u015ftirir. Yani bile\u015fen i\u00e7indeki bir veri de\u011fi\u015fti\u011finde, ili\u015fkili olan meta bilgisi de an\u0131nda g\u00fcncellenir.<\/p>\n
Projelerinizde vue-meta kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle k\u00fct\u00fcphaneyi projenize dahil etmeniz gerekir. Bu ad\u0131mda, kulland\u0131\u011f\u0131n\u0131z Vue s\u00fcr\u00fcm\u00fcne uygun olan versiyonu se\u00e7meniz \u00f6nemlidir. Vue 2 tabanl\u0131 projeler i\u00e7in vue-meta’n\u0131n 2.x s\u00fcr\u00fcmleri kararl\u0131 olarak \u00e7al\u0131\u015fmaktad\u0131r.<\/p>\n
K\u00fct\u00fcphaneyi npm veya yarn paket y\u00f6neticilerini kullanarak projenize eklemek i\u00e7in terminalinizde a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n
# npm kullan\u0131yorsan\u0131z\nnpm install vue-meta --save\n\nyarn kullan\u0131yorsan\u0131z<\/h2>\nyarn add vue-meta<\/code><\/pre>\n
Kurulum i\u015flemi tamamland\u0131ktan sonra, k\u00fct\u00fcphaneyi Vue uygulaman\u0131za entegre etmeniz gerekir. Bunun i\u00e7in projenizin giri\u015f noktas\u0131 olan ana JavaScript dosyas\u0131n\u0131 a\u00e7mal\u0131 ve vue-meta’y\u0131 bir eklenti (plugin) olarak kaydetmelisiniz.<\/p>\n
A\u015fa\u011f\u0131daki kod blo\u011funda, vue-meta’n\u0131n uygulamaya nas\u0131l dahil edildi\u011fini g\u00f6rebilirsiniz:<\/p>\n
import Vue from 'vue';\nimport App from '.\/App.vue';\nimport VueMeta from 'vue-meta';\n\n\/\/ VueMeta eklentisini Vue sistemine dahil ediyoruz\nVue.use(VueMeta);\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app');<\/code><\/pre>\nArt\u0131k uygulaman\u0131z\u0131n herhangi bir bile\u015feninde metaInfo se\u00e7ene\u011fini kullanarak head alan\u0131n\u0131 y\u00f6netmeye haz\u0131rs\u0131n\u0131z. VueMeta uygulaman\u0131za dahil edildikten sonra, t\u00fcm bile\u015fenlerinizde “metaInfo” ad\u0131nda yeni bir se\u00e7enek alan\u0131 aktif hale gelecektir.<\/p>\n
Temel Metadata Yap\u0131land\u0131rmas\u0131<\/h2>\n
vue-meta’n\u0131n en temel kullan\u0131m\u0131, bir bile\u015fen i\u00e7erisinde statik meta bilgilerini tan\u0131mlamakt\u0131r. Genellikle uygulaman\u0131z\u0131n ana bile\u015feni olan App.vue dosyas\u0131nda varsay\u0131lan de\u011ferleri tan\u0131mlamak ve alt sayfalarda bu de\u011ferleri \u00f6zelle\u015ftirmek iyi bir tasar\u0131m desenidir.<\/p>\n
\u0130lk olarak, App.vue dosyas\u0131nda genel bir ba\u015fl\u0131k \u015fablonu ve varsay\u0131lan a\u00e7\u0131klamalar\u0131 nas\u0131l tan\u0131mlayabilece\u011fimize bakal\u0131m:<\/p>\n
export default {\n name: 'App',\n metaInfo: {\n \/\/ E\u011fer alt bile\u015fenlerde ba\u015fl\u0131k tan\u0131mlanmazsa bu ba\u015fl\u0131k kullan\u0131l\u0131r\n title: 'Benim Harika Web Sitem',\n \/\/ Alt bile\u015fenlerdeki ba\u015fl\u0131klar\u0131n sonuna eklenecek \u015fablonu belirler\n titleTemplate: '%s | \u015eirket Ad\u0131',\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { name: 'description', content: '\u015eirketimizin resmi web sitesine ho\u015f geldiniz. Sekt\u00f6rdeki en iyi \u00e7\u00f6z\u00fcmler.' }\n ]\n }\n}<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte titleTemplate \u00f6zelli\u011fine dikkat \u00e7ekmek gerekir. Buradaki %s ifadesi, alt bile\u015fenlerden gelecek olan dinamik ba\u015fl\u0131k bilgisini temsil eder. \u00d6rne\u011fin, “Hakk\u0131m\u0131zda” sayfas\u0131na ge\u00e7i\u015f yap\u0131ld\u0131\u011f\u0131nda ve o sayfadaki ba\u015fl\u0131k “Hakk\u0131m\u0131zda” olarak tan\u0131mland\u0131\u011f\u0131nda, taray\u0131c\u0131 sekmesinde g\u00f6r\u00fcnen nihai ba\u015fl\u0131k otomatik olarak “Hakk\u0131m\u0131zda | \u015eirket Ad\u0131” \u015feklinde bi\u00e7imlendirilecektir.<\/p>\n
\u015eimdi de bir alt sayfa olan Hakk\u0131m\u0131zda (About.vue) bile\u015feninde bu de\u011ferleri nas\u0131l g\u00fcncelleyece\u011fimizi inceleyelim:<\/p>\n
export default {\n name: 'AboutView',\n metaInfo: {\n title: 'Hakk\u0131m\u0131zda',\n meta: [\n {\n name: 'description',\n content: 'On y\u0131l\u0131 a\u015fk\u0131n tecr\u00fcbemizle sekt\u00f6rde \u00f6nc\u00fc \u00e7\u00f6z\u00fcmler sunan ekibimizle tan\u0131\u015f\u0131n.'\n }\n ]\n }\n}<\/code><\/pre>\nHakk\u0131m\u0131zda sayfas\u0131 y\u00fcklendi\u011finde, vue-meta otomatik olarak App.vue’daki varsay\u0131lan a\u00e7\u0131klamay\u0131 Hakk\u0131m\u0131zda sayfas\u0131n\u0131n a\u00e7\u0131klamas\u0131 ile de\u011fi\u015ftirir. Ba\u015fl\u0131k ise \u015fablona uygun olarak g\u00fcncellenir. Bu hiyerar\u015fik yap\u0131, kod tekrar\u0131n\u0131 \u00f6nler ve merkezi bir metadata y\u00f6netimini son derece kolayla\u015ft\u0131r\u0131r.<\/p>\n
Dinamik ve Reaktif Metadata Y\u00f6netimi<\/h2>\n
Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, web sitenizdeki i\u00e7eriklerin b\u00fcy\u00fck bir k\u0131sm\u0131 statik de\u011fildir. \u00d6zellikle e-ticaret sitelerinde, haber portallar\u0131nda veya bloglarda sayfa ba\u015fl\u0131klar\u0131 ve a\u00e7\u0131klamalar\u0131 veri taban\u0131ndan gelen dinamik verilere dayan\u0131r. \u00d6rne\u011fin, bir \u00fcr\u00fcn detay sayfas\u0131na girildi\u011finde ba\u015fl\u0131\u011f\u0131n \u00fcr\u00fcn\u00fcn ad\u0131, a\u00e7\u0131klaman\u0131n ise \u00fcr\u00fcn\u00fcn k\u0131sa a\u00e7\u0131klamas\u0131 olmas\u0131 gerekir.<\/p>\n
vue-meta, reaktif veri yap\u0131s\u0131yla m\u00fckemmel bir uyum i\u00e7inde \u00e7al\u0131\u015f\u0131r. Bunu sa\u011flamak i\u00e7in metaInfo \u00f6zelli\u011fini bir nesne yerine, geriye nesne d\u00f6nd\u00fcren bir fonksiyon olarak tan\u0131mlamam\u0131z gerekir. Bu sayede bile\u015fenin data, computed veya props alanlar\u0131ndaki reaktif de\u011fi\u015fkenlere “this” anahtar kelimesiyle eri\u015febiliriz.<\/p>\n
A\u015fa\u011f\u0131daki \u00f6rnekte, bir API’den \u00e7ekilen \u00fcr\u00fcn verilerine g\u00f6re metadata bilgilerinin nas\u0131l dinamik olarak g\u00fcncellendi\u011fini g\u00f6rebilirsiniz:<\/p>\n
export default {\n name: 'ProductDetail',\n data() {\n return {\n product: {\n title: '',\n description: '',\n price: ''\n },\n isLoading: true\n };\n },\n metaInfo() {\n return {\n \/\/ Veri y\u00fcklenene kadar ge\u00e7ici bir ba\u015fl\u0131k g\u00f6steriyoruz\n title: this.isLoading ? '\u00dcr\u00fcn Y\u00fckleniyor...' : this.product.title,\n meta: [\n {\n name: 'description',\n content: this.isLoading\n ? 'L\u00fctfen bekleyin, \u00fcr\u00fcn detaylar\u0131 haz\u0131rlan\u0131yor.'\n : ${this.product.title} sadece ${this.product.price} fiyat\u0131yla ma\u011fazam\u0131zda.<\/code>\n }\n ]\n };\n },\n created() {\n this.fetchProductData();\n },\n methods: {\n fetchProductData() {\n \/\/ API \u00e7a\u011fr\u0131s\u0131n\u0131 sim\u00fcle ediyoruz\n setTimeout(() => {\n this.product = {\n title: 'Kablosuz G\u00fcr\u00fclt\u00fc Engelleyici Kulakl\u0131k',\n description: 'Y\u00fcksek kaliteli ses deneyimi sunan, aktif g\u00fcr\u00fclt\u00fc engelleme \u00f6zellikli kulakl\u0131k.',\n price: '1499 TL'\n };\n this.isLoading = false;\n }, 1500);\n }\n }\n}<\/code><\/pre>\nBu kod yap\u0131s\u0131nda, sayfa ilk y\u00fcklendi\u011finde isLoading de\u011feri true oldu\u011fu i\u00e7in ba\u015fl\u0131k “\u00dcr\u00fcn Y\u00fckleniyor… | \u015eirket Ad\u0131” \u015feklinde olacakt\u0131r. API’den veri ba\u015far\u0131yla \u00e7ekilip product nesnesi g\u00fcncellendi\u011finde ve isLoading de\u011feri false yap\u0131ld\u0131\u011f\u0131nda, Vue’nun reaktif sistemi bu de\u011fi\u015fikli\u011fi alg\u0131lar. vue-meta an\u0131nda devreye girerek taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 “Kablosuz G\u00fcr\u00fclt\u00fc Engelleyici Kulakl\u0131k | \u015eirket Ad\u0131” olarak ve a\u00e7\u0131klama etiketini de yeni \u00fcr\u00fcn bilgileriyle g\u00fcnceller. Bu i\u015flem kullan\u0131c\u0131 hissetmeden, milisaniyeler i\u00e7inde ger\u00e7ekle\u015fir.<\/p>\n
Geli\u015fmi\u015f \u00d6zellikler ve \u0130pu\u00e7lar\u0131<\/h2>\n
Temel ve dinamik metadata y\u00f6netiminin \u00f6tesinde, b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 karma\u015f\u0131k durumlar vard\u0131r. vue-meta, bu durumlar\u0131 y\u00f6netebilmeniz i\u00e7in geli\u015fmi\u015f \u00f6zellikler sunar.<\/p>\n
vmid ile \u00c7ak\u0131\u015fmalar\u0131 \u00d6nleme<\/h3>\n
Varsay\u0131lan olarak vue-meta, alt bile\u015fenlerde tan\u0131mlanan meta etiketlerini \u00fcst bile\u015fenlerdekilerle birle\u015ftirirken e\u015fle\u015fen etiketleri de\u011fi\u015ftirmeye \u00e7al\u0131\u015f\u0131r. Ancak bazen ayn\u0131 isimde birden fazla etiket olu\u015fabilir veya k\u00fct\u00fcphane hangi etiketi ezmesi gerekti\u011fini tam olarak kestiremeyebilir. Bu gibi \u00e7ak\u0131\u015fmalar\u0131 \u00f6nlemek i\u00e7in vmid (Virtual Metadata ID) benzersiz tan\u0131mlay\u0131c\u0131s\u0131n\u0131 kullanabilirsiniz.<\/p>\n
E\u011fer bir meta etiketine vmid de\u011feri atarsan\u0131z, vue-meta hiyerar\u015fide ayn\u0131 vmid de\u011ferine sahip ba\u015fka bir etiket g\u00f6rd\u00fc\u011f\u00fcnde eskisini tamamen siler ve yenisini yazar.<\/p>\n
\/\/ App.vue (\u00dcst Bile\u015fen)\nmetaInfo: {\n meta: [\n { vmid: 'custom-desc', name: 'description', content: 'Varsay\u0131lan a\u00e7\u0131klama metni.' }\n ]\n}\n\n\/\/ Product.vue (Alt Bile\u015fen)\nmetaInfo: {\n meta: [\n { vmid: 'custom-desc', name: 'description', content: '\u00dcr\u00fcne \u00f6zel yeni a\u00e7\u0131klama metni.' }\n ]\n}<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte vmid kullan\u0131ld\u0131\u011f\u0131 i\u00e7in, alt bile\u015fen y\u00fcklendi\u011finde \u00fcst bile\u015fendeki a\u00e7\u0131klama kesinlikle ezilir ve HTML \u00e7\u0131kt\u0131s\u0131nda m\u00fckerrer a\u00e7\u0131klama etiketleri olu\u015fmas\u0131 engellenir. Bu, SEO sa\u011fl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan son derece kritik bir konudur.<\/p>\n
Sosyal Medya Payla\u015f\u0131mlar\u0131 \u0130\u00e7in Open Graph ve Twitter Cards<\/h3>\n
Sitenizin sosyal medya platformlar\u0131nda payla\u015f\u0131ld\u0131\u011f\u0131nda zengin g\u00f6rseller ve do\u011fru a\u00e7\u0131klamalarla g\u00f6r\u00fcnmesini istiyorsan\u0131z, Open Graph (OG) ve Twitter Card protokollerini destekleyen meta etiketlerini eklemelisiniz. vue-meta ile bu etiketleri tan\u0131mlamak olduk\u00e7a kolayd\u0131r:<\/p>\n
metaInfo() {\n return {\n title: this.product.title,\n meta: [\n \/\/ Standart SEO Etiketleri\n { name: 'description', content: this.product.description },\n \n \/\/ Open Graph \/ Facebook Etiketleri\n { property: 'og:type', content: 'product' },\n { property: 'og:title', content: this.product.title },\n { property: 'og:description', content: this.product.description },\n { property: 'og:image', content: this.product.imageUrl },\n { property: 'og:url', content: 'https:\/\/siteniz.com\/urun\/' + this.product.id },\n\n \/\/ Twitter Card Etiketleri\n { name: 'twitter:card', content: 'summary_large_image' },\n { name: 'twitter:title', content: this.product.title },\n { name: 'twitter:description', content: this.product.description },\n { name: 'twitter:image', content: this.product.imageUrl }\n ]\n }\n}<\/code><\/pre>\nBurada dikkat edilmesi gereken nokta, dinamik URL veya g\u00f6rsel yollar\u0131n\u0131n tam adres (absolute URL) olarak verilmesidir. Sosyal medya botlar\u0131 g\u00f6receli yollar\u0131 (relative paths) \u00e7\u00f6z\u00fcmleyemez.<\/p>\n
Vue 3 ve Modern Alternatifler<\/h2>\n
Web teknolojileri s\u00fcrekli olarak geli\u015fmektedir. Vue.js toplulu\u011fu, Vue 3’\u00fcn hayat\u0131m\u0131za girmesiyle birlikte Composition API mimarisine ge\u00e7i\u015f yapm\u0131\u015ft\u0131r. Vue 2 d\u00f6neminde standart olan vue-meta k\u00fct\u00fcphanesi, Vue 3 i\u00e7in de g\u00fcncellenmi\u015f olsa da, modern Vue 3 ekosisteminde daha hafif, daha h\u0131zl\u0131 ve Composition API ile tam uyumlu yeni alternatifler \u00f6ne \u00e7\u0131kmaktad\u0131r.<\/p>\n
Bug\u00fcn Vue 3 projelerinde metadata y\u00f6netimi i\u00e7in en \u00e7ok tavsiye edilen ve Nuxt 3 taraf\u0131ndan da varsay\u0131lan olarak kullan\u0131lan k\u00fct\u00fcphane “Unhead” k\u00fct\u00fcphanesidir. Unhead, vue-meta’n\u0131n felsefesini devral\u0131p modern JavaScript standartlar\u0131na g\u00f6re yeniden tasarlanm\u0131\u015f halidir.<\/p>\n
E\u011fer projenizi Vue 3’e ta\u015f\u0131may\u0131 d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z veya yeni bir Vue 3 projesine ba\u015fl\u0131yorsan\u0131z, metadata y\u00f6netimini useHead fonksiyonu ile nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 bilmeniz faydal\u0131 olacakt\u0131r.<\/p>\n
\u0130\u015fte Unhead kullanarak Vue 3’te metadata tan\u0131mlaman\u0131n modern yolu:<\/p>\n
import { ref } from 'vue';\nimport { useHead } from '@unhead\/vue';\n\nexport default {\n setup() {\n const pageTitle = ref('Modern Vue 3 Sayfas\u0131');\n\n \/\/ useHead fonksiyonu ile metadata y\u00f6netimi\n useHead({\n title: pageTitle,\n meta: [\n {\n name: 'description',\n content: 'Vue 3 ve Unhead kullanarak arama motoru optimizasyonu y\u00f6netimi.'\n },\n {\n property: 'og:title',\n \/\/ Reaktif de\u011fi\u015fkenleri do\u011frudan ba\u011flayabilirsiniz\n content: () => pageTitle.value\n }\n ]\n });\n\n return {\n pageTitle\n };\n }\n}<\/code><\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, Vue 3 ekosisteminde de mant\u0131k ayn\u0131 kalmakla birlikte yaz\u0131m tarz\u0131 Composition API’ye uygun olarak \u00e7ok daha mod\u00fcler ve okunabilir hale gelmi\u015ftir. Reaktif referanslar\u0131 do\u011frudan useHead i\u00e7erisine aktarabilir veya fonksiyon \u015feklinde dinamik takibini sa\u011flayabilirsiniz.<\/p>\n
Sunucu Taraf\u0131 Render (SSR) ve Nuxt.js Ba\u011flam\u0131<\/h2>\n
Sadece istemci taraf\u0131nda \u00e7al\u0131\u015fan bir Vue.js uygulamas\u0131nda vue-meta kullanmak, taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 ve etiketlerini dinamik olarak g\u00fcnceller. Bu, kullan\u0131c\u0131 deneyimi ve taray\u0131c\u0131 sekmelerinin do\u011fru g\u00f6r\u00fcnmesi a\u00e7\u0131s\u0131ndan harikad\u0131r. Ancak, daha \u00f6nce de belirtti\u011fimiz gibi, baz\u0131 arama motoru botlar\u0131 ve sosyal medya taray\u0131c\u0131lar\u0131 JavaScript kodunu \u00e7al\u0131\u015ft\u0131rmadan do\u011frudan sunucudan d\u00f6nen ham HTML kodunu okurlar.<\/p>\n
E\u011fer ger\u00e7ek anlamda kusursuz bir SEO performans\u0131na ihtiyac\u0131n\u0131z varsa, uygulaman\u0131z\u0131 Sunucu Taraf\u0131 Render (SSR) veya Statik Site Olu\u015fturucu (SSG) mimarisine ge\u00e7irmeniz gerekir. Vue.js d\u00fcnyas\u0131nda bunu yapman\u0131n en pop\u00fcler ve profesyonel yolu Nuxt.js framework’\u00fcn\u00fc kullanmakt\u0131r.<\/p>\n
Nuxt.js, arka planda vue-meta (Nuxt 2 i\u00e7in) veya Unhead (Nuxt 3 i\u00e7in) k\u00fct\u00fcphanelerini entegre olarak bar\u0131nd\u0131r\u0131r. Nuxt.js kulland\u0131\u011f\u0131n\u0131zda, sunucu taraf\u0131nda sayfa olu\u015fturulurken tan\u0131mlad\u0131\u011f\u0131n\u0131z t\u00fcm meta bilgileri do\u011frudan HTML belgesinin i\u00e7erisine g\u00f6m\u00fcl\u00fcr. B\u00f6ylece sitenizi ziyaret eden botlar, JavaScript’in y\u00fcklenmesini beklemeden t\u00fcm SEO ve sosyal medya etiketlerini an\u0131nda ve eksiksiz bir \u015fekilde okuyabilir.<\/p>\n
E\u011fer kendi \u00f6zel SSR kurulumunuzu yap\u0131yorsan\u0131z, vue-meta’n\u0131n sundu\u011fu sunucu taraf\u0131 API’lerini kullanarak head i\u00e7eri\u011fini sunucuda dizeye d\u00f6n\u00fc\u015ft\u00fcrmeli ve HTML \u015fablonunuza enjekte etmelisiniz. Bu s\u00fcre\u00e7, uygulaman\u0131z\u0131n SEO g\u00fcc\u00fcn\u00fc maksimum seviyeye \u00e7\u0131karacakt\u0131r.<\/p>\n
Sonu\u00e7<\/h2>\n
Tek Sayfa Uygulamalar\u0131nda (SPA) arama motoru optimizasyonu (SEO) ve sosyal medya entegrasyonu, do\u011fru ara\u00e7lar kullan\u0131lmad\u0131\u011f\u0131nda b\u00fcy\u00fck bir zorlu\u011fa d\u00f6n\u00fc\u015febilir. Vue.js projelerinde bu sorunun en etkili ve standart \u00e7\u00f6z\u00fcm\u00fc, metadata y\u00f6netimini profesyonelce \u00fcstlenen vue-meta k\u00fct\u00fcphanesidir.<\/p>\n
Bu makalede, vue-meta k\u00fct\u00fcphanesinin \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131, projenize nas\u0131l entegre edece\u011finizi, statik ve dinamik verileri nas\u0131l y\u00f6netece\u011finizi detayl\u0131ca ele ald\u0131k. Ayr\u0131ca vmid gibi \u00e7ak\u0131\u015fma \u00f6nleyici mekanizmalar\u0131, sosyal medya payla\u015f\u0131mlar\u0131 i\u00e7in gerekli olan Open Graph etiketlerini ve Vue 3 d\u00fcnyas\u0131ndaki modern alternatifi olan Unhead k\u00fct\u00fcphanesini inceledik.<\/p>\n
Ba\u015far\u0131l\u0131 bir SEO stratejisinin sadece do\u011fru anahtar kelimeleri se\u00e7mekten ibaret olmad\u0131\u011f\u0131n\u0131, bu kelimelerin teknik olarak arama motorlar\u0131na do\u011fru formatta sunulmas\u0131 gerekti\u011fini unutmamal\u0131s\u0131n\u0131z. Projenizin mimarisine g\u00f6re, do\u011fru metadata y\u00f6netim ara\u00e7lar\u0131n\u0131 kullanmak, dijital d\u00fcnyadaki g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcz\u00fc ve ba\u015far\u0131n\u0131z\u0131 do\u011frudan belirleyecektir. Vue.js projelerinizde vue-meta’y\u0131 do\u011fru yap\u0131land\u0131rarak, hem kullan\u0131c\u0131 dostu hem de arama motoru dostu web uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/p>\n