SEO Uyumlu Bir FLAMES Hesaplayıcıyı Vanilla JS ile Nasıl Geliştirdim?

Bu makalede, popüler bir eğlence oyunu olan FLAMES hesaplayıcısını Vanilla JavaScript kullanarak nasıl geliştirdiğimi ve bu süreçte web sitenizin arama motorlarında daha iyi sıralanmasını sağlayacak SEO stratejilerini nasıl uyguladığımı detaylı bir şekilde anlatacağım. Sıfırdan bir proje oluştururken sadece işlevselliğe odaklanmak yerine, kullanıcı deneyimini ve arama motoru görünürlüğünü en baştan düşünmenin ne kadar önemli olduğunu göreceğiz.

Projenin Temelleri ve FLAMES Mantığı

Herhangi bir yazılım projesine başlarken, projenin amacını, temel gereksinimlerini ve kullanılacak teknolojileri netleştirmek büyük önem taşır. FLAMES hesaplayıcısı projesi de bu adımlarla başladı.

FLAMES Oyunu Nedir?

FLAMES, iki kişinin isimleri arasındaki ilişkiyi tahmin etmek için kullanılan eğlenceli ve basit bir oyundur. “FLAMES” kelimesi, Friendship (Arkadaşlık), Love (Aşk), Affection (Sevgi), Marriage (Evlilik), Enemy (Düşman) ve Siblings (Kardeşlik) kelimelerinin baş harflerinden oluşur. Oyunun temel mantığı, iki isimdeki ortak harfleri çıkarıp kalan harflerin sayısına göre FLAMES kelimesinin harflerini eleyerek sonuca ulaşmaktır.

Neden Vanilla JS?

Günümüzde birçok güçlü JavaScript framework’ü (React, Vue, Angular vb.) bulunsa da, bu proje için Vanilla JS’i tercih ettim. Bunun birkaç önemli nedeni var:

Hafiflik ve Performans: Harici kütüphanelere bağımlı olmamak, sayfa yükleme hızını artırır ve gereksiz kod şişkinliğini önler. Bu, özellikle SEO için kritik bir faktördür.
Tam Kontrol: Vanilla JS, DOM üzerinde tam kontrol sağlar. Bu sayede, arama motorlarının içeriği doğru bir şekilde indekslemesini sağlayacak semantik ve erişilebilir HTML yapısını daha kolay oluşturabiliriz.
Öğrenme ve Anlama: Temel JavaScript prensiplerini pekiştirmek ve derinlemesine anlamak için harika bir yoldur.

Temel Algoritma ve Adımlar

FLAMES hesaplayıcısının algoritması şu adımlardan oluşur:

Kullanıcıdan iki isim alınır.
Her iki isimdeki boşluklar kaldırılır ve harfler küçük harfe dönüştürülür.
İki isimdeki ortak harfler bulunur ve her iki isimden de bu ortak harfler çıkarılır.
Geriye kalan harflerin toplam sayısı bulunur (örneğin, “Ahmet” ve “Ayşe” için ‘h’, ‘m’, ‘t’, ‘y’, ‘ş’ harfleri kalır, toplam 5 harf).
Bu sayı, FLAMES kelimesinin harflerini elemek için kullanılır. Örneğin, sayı 5 ise, FLAMES kelimesinin 5. harfi (E) silinir ve kelime “FLAMS” olur. Bu işlem, FLAMES kelimesinden geriye tek bir harf kalana kadar tekrarlanır.
Kalan harf, ilişki türünü (F, L, A, M, E, S) temsil eder.

Semantik HTML ve Erişilebilirlik

SEO’nun temel taşlarından biri, arama motorlarının ve ekran okuyucuların web sayfanızın içeriğini kolayca anlayabileceği, iyi yapılandırılmış ve semantik HTML kullanmaktır. Bu, sadece arama motorları için değil, aynı zamanda tüm kullanıcılar için daha iyi bir deneyim sunar.

Anlamlı Yapılandırma

HTML etiketlerini doğru amaçlar için kullanmak, sayfanızın yapısını arama motorlarına açıkça belirtir. Örneğin, ana içeriği

etiketi içine almak, başlıkları

ile işaretlemek (

etiketi ana sayfa başlığı için ayrılmalı ve bir sayfada bir kez kullanılmalı), paragrafları

ile, listeleri

veya

ile belirtmek önemlidir. FLAMES hesaplayıcısı için aşağıdaki gibi bir yapı kullandım:



    
        FLAMES Hesaplayıcı
        İki isim arasındaki ilişkiyi öğrenin!
        
            
                İlk İsim:
                
            
            
                İkinci İsim:

Form Elemanları ve Etiketler

Form elemanları (, ) ve onlarla ilişkili etiketleri, hem kullanıcı deneyimi hem de erişilebilirlik açısından kritik öneme sahiptir. etiketini for niteliği ile ilgili elemanına bağlamak, ekran okuyucuların hangi etiketin hangi giriş alanına ait olduğunu anlamasını sağlar.

ARIA Nitelikleri ve Erişilebilirlik

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) nitelikleri, standart HTML ile ifade edilemeyen semantik bilgileri sağlamak için kullanılır. Özellikle dinamik içerik güncellemelerinde veya özel UI bileşenlerinde ARIA kullanımı önemlidir. Örneğin, sonuç alanına role="status" ve aria-live="polite" eklemek, ekran okuyucuların sonuç değiştiğinde kullanıcıyı bilgilendirmesini sağlar.

Vanilla JS ile Hesaplayıcı Mantığı

Hesaplayıcının kalbi, JavaScript ile yazılan algoritmik mantıktır. Bu bölümde, kullanıcı etkileşiminden sonuca ulaşana kadar olan adımları ve kod parçacıklarını inceleyeceğiz.

DOM Manipülasyonu ve Olay Dinleyicileri

Kullanıcı arayüzü ile etkileşim kurmak için JavaScript'in DOM (Document Object Model) manipülasyon yeteneklerini kullandım. Form gönderildiğinde tetiklenecek bir olay dinleyicisi ekledim:


document.addEventListener('DOMContentLoaded', () => {
    const flamesForm = document.getElementById('flamesForm');
    const name1Input = document.getElementById('name1');
    const name2Input = document.getElementById('name2');
    const resultDiv = document.getElementById('result');

    flamesForm.addEventListener('submit', (event) => {
        event.preventDefault(); // Formun varsayılan gönderimini engelle
        const name1 = name1Input.value;
        const name2 = name2Input.value;

        if (name1 && name2) {
            const outcome = calculateFlames(name1, name2);
            resultDiv.innerHTML = İlişki durumu: ${outcome};
        } else {
            resultDiv.innerHTML = Lütfen her iki ismi de girin.;
        }
    });
});

Karakter İşleme ve Tekrarları Giderme

FLAMES algoritmasının ilk adımı, isimleri temizlemek ve ortak harfleri çıkarmaktır. Bu işlem için aşağıdaki gibi bir fonksiyon yazdım:


function getRemainingCharacters(name1, name2) {
    let arr1 = name1.toLowerCase().replace(/\s/g, '').split('');
    let arr2 = name2.toLowerCase().replace(/\s/g, '').split('');

    // Ortak harfleri bul ve çıkar
    for (let i = 0; i < arr1.length; i++) {
        const char = arr1[i];
        const indexInArr2 = arr2.indexOf(char);
        if (indexInArr2 !== -1) {
            arr1.splice(i, 1);
            arr2.splice(indexInArr2, 1);
            i--; // Splice sonrası index kaymasını düzelt
        }
    }
    return arr1.length + arr2.length;
}

FLAMES Kelimesini Azaltma Algoritması

Kalan harf sayısını bulduktan sonra, FLAMES kelimesini bu sayıya göre azaltma işlemi yapılır. Bu, döngüsel bir eleme sürecidir:


function calculateFlames(name1, name2) {
    const totalCount = getRemainingCharacters(name1, name2);
    if (totalCount === 0) return "Belirlenemedi (isimler çok benzer)";

    let flames = ['F', 'L', 'A', 'M', 'E', 'S'];
    let currentIndex = 0;

    while (flames.length > 1) {
        // Eleme yapılacak harfin indeksini bul
        currentIndex = (currentIndex + totalCount - 1) % flames.length;
        flames.splice(currentIndex, 1); // Harfi listeden çıkar
    }

    const finalLetter = flames[0];
    const outcomes = {
        'F': 'Arkadaşlık',
        'L': 'Aşk',
        'A': 'Sevgi',
        'M': 'Evlilik',
        'E': 'Düşmanlık',
        'S': 'Kardeşlik'
    };
    return outcomes[finalLetter] || 'Bilinmeyen Sonuç';
}

Sonucu Görüntüleme

Hesaplama tamamlandıktan sonra, elde edilen ilişki durumunu kullanıcıya okunabilir bir formatta göstermek için DOM'u güncelledim. Sonuç div'i (resultDiv) içine dinamik olarak HTML ekledim.

Performans ve Kullanıcı Deneyimi Optimizasyonu

SEO sadece anahtar kelimelerden ibaret değildir; aynı zamanda web sitenizin performansı ve kullanıcı deneyimi de arama motoru sıralamalarını doğrudan etkiler. Hızlı yüklenen, mobil uyumlu ve kullanımı kolay bir site, hem kullanıcıları hem de arama motorlarını memnun eder.

Minimalist CSS ve JS

Vanilla JS kullanmanın getirdiği hafiflik avantajını CSS tarafında da sürdürdüm. Minimalist bir CSS dosyası, sadece gerekli stilleri içerir ve gereksiz kod şişkinliğini önler. JavaScript dosyalarını da sadece gerekli fonksiyonları içerecek şekilde optimize ettim. Bu, sayfa yükleme sürelerini önemli ölçüde azaltır.

Asenkron Yükleme ve Gecikmeli Komut Dosyaları

JavaScript dosyalarını HTML'in en altına veya async / defer nitelikleriyle yüklemek, tarayıcının HTML'i ayrıştırmasını ve içeriği görüntülemesini engellemez. Bu, özellikle büyük JavaScript dosyaları için kritik bir performans optimizasyonudur. Benim küçük projemde bile, JS dosyasını kapanış etiketinden hemen önce yükleyerek sayfa oluşturma hızını artırdım.

Duyarlı Tasarım (Responsive Design)

Mobil cihazlardan gelen trafiğin artmasıyla birlikte, duyarlı tasarım bir zorunluluk haline gelmiştir. Web sitesinin farklı ekran boyutlarına otomatik olarak uyum sağlaması, mobil kullanıcı deneyimini iyileştirir ve arama motorlarının mobil uyumluluk kriterlerini karşılar. Meta viewport etiketi ve CSS media query'leri bu konuda ana araçlardır.

SEO Optimizasyon Stratejileri

Bir FLAMES hesaplayıcısı gibi niş bir araç bile, doğru SEO stratejileriyle daha fazla kullanıcıya ulaşabilir. Bu bölümde, projemde uyguladığım SEO tekniklerini ele alacağım.

Meta Etiketler ve Açıklamalar

Meta etiketler, arama motorlarına sayfanız hakkında önemli bilgiler sağlar. Özellikle etiketi ve etiketi, arama sonuçlarında görünen snippet'i oluşturur ve tıklama oranını (CTR) etkiler.

Title Etiketi: Sayfanın ana konusunu yansıtan, anahtar kelime içeren ve 60-70 karakteri geçmeyen benzersiz bir başlık. Örnek: "FLAMES Hesaplayıcı - İsimler Arası İlişkiyi Bul | Vanilla JS".
Meta Description: Sayfanın içeriğini özetleyen, ilgi çekici ve anahtar kelimeleri doğal bir şekilde barındıran 150-160 karakterlik bir açıklama. Örnek: "İki isim arasındaki aşk, arkadaşlık, evlilik gibi ilişki durumlarını FLAMES oyunu ile keşfedin. Vanilla JS ile geliştirilmiş hızlı ve SEO uyumlu hesaplayıcı."
Open Graph (OG) Etiketleri: Sosyal medyada paylaşılırken içeriğin nasıl görüneceğini belirler (og:title, og:description, og:image vb.).

URL Yapısı ve Dahili Bağlantılar

Temiz, kısa ve açıklayıcı URL'ler, hem kullanıcılar hem de arama motorları için daha anlaşılırdır. Örneğin, /flames-hesaplayici gibi bir URL, /p?id=123 gibi bir URL'den çok daha iyidir. Ayrıca, web sitenizdeki diğer ilgili sayfalara dahili bağlantılar vermek (örneğin, "Aşk Hesaplayıcı" veya "Burç Uyumu" gibi başka araçlar varsa), hem kullanıcıların sitenizde daha fazla gezinmesini sağlar hem de arama motorlarının sitenizin yapısını anlamasına yardımcı olur.

Yapılandırılmış Veri (Schema Markup)

Schema.org işaretlemeleri, arama motorlarına içeriğinizin ne hakkında olduğunu daha detaylı bir şekilde anlatır. Bir hesaplayıcı için içinde WebPage veya Calculator gibi schema türlerini kullanabiliriz. Bu, arama sonuçlarında zengin snippet'ler (rich snippets) olarak görünme şansını artırabilir.

Site Haritası ve Robots.txt

Bir sitemap.xml dosyası, arama motorlarına sitenizdeki tüm önemli sayfaları bildirir. Küçük bir proje için bile bir site haritası oluşturmak iyi bir uygulamadır. robots.txt dosyası ise arama motoru botlarının sitenizin hangi bölümlerini tarayabileceğini veya tarayamayacağını belirtir. Bu dosyalar, sitenizin arama motorları tarafından doğru bir şekilde keşfedilmesi ve indekslenmesi için temel araçlardır.

Test ve Dağıtım

Geliştirme süreci tamamlandıktan sonra, uygulamanın farklı ortamlarda doğru çalıştığından emin olmak ve kullanıcıların erişimine sunmak için test ve dağıtım adımları gelir.

Tarayıcı Uyumluluğu Testleri

Geliştirdiğiniz uygulamanın Chrome, Firefox, Safari ve Edge gibi farklı tarayıcılarda sorunsuz çalıştığından emin olmak önemlidir. Vanilla JS genellikle iyi uyumluluk sunsa da, bazı modern özelliklerin eski tarayıcılarda desteklenmeme ihtimali vardır. Geliştirici araçları ve cross-browser test araçları bu süreçte yardımcı olur.

Performans Analizi Araçları

Google Lighthouse ve PageSpeed Insights gibi araçlar, web sitenizin performansı, erişilebilirliği, SEO'su ve en iyi uygulamaları hakkında detaylı raporlar sunar. Bu araçlardan gelen geri bildirimleri kullanarak sitenizi daha da optimize edebilirsiniz. Özellikle Lighthouse puanları, SEO performansı için önemli bir göstergedir.

Dağıtım ve Barındırma

Projenizi internete açmak için basit bir web sunucusuna ihtiyacınız vardır. GitHub Pages, Netlify veya Vercel gibi platformlar, statik web siteleri için ücretsiz ve kolay barındırma çözümleri sunar. Bu platformlar genellikle otomatik dağıtım (CI/CD) entegrasyonları da sağlar, bu da kodunuzu güncellediğinizde sitenizin otomatik olarak güncellenmesi anlamına gelir.

Sonuç

Bu makalede, Vanilla JavaScript kullanarak SEO uyumlu bir FLAMES hesaplayıcısını nasıl geliştirdiğimi adım adım anlattım. Projenin temel mantığından başlayarak, semantik HTML kullanımı, erişilebilirlik, performans optimizasyonları ve kapsamlı SEO stratejilerine kadar birçok konuya değindim. Gördüğünüz gibi, küçük bir proje bile doğru yaklaşımlarla arama motorlarında daha görünür ve kullanıcılar için daha erişilebilir hale getirilebilir. Unutmayın, iyi bir web sitesi sadece işlevsel olmakla kalmaz, aynı zamanda hızlı, erişilebilir ve arama motorları tarafından kolayca keşfedilebilir olmalıdır.

SSS (Sık Sorulan Sorular)

FLAMES hesaplayıcısı ne işe yarar?

FLAMES hesaplayıcısı, iki kişinin isimleri arasındaki potansiyel ilişkiyi (Arkadaşlık, Aşk, Sevgi, Evlilik, Düşmanlık, Kardeşlik) basit bir algoritmaya dayalı olarak tahmin eden eğlenceli bir araçtır. Genellikle gençler arasında popüler bir oyundur.

Neden bu projede bir framework (React, Vue vb.) kullanmadık?

Bu projede Vanilla JavaScript kullanmamızın ana nedenleri hafiflik, yüksek performans, bağımlılık olmaması ve DOM üzerinde tam kontrol sağlamaktır. Bu faktörler, özellikle SEO ve sayfa yükleme hızı açısından kritik öneme sahiptir. Küçük ve spesifik bir araç için framework'lerin getirdiği ek yükten kaçınmak istedik.

SEO optimizasyonu küçük projeler için de önemli mi?

Kesinlikle evet. Herhangi bir web projesi, kullanıcılar tarafından bulunmak istiyorsa SEO optimizasyonuna ihtiyaç duyar. Küçük projelerde bile meta etiketler, semantik HTML, hızlı yükleme süreleri ve mobil uyumluluk gibi temel SEO prensiplerini uygulamak, arama motorlarında daha iyi sıralama almanızı ve potansiyel kullanıcılara ulaşmanızı sağlar.

Bu projeyi nasıl daha da geliştirebilirim?

Projeyi geliştirmek için birkaç yol var:

Gelişmiş Stil ve Animasyonlar: Daha modern bir kullanıcı arayüzü ve etkileşimli animasyonlar ekleyebilirsiniz.
Daha Fazla Araç: Aşk hesaplayıcıları, burç uyumu gibi benzer araçları entegre ederek sitenizin içeriğini zenginleştirebilirsiniz.
Kullanıcı Geri Bildirimi: Kullanıcıların sonuçlar hakkında yorum yapabileceği veya geri bildirim bırakabileceği bir bölüm ekleyebilirsiniz.
Veritabanı Entegrasyonu: Sonuçları kaydetmek veya popüler isim kombinasyonlarını listelemek için basit bir backend (örneğin Node.js ile) entegre edebilirsiniz.

SEO Uyumlu Bir FLAMES Hesaplayıcıyı Vanilla JS ile Nasıl Geliştirdim?