{"id":37520,"date":"2026-01-07T13:30:41","date_gmt":"2026-01-07T10:30:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/"},"modified":"2026-01-07T13:30:41","modified_gmt":"2026-01-07T10:30:41","slug":"seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/","title":{"rendered":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?"},"content":{"rendered":"<h2>SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?<\/h2>\n<p>Bu makalede, pop\u00fcler bir e\u011flence oyunu olan FLAMES hesaplay\u0131c\u0131s\u0131n\u0131 Vanilla JavaScript kullanarak nas\u0131l geli\u015ftirdi\u011fimi ve bu s\u00fcre\u00e7te web sitenizin arama motorlar\u0131nda daha iyi s\u0131ralanmas\u0131n\u0131 sa\u011flayacak SEO stratejilerini nas\u0131l uygulad\u0131\u011f\u0131m\u0131 detayl\u0131 bir \u015fekilde anlataca\u011f\u0131m. S\u0131f\u0131rdan bir proje olu\u015ftururken sadece i\u015flevselli\u011fe odaklanmak yerine, kullan\u0131c\u0131 deneyimini ve arama motoru g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc en ba\u015ftan d\u00fc\u015f\u00fcnmenin ne kadar \u00f6nemli oldu\u011funu g\u00f6rece\u011fiz.<\/p>\n<h2>Projenin Temelleri ve FLAMES Mant\u0131\u011f\u0131<\/h2>\n<p>Herhangi bir yaz\u0131l\u0131m projesine ba\u015flarken, projenin amac\u0131n\u0131, temel gereksinimlerini ve kullan\u0131lacak teknolojileri netle\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. FLAMES hesaplay\u0131c\u0131s\u0131 projesi de bu ad\u0131mlarla ba\u015flad\u0131.<\/p>\n<h3>FLAMES Oyunu Nedir?<\/h3>\n<p>FLAMES, iki ki\u015finin isimleri aras\u0131ndaki ili\u015fkiyi tahmin etmek i\u00e7in kullan\u0131lan e\u011flenceli ve basit bir oyundur. &#8220;FLAMES&#8221; kelimesi, Friendship (Arkada\u015fl\u0131k), Love (A\u015fk), Affection (Sevgi), Marriage (Evlilik), Enemy (D\u00fc\u015fman) ve Siblings (Karde\u015flik) kelimelerinin ba\u015f harflerinden olu\u015fur. Oyunun temel mant\u0131\u011f\u0131, iki isimdeki ortak harfleri \u00e7\u0131kar\u0131p kalan harflerin say\u0131s\u0131na g\u00f6re FLAMES kelimesinin harflerini eleyerek sonuca ula\u015fmakt\u0131r.<\/p>\n<h3>Neden Vanilla JS?<\/h3>\n<p>G\u00fcn\u00fcm\u00fczde bir\u00e7ok g\u00fc\u00e7l\u00fc JavaScript framework&#8217;\u00fc (React, Vue, Angular vb.) bulunsa da, bu proje i\u00e7in Vanilla JS&#8217;i tercih ettim. Bunun birka\u00e7 \u00f6nemli nedeni var:<\/p>\n<ul>\n<li><strong>Hafiflik ve Performans:<\/strong> Harici k\u00fct\u00fcphanelere ba\u011f\u0131ml\u0131 olmamak, sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r ve gereksiz kod \u015fi\u015fkinli\u011fini \u00f6nler. Bu, \u00f6zellikle SEO i\u00e7in kritik bir fakt\u00f6rd\u00fcr.<\/li>\n<li><strong>Tam Kontrol:<\/strong> Vanilla JS, DOM \u00fczerinde tam kontrol sa\u011flar. Bu sayede, arama motorlar\u0131n\u0131n i\u00e7eri\u011fi do\u011fru bir \u015fekilde indekslemesini sa\u011flayacak semantik ve eri\u015filebilir HTML yap\u0131s\u0131n\u0131 daha kolay olu\u015fturabiliriz.<\/li>\n<li><strong>\u00d6\u011frenme ve Anlama:<\/strong> Temel JavaScript prensiplerini peki\u015ftirmek ve derinlemesine anlamak i\u00e7in harika bir yoldur.<\/li>\n<\/ul>\n<h3>Temel Algoritma ve Ad\u0131mlar<\/h3>\n<p>FLAMES hesaplay\u0131c\u0131s\u0131n\u0131n algoritmas\u0131 \u015fu ad\u0131mlardan olu\u015fur:<\/p>\n<ol>\n<li>Kullan\u0131c\u0131dan iki isim al\u0131n\u0131r.<\/li>\n<li>Her iki isimdeki bo\u015fluklar kald\u0131r\u0131l\u0131r ve harfler k\u00fc\u00e7\u00fck harfe d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr.<\/li>\n<li>\u0130ki isimdeki ortak harfler bulunur ve her iki isimden de bu ortak harfler \u00e7\u0131kar\u0131l\u0131r.<\/li>\n<li>Geriye kalan harflerin toplam say\u0131s\u0131 bulunur (\u00f6rne\u011fin, &#8220;Ahmet&#8221; ve &#8220;Ay\u015fe&#8221; i\u00e7in &#8216;h&#8217;, &#8216;m&#8217;, &#8216;t&#8217;, &#8216;y&#8217;, &#8216;\u015f&#8217; harfleri kal\u0131r, toplam 5 harf).<\/li>\n<li>Bu say\u0131, FLAMES kelimesinin harflerini elemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, say\u0131 5 ise, FLAMES kelimesinin 5. harfi (E) silinir ve kelime &#8220;FLAMS&#8221; olur. Bu i\u015flem, FLAMES kelimesinden geriye tek bir harf kalana kadar tekrarlan\u0131r.<\/li>\n<li>Kalan harf, ili\u015fki t\u00fcr\u00fcn\u00fc (F, L, A, M, E, S) temsil eder.<\/li>\n<\/ol>\n<h2>Semantik HTML ve Eri\u015filebilirlik<\/h2>\n<p>SEO&#8217;nun temel ta\u015flar\u0131ndan biri, arama motorlar\u0131n\u0131n ve ekran okuyucular\u0131n web sayfan\u0131z\u0131n i\u00e7eri\u011fini kolayca anlayabilece\u011fi, iyi yap\u0131land\u0131r\u0131lm\u0131\u015f ve semantik HTML kullanmakt\u0131r. Bu, sadece arama motorlar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda t\u00fcm kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunar.<\/p>\n<h3>Anlaml\u0131 Yap\u0131land\u0131rma<\/h3>\n<p>HTML etiketlerini do\u011fru ama\u00e7lar i\u00e7in kullanmak, sayfan\u0131z\u0131n yap\u0131s\u0131n\u0131 arama motorlar\u0131na a\u00e7\u0131k\u00e7a belirtir. \u00d6rne\u011fin, ana i\u00e7eri\u011fi <code><main><\/code> etiketi i\u00e7ine almak, ba\u015fl\u0131klar\u0131 <code><\/p>\n<h2><\/code> ve <code><\/p>\n<h3><\/code> ile i\u015faretlemek (<code><\/p>\n<h1><\/code> etiketi ana sayfa ba\u015fl\u0131\u011f\u0131 i\u00e7in ayr\u0131lmal\u0131 ve bir sayfada bir kez kullan\u0131lmal\u0131), paragraflar\u0131 <code><\/p>\n<p><\/code> ile, listeleri <code><\/p>\n<ul><\/code> veya <code><\/p>\n<ol><\/code> ile belirtmek \u00f6nemlidir. FLAMES hesaplay\u0131c\u0131s\u0131 i\u00e7in a\u015fa\u011f\u0131daki gibi bir yap\u0131 kulland\u0131m:<\/p>\n<pre><code>\n<main>\n    <section id=\"calculator-section\">\n        <h2>FLAMES Hesaplay\u0131c\u0131<\/h2>\n        <p>\u0130ki isim aras\u0131ndaki ili\u015fkiyi \u00f6\u011frenin!<\/p>\n        <form id=\"flamesForm\">\n            <div>\n                <label for=\"name1\">\u0130lk \u0130sim:<\/label>\n                <input type=\"text\" id=\"name1\" name=\"name1\" required aria-label=\"\u0130lk ismi girin\">\n            <\/div>\n            <div>\n                <label for=\"name2\">\u0130kinci \u0130sim:<\/label>\n                <input type=\"text\" id=\"name2\" name=\"name2\" required aria-label=\"\u0130kinci ismi girin\">\n            <\/div>\n            <button type=\"submit\">Hesapla<\/button>\n        <\/form>\n        <div id=\"result\" role=\"status\" aria-live=\"polite\"><\/div>\n    <\/section>\n<\/main>\n<\/pre>\n<p><\/code><\/p>\n<h3>Form Elemanlar\u0131 ve Etiketler<\/h3>\n<p>Form elemanlar\u0131 (<code><input><\/code>, <code><button><\/code>) ve onlarla ili\u015fkili <code><label><\/code> etiketleri, hem kullan\u0131c\u0131 deneyimi hem de eri\u015filebilirlik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. <code><label><\/code> etiketini <code>for<\/code> niteli\u011fi ile ilgili <code><input><\/code> eleman\u0131na ba\u011flamak, ekran okuyucular\u0131n hangi etiketin hangi giri\u015f alan\u0131na ait oldu\u011funu anlamas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>ARIA Nitelikleri ve Eri\u015filebilirlik<\/h3>\n<p>WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) nitelikleri, standart HTML ile ifade edilemeyen semantik bilgileri sa\u011flamak i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle dinamik i\u00e7erik g\u00fcncellemelerinde veya \u00f6zel UI bile\u015fenlerinde ARIA kullan\u0131m\u0131 \u00f6nemlidir. \u00d6rne\u011fin, sonu\u00e7 alan\u0131na <code>role=\"status\"<\/code> ve <code>aria-live=\"polite\"<\/code> eklemek, ekran okuyucular\u0131n sonu\u00e7 de\u011fi\u015fti\u011finde kullan\u0131c\u0131y\u0131 bilgilendirmesini sa\u011flar.<\/p>\n<h2>Vanilla JS ile Hesaplay\u0131c\u0131 Mant\u0131\u011f\u0131<\/h2>\n<p>Hesaplay\u0131c\u0131n\u0131n kalbi, JavaScript ile yaz\u0131lan algoritmik mant\u0131kt\u0131r. Bu b\u00f6l\u00fcmde, kullan\u0131c\u0131 etkile\u015fiminden sonuca ula\u015fana kadar olan ad\u0131mlar\u0131 ve kod par\u00e7ac\u0131klar\u0131n\u0131 inceleyece\u011fiz.<\/p>\n<h3>DOM Manip\u00fclasyonu ve Olay Dinleyicileri<\/h3>\n<p>Kullan\u0131c\u0131 aray\u00fcz\u00fc ile etkile\u015fim kurmak i\u00e7in JavaScript'in DOM (Document Object Model) manip\u00fclasyon yeteneklerini kulland\u0131m. Form g\u00f6nderildi\u011finde tetiklenecek bir olay dinleyicisi ekledim:<\/p>\n<pre><code>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const flamesForm = document.getElementById('flamesForm');\n    const name1Input = document.getElementById('name1');\n    const name2Input = document.getElementById('name2');\n    const resultDiv = document.getElementById('result');\n\n    flamesForm.addEventListener('submit', (event) => {\n        event.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderimini engelle\n        const name1 = name1Input.value;\n        const name2 = name2Input.value;\n\n        if (name1 && name2) {\n            const outcome = calculateFlames(name1, name2);\n            resultDiv.innerHTML = <code><p>\u0130li\u015fki durumu: <strong>${outcome}<\/strong><\/p><\/code>;\n        } else {\n            resultDiv.innerHTML = <code><p class=\"error\">L\u00fctfen her iki ismi de girin.<\/p><\/code>;\n        }\n    });\n});\n<\/pre>\n<p><\/code><\/p>\n<h3>Karakter \u0130\u015fleme ve Tekrarlar\u0131 Giderme<\/h3>\n<p>FLAMES algoritmas\u0131n\u0131n ilk ad\u0131m\u0131, isimleri temizlemek ve ortak harfleri \u00e7\u0131karmakt\u0131r. Bu i\u015flem i\u00e7in a\u015fa\u011f\u0131daki gibi bir fonksiyon yazd\u0131m:<\/p>\n<pre><code>\nfunction getRemainingCharacters(name1, name2) {\n    let arr1 = name1.toLowerCase().replace(\/\\s\/g, '').split('');\n    let arr2 = name2.toLowerCase().replace(\/\\s\/g, '').split('');\n\n    \/\/ Ortak harfleri bul ve \u00e7\u0131kar\n    for (let i = 0; i < arr1.length; i++) {\n        const char = arr1[i];\n        const indexInArr2 = arr2.indexOf(char);\n        if (indexInArr2 !== -1) {\n            arr1.splice(i, 1);\n            arr2.splice(indexInArr2, 1);\n            i--; \/\/ Splice sonras\u0131 index kaymas\u0131n\u0131 d\u00fczelt\n        }\n    }\n    return arr1.length + arr2.length;\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>FLAMES Kelimesini Azaltma Algoritmas\u0131<\/h3>\n<p>Kalan harf say\u0131s\u0131n\u0131 bulduktan sonra, FLAMES kelimesini bu say\u0131ya g\u00f6re azaltma i\u015flemi yap\u0131l\u0131r. Bu, d\u00f6ng\u00fcsel bir eleme s\u00fcrecidir:<\/p>\n<pre><code>\nfunction calculateFlames(name1, name2) {\n    const totalCount = getRemainingCharacters(name1, name2);\n    if (totalCount === 0) return \"Belirlenemedi (isimler \u00e7ok benzer)\";\n\n    let flames = ['F', 'L', 'A', 'M', 'E', 'S'];\n    let currentIndex = 0;\n\n    while (flames.length > 1) {\n        \/\/ Eleme yap\u0131lacak harfin indeksini bul\n        currentIndex = (currentIndex + totalCount - 1) % flames.length;\n        flames.splice(currentIndex, 1); \/\/ Harfi listeden \u00e7\u0131kar\n    }\n\n    const finalLetter = flames[0];\n    const outcomes = {\n        'F': 'Arkada\u015fl\u0131k',\n        'L': 'A\u015fk',\n        'A': 'Sevgi',\n        'M': 'Evlilik',\n        'E': 'D\u00fc\u015fmanl\u0131k',\n        'S': 'Karde\u015flik'\n    };\n    return outcomes[finalLetter] || 'Bilinmeyen Sonu\u00e7';\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>Sonucu G\u00f6r\u00fcnt\u00fcleme<\/h3>\n<p>Hesaplama tamamland\u0131ktan sonra, elde edilen ili\u015fki durumunu kullan\u0131c\u0131ya okunabilir bir formatta g\u00f6stermek i\u00e7in DOM'u g\u00fcncelledim. Sonu\u00e7 div'i (<code>resultDiv<\/code>) i\u00e7ine dinamik olarak HTML ekledim.<\/p>\n<h2>Performans ve Kullan\u0131c\u0131 Deneyimi Optimizasyonu<\/h2>\n<p>SEO sadece anahtar kelimelerden ibaret de\u011fildir; ayn\u0131 zamanda web sitenizin performans\u0131 ve kullan\u0131c\u0131 deneyimi de arama motoru s\u0131ralamalar\u0131n\u0131 do\u011frudan etkiler. H\u0131zl\u0131 y\u00fcklenen, mobil uyumlu ve kullan\u0131m\u0131 kolay bir site, hem kullan\u0131c\u0131lar\u0131 hem de arama motorlar\u0131n\u0131 memnun eder.<\/p>\n<h3>Minimalist CSS ve JS<\/h3>\n<p>Vanilla JS kullanman\u0131n getirdi\u011fi hafiflik avantaj\u0131n\u0131 CSS taraf\u0131nda da s\u00fcrd\u00fcrd\u00fcm. Minimalist bir CSS dosyas\u0131, sadece gerekli stilleri i\u00e7erir ve gereksiz kod \u015fi\u015fkinli\u011fini \u00f6nler. JavaScript dosyalar\u0131n\u0131 da sadece gerekli fonksiyonlar\u0131 i\u00e7erecek \u015fekilde optimize ettim. Bu, sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n<h3>Asenkron Y\u00fckleme ve Gecikmeli Komut Dosyalar\u0131<\/h3>\n<p>JavaScript dosyalar\u0131n\u0131 HTML'in en alt\u0131na veya <code>async<\/code> \/ <code>defer<\/code> nitelikleriyle y\u00fcklemek, taray\u0131c\u0131n\u0131n HTML'i ayr\u0131\u015ft\u0131rmas\u0131n\u0131 ve i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fclemesini engellemez. Bu, \u00f6zellikle b\u00fcy\u00fck JavaScript dosyalar\u0131 i\u00e7in kritik bir performans optimizasyonudur. Benim k\u00fc\u00e7\u00fck projemde bile, JS dosyas\u0131n\u0131 <code><body><\/code> kapan\u0131\u015f etiketinden hemen \u00f6nce y\u00fckleyerek sayfa olu\u015fturma h\u0131z\u0131n\u0131 art\u0131rd\u0131m.<\/p>\n<pre><code>\n<!-- ... di\u011fer HTML i\u00e7eri\u011fi ... -->\n<script src=\"js\/main.js\" defer><\/script>\n<\/body>\n<\/pre>\n<p><\/code><\/p>\n<h3>Duyarl\u0131 Tasar\u0131m (Responsive Design)<\/h3>\n<p>Mobil cihazlardan gelen trafi\u011fin artmas\u0131yla birlikte, duyarl\u0131 tasar\u0131m bir zorunluluk haline gelmi\u015ftir. Web sitesinin farkl\u0131 ekran boyutlar\u0131na otomatik olarak uyum sa\u011flamas\u0131, mobil kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve arama motorlar\u0131n\u0131n mobil uyumluluk kriterlerini kar\u015f\u0131lar. Meta viewport etiketi ve CSS media query'leri bu konuda ana ara\u00e7lard\u0131r.<\/p>\n<pre><code>\n<!-- HTML head k\u0131sm\u0131nda -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<\/pre>\n<p><\/code><\/p>\n<h2>SEO Optimizasyon Stratejileri<\/h2>\n<p>Bir FLAMES hesaplay\u0131c\u0131s\u0131 gibi ni\u015f bir ara\u00e7 bile, do\u011fru SEO stratejileriyle daha fazla kullan\u0131c\u0131ya ula\u015fabilir. Bu b\u00f6l\u00fcmde, projemde uygulad\u0131\u011f\u0131m SEO tekniklerini ele alaca\u011f\u0131m.<\/p>\n<h3>Meta Etiketler ve A\u00e7\u0131klamalar<\/h3>\n<p>Meta etiketler, arama motorlar\u0131na sayfan\u0131z hakk\u0131nda \u00f6nemli bilgiler sa\u011flar. \u00d6zellikle <code><title><\/code> etiketi ve <code><meta name=\"description\"><\/code> etiketi, arama sonu\u00e7lar\u0131nda g\u00f6r\u00fcnen snippet'i olu\u015fturur ve t\u0131klama oran\u0131n\u0131 (CTR) etkiler.<\/p>\n<ul>\n<li><strong>Title Etiketi:<\/strong> Sayfan\u0131n ana konusunu yans\u0131tan, anahtar kelime i\u00e7eren ve 60-70 karakteri ge\u00e7meyen benzersiz bir ba\u015fl\u0131k. \u00d6rnek: \"FLAMES Hesaplay\u0131c\u0131 - \u0130simler Aras\u0131 \u0130li\u015fkiyi Bul | Vanilla JS\".<\/li>\n<li><strong>Meta Description:<\/strong> Sayfan\u0131n i\u00e7eri\u011fini \u00f6zetleyen, ilgi \u00e7ekici ve anahtar kelimeleri do\u011fal bir \u015fekilde bar\u0131nd\u0131ran 150-160 karakterlik bir a\u00e7\u0131klama. \u00d6rnek: \"\u0130ki isim aras\u0131ndaki a\u015fk, arkada\u015fl\u0131k, evlilik gibi ili\u015fki durumlar\u0131n\u0131 FLAMES oyunu ile ke\u015ffedin. Vanilla JS ile geli\u015ftirilmi\u015f h\u0131zl\u0131 ve SEO uyumlu hesaplay\u0131c\u0131.\"<\/li>\n<li><strong>Open Graph (OG) Etiketleri:<\/strong> Sosyal medyada payla\u015f\u0131l\u0131rken i\u00e7eri\u011fin nas\u0131l g\u00f6r\u00fcnece\u011fini belirler (<code>og:title<\/code>, <code>og:description<\/code>, <code>og:image<\/code> vb.).<\/li>\n<\/ul>\n<h3>URL Yap\u0131s\u0131 ve Dahili Ba\u011flant\u0131lar<\/h3>\n<p>Temiz, k\u0131sa ve a\u00e7\u0131klay\u0131c\u0131 URL'ler, hem kullan\u0131c\u0131lar hem de arama motorlar\u0131 i\u00e7in daha anla\u015f\u0131l\u0131rd\u0131r. \u00d6rne\u011fin, <code>\/flames-hesaplayici<\/code> gibi bir URL, <code>\/p?id=123<\/code> gibi bir URL'den \u00e7ok daha iyidir. Ayr\u0131ca, web sitenizdeki di\u011fer ilgili sayfalara dahili ba\u011flant\u0131lar vermek (\u00f6rne\u011fin, \"A\u015fk Hesaplay\u0131c\u0131\" veya \"Bur\u00e7 Uyumu\" gibi ba\u015fka ara\u00e7lar varsa), hem kullan\u0131c\u0131lar\u0131n sitenizde daha fazla gezinmesini sa\u011flar hem de arama motorlar\u0131n\u0131n sitenizin yap\u0131s\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h3>Yap\u0131land\u0131r\u0131lm\u0131\u015f Veri (Schema Markup)<\/h3>\n<p>Schema.org i\u015faretlemeleri, arama motorlar\u0131na i\u00e7eri\u011finizin ne hakk\u0131nda oldu\u011funu daha detayl\u0131 bir \u015fekilde anlat\u0131r. Bir hesaplay\u0131c\u0131 i\u00e7in <code><script type=\"application\/ld+json\"><\/code> i\u00e7inde <code>WebPage<\/code> veya <code>Calculator<\/code> gibi schema t\u00fcrlerini kullanabiliriz. Bu, arama sonu\u00e7lar\u0131nda zengin snippet'ler (rich snippets) olarak g\u00f6r\u00fcnme \u015fans\u0131n\u0131 art\u0131rabilir.<\/p>\n<pre><code>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"name\": \"FLAMES Hesaplay\u0131c\u0131\",\n  \"description\": \"\u0130ki isim aras\u0131ndaki ili\u015fkiyi FLAMES oyunu ile hesaplay\u0131n. A\u015fk, Arkada\u015fl\u0131k, Evlilik ve daha fazlas\u0131.\",\n  \"url\": \"https:\/\/www.example.com\/flames-hesaplayici\",\n  \"mainEntity\": {\n    \"@type\": \"SoftwareApplication\",\n    \"name\": \"FLAMES Hesaplay\u0131c\u0131\",\n    \"applicationCategory\": \"Tool\",\n    \"operatingSystem\": \"All\",\n    \"offers\": {\n      \"@type\": \"Offer\",\n      \"price\": \"0\",\n      \"priceCurrency\": \"USD\"\n    }\n  }\n}\n<\/script>\n<\/pre>\n<p><\/code><\/p>\n<h3>Site Haritas\u0131 ve Robots.txt<\/h3>\n<p>Bir <code>sitemap.xml<\/code> dosyas\u0131, arama motorlar\u0131na sitenizdeki t\u00fcm \u00f6nemli sayfalar\u0131 bildirir. K\u00fc\u00e7\u00fck bir proje i\u00e7in bile bir site haritas\u0131 olu\u015fturmak iyi bir uygulamad\u0131r. <code>robots.txt<\/code> dosyas\u0131 ise arama motoru botlar\u0131n\u0131n sitenizin hangi b\u00f6l\u00fcmlerini tarayabilece\u011fini veya tarayamayaca\u011f\u0131n\u0131 belirtir. Bu dosyalar, sitenizin arama motorlar\u0131 taraf\u0131ndan do\u011fru bir \u015fekilde ke\u015ffedilmesi ve indekslenmesi i\u00e7in temel ara\u00e7lard\u0131r.<\/p>\n<h2>Test ve Da\u011f\u0131t\u0131m<\/h2>\n<p>Geli\u015ftirme s\u00fcreci tamamland\u0131ktan sonra, uygulaman\u0131n farkl\u0131 ortamlarda do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak ve kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak i\u00e7in test ve da\u011f\u0131t\u0131m ad\u0131mlar\u0131 gelir.<\/p>\n<h3>Taray\u0131c\u0131 Uyumlulu\u011fu Testleri<\/h3>\n<p>Geli\u015ftirdi\u011finiz uygulaman\u0131n Chrome, Firefox, Safari ve Edge gibi farkl\u0131 taray\u0131c\u0131larda sorunsuz \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak \u00f6nemlidir. Vanilla JS genellikle iyi uyumluluk sunsa da, baz\u0131 modern \u00f6zelliklerin eski taray\u0131c\u0131larda desteklenmeme ihtimali vard\u0131r. Geli\u015ftirici ara\u00e7lar\u0131 ve cross-browser test ara\u00e7lar\u0131 bu s\u00fcre\u00e7te yard\u0131mc\u0131 olur.<\/p>\n<h3>Performans Analizi Ara\u00e7lar\u0131<\/h3>\n<p>Google Lighthouse ve PageSpeed Insights gibi ara\u00e7lar, web sitenizin performans\u0131, eri\u015filebilirli\u011fi, SEO'su ve en iyi uygulamalar\u0131 hakk\u0131nda detayl\u0131 raporlar sunar. Bu ara\u00e7lardan gelen geri bildirimleri kullanarak sitenizi daha da optimize edebilirsiniz. \u00d6zellikle Lighthouse puanlar\u0131, SEO performans\u0131 i\u00e7in \u00f6nemli bir g\u00f6stergedir.<\/p>\n<h3>Da\u011f\u0131t\u0131m ve Bar\u0131nd\u0131rma<\/h3>\n<p>Projenizi internete a\u00e7mak i\u00e7in basit bir web sunucusuna ihtiyac\u0131n\u0131z vard\u0131r. GitHub Pages, Netlify veya Vercel gibi platformlar, statik web siteleri i\u00e7in \u00fccretsiz ve kolay bar\u0131nd\u0131rma \u00e7\u00f6z\u00fcmleri sunar. Bu platformlar genellikle otomatik da\u011f\u0131t\u0131m (CI\/CD) entegrasyonlar\u0131 da sa\u011flar, bu da kodunuzu g\u00fcncelledi\u011finizde sitenizin otomatik olarak g\u00fcncellenmesi anlam\u0131na gelir.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede, Vanilla JavaScript kullanarak SEO uyumlu bir FLAMES hesaplay\u0131c\u0131s\u0131n\u0131 nas\u0131l geli\u015ftirdi\u011fimi ad\u0131m ad\u0131m anlatt\u0131m. Projenin temel mant\u0131\u011f\u0131ndan ba\u015flayarak, semantik HTML kullan\u0131m\u0131, eri\u015filebilirlik, performans optimizasyonlar\u0131 ve kapsaml\u0131 SEO stratejilerine kadar bir\u00e7ok konuya de\u011findim. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, k\u00fc\u00e7\u00fck bir proje bile do\u011fru yakla\u015f\u0131mlarla arama motorlar\u0131nda daha g\u00f6r\u00fcn\u00fcr ve kullan\u0131c\u0131lar i\u00e7in daha eri\u015filebilir hale getirilebilir. Unutmay\u0131n, iyi bir web sitesi sadece i\u015flevsel olmakla kalmaz, ayn\u0131 zamanda h\u0131zl\u0131, eri\u015filebilir ve arama motorlar\u0131 taraf\u0131ndan kolayca ke\u015ffedilebilir olmal\u0131d\u0131r.<\/p>\n<h2>SSS (S\u0131k Sorulan Sorular)<\/h2>\n<h3>FLAMES hesaplay\u0131c\u0131s\u0131 ne i\u015fe yarar?<\/h3>\n<p>FLAMES hesaplay\u0131c\u0131s\u0131, iki ki\u015finin isimleri aras\u0131ndaki potansiyel ili\u015fkiyi (Arkada\u015fl\u0131k, A\u015fk, Sevgi, Evlilik, D\u00fc\u015fmanl\u0131k, Karde\u015flik) basit bir algoritmaya dayal\u0131 olarak tahmin eden e\u011flenceli bir ara\u00e7t\u0131r. Genellikle gen\u00e7ler aras\u0131nda pop\u00fcler bir oyundur.<\/p>\n<h3>Neden bu projede bir framework (React, Vue vb.) kullanmad\u0131k?<\/h3>\n<p>Bu projede Vanilla JavaScript kullanmam\u0131z\u0131n ana nedenleri hafiflik, y\u00fcksek performans, ba\u011f\u0131ml\u0131l\u0131k olmamas\u0131 ve DOM \u00fczerinde tam kontrol sa\u011flamakt\u0131r. Bu fakt\u00f6rler, \u00f6zellikle SEO ve sayfa y\u00fckleme h\u0131z\u0131 a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. K\u00fc\u00e7\u00fck ve spesifik bir ara\u00e7 i\u00e7in framework'lerin getirdi\u011fi ek y\u00fckten ka\u00e7\u0131nmak istedik.<\/p>\n<h3>SEO optimizasyonu k\u00fc\u00e7\u00fck projeler i\u00e7in de \u00f6nemli mi?<\/h3>\n<p>Kesinlikle evet. Herhangi bir web projesi, kullan\u0131c\u0131lar taraf\u0131ndan bulunmak istiyorsa SEO optimizasyonuna ihtiya\u00e7 duyar. K\u00fc\u00e7\u00fck projelerde bile meta etiketler, semantik HTML, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve mobil uyumluluk gibi temel SEO prensiplerini uygulamak, arama motorlar\u0131nda daha iyi s\u0131ralama alman\u0131z\u0131 ve potansiyel kullan\u0131c\u0131lara ula\u015fman\u0131z\u0131 sa\u011flar.<\/p>\n<h3>Bu projeyi nas\u0131l daha da geli\u015ftirebilirim?<\/h3>\n<p>Projeyi geli\u015ftirmek i\u00e7in birka\u00e7 yol var:<\/p>\n<ul>\n<li><strong>Geli\u015fmi\u015f Stil ve Animasyonlar:<\/strong> Daha modern bir kullan\u0131c\u0131 aray\u00fcz\u00fc ve etkile\u015fimli animasyonlar ekleyebilirsiniz.<\/li>\n<li><strong>Daha Fazla Ara\u00e7:<\/strong> A\u015fk hesaplay\u0131c\u0131lar\u0131, bur\u00e7 uyumu gibi benzer ara\u00e7lar\u0131 entegre ederek sitenizin i\u00e7eri\u011fini zenginle\u015ftirebilirsiniz.<\/li>\n<li><strong>Kullan\u0131c\u0131 Geri Bildirimi:<\/strong> Kullan\u0131c\u0131lar\u0131n sonu\u00e7lar hakk\u0131nda yorum yapabilece\u011fi veya geri bildirim b\u0131rakabilece\u011fi bir b\u00f6l\u00fcm ekleyebilirsiniz.<\/li>\n<li><strong>Veritaban\u0131 Entegrasyonu:<\/strong> Sonu\u00e7lar\u0131 kaydetmek veya pop\u00fcler isim kombinasyonlar\u0131n\u0131 listelemek i\u00e7in basit bir backend (\u00f6rne\u011fin Node.js ile) entegre edebilirsiniz.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Herhangi bir yaz\u0131l\u0131m projesine ba\u015flarken, projenin amac\u0131n\u0131, temel gereksinimlerini ve kullan\u0131lacak teknolojileri netle\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. F&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37520","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?\" \/>\n<meta property=\"og:description\" content=\"Herhangi bir yaz\u0131l\u0131m projesine ba\u015flarken, projenin amac\u0131n\u0131, temel gereksinimlerini ve kullan\u0131lacak teknolojileri netle\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. F...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-07T10:30:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?\",\"datePublished\":\"2026-01-07T10:30:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\"},\"wordCount\":2229,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\",\"name\":\"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-07T10:30:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/","og_locale":"tr_TR","og_type":"article","og_title":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?","og_description":"Herhangi bir yaz\u0131l\u0131m projesine ba\u015flarken, projenin amac\u0131n\u0131, temel gereksinimlerini ve kullan\u0131lacak teknolojileri netle\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. F...","og_url":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-07T10:30:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?","datePublished":"2026-01-07T10:30:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/"},"wordCount":2229,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/","url":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/","name":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-07T10:30:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/seo-uyumlu-bir-flames-hesaplayiciyi-vanilla-js-ile-nasil-gelistirdim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SEO Uyumlu Bir FLAMES Hesaplay\u0131c\u0131y\u0131 Vanilla JS ile Nas\u0131l Geli\u015ftirdim?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37520"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37520\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}