LLM Only React bileşeni ile dinamik web içeriklerinizi yapay zeka botları için nasıl görünür hale getireceğinizi ve SEO performansınızı artıracağınızı keşfedin.

LLM Only React Bileşeni ile Yapay Zeka Botlarını Yönlendirin

Yapay zeka botları için LLM Only React bileşeni

Web sitelerini tasarlarken genellikle insanları merkeze alırız. Göz alıcı animasyonlar, etkileşimli kaydırıcılar, karuseller ve akordeon menüler ekleyerek kullanıcı deneyimini zenginleştiririz. Ancak yapay zeka tarayıcıları (AI crawlers) söz konusu olduğunda, bu dinamik öğelerin hiçbiri bir anlam ifade etmez.

Google bazen dinamik içeriklerinizi tarayabilir, ancak bu kesin bir garanti sunmaz. ChatGPT, Claude ve Perplexity gibi platformlar ise bu tür görsel arayüzlerle kesinlikle etkileşime giremez.

Fiyatlandırma kaydırıcınız insanlara kusursuz görünebilir. Ancak ChatGPT'nin tek gördüğü boş bir dikdörtgendir.

Yapay Zeka Tarayıcıları İçeriğinizi Neden Anlayamaz?

Bir web sitesini ziyaret ettiğinizde tarayıcınız perde arkasında yoğun bir mesai harcar. HTML'i indirir, JavaScript'i çalıştırır, API yanıtlarını bekler ve her şeyi ekranda görselleştirir. Siz de düğmelere tıklayabilir, kaydırıcıları sürükleyebilir veya daha fazla içerik görmek için akordeon menüleri genişletebilirsiniz.

Ancak yapay zeka botları bu şekilde çalışmaz. ChatGPT ve Perplexity gibi araçlar web sitenize basit bir HTTP isteği gönderir ve yalnızca geri dönen yalın HTML kodunu okur. JavaScript çalıştırmazlar, içeriğin yüklenmesini beklemezler ve hiçbir yere tıklamazlar.

Bu durum, ekranda görünmek için bir kullanıcı etkileşimi veya JavaScript gerektiren tüm içeriklerin yapay zeka tarayıcıları için tamamen görünmez olduğu anlamına gelir. Özenle hazırladığınız fiyatlandırma hesaplayıcınız, etkileşimli özellik karşılaştırma tablonuz veya genişletilebilir SSS bölümünüz yapay zekanın dünyasında maalesef var olmaz.

LLM Only Bileşeni ile Tanışın

LLM Only, tam da bu sorunu çözmek için geliştirilmiş açık kaynaklı bir React bileşenidir. İçeriklerinizi insan ziyaretçilerden gizlerken, yalnızca yapay zeka botlarına gösterebilmenize olanak tanır.

İçeriğinizi <LLMOnly> bileşeni içine yerleştirdiğinizde, bu veriler yalnızca sayfanızı bir yapay zeka tarayıcısı ziyaret ettiğinde oluşturulur. Normal web kullanıcıları bunu hiçbir zaman görmez. Bu sistem, HTML'in tarayıcıya gönderilmeden önce sunucuda oluşturulduğu Next.js gibi sunucu tarafı oluşturma (SSR) ortamlarında kusursuz çalışır.

Yapay Zeka Arama Görünürlüğü İçin Optimizasyon

Fiyatlandırma sayfanızı ele alalım. Kullanıcıların farklı fiyat seçeneklerini görmek için sürükleyebileceği etkileşimli bir kaydırıcınız olabilir. Kritik bilgiler bu etkileşimlerin arkasına gizlenmiştir ve yapay zeka botları bunları ortaya çıkarmak için tıklama veya sürükleme işlemi yapamaz.

ChatGPT kendi ürününüzün fiyatlandırmasını resmi web sitenizde bulamadığında, verileri başka kaynaklardan çeker. Bu kaynaklar bir rakip sitesi, güncelliğini yitirmiş bir blog yazısı veya markanız hakkında olumsuz yorumlar içeren bir forum sayfası olabilir. Aynı teknik sorun özellik karusellerini, dinamik ürün spesifikasyonlarını ve daraltılabilir SSS bölümlerini de etkiler.

LLM Only Nasıl Yardımcı Olur?

İnsanlar için tasarladığınız etkileşimli kullanıcı arayüzünü korumaya devam edersiniz. LLM Only ise botlar için bu arayüzün hemen yanına düz metin sürümünü eklemenizi sağlar.

Fiyatlandırma bileşeninizin yanına ekleyeceğiniz basit bir <LLMOnly> etiketi ile tüm fiyat ve özellik verilerini sistemli bir metin olarak tanımlayabilirsiniz. Ziyaretçileriniz alıştıkları dinamik kaydırıcıyı kullanmaya devam ederken, ChatGPT veya Claude sayfanızı taradığında tüm fiyatlandırma bilgilerinin açıkça düzenlendiği bu gizli metin versiyonunu saniyeler içinde okur.

Sistem Nasıl Çalışır?

Birisi web sitenizi her ziyaret ettiğinde, tarayıcısı isteği hangi yazılımın yaptığını tanımlayan bir "kullanıcı aracısı" (user agent) kimliği gönderir. Normal tarayıcılar Mozilla/5.0 Chrome/120 gibi bilgiler iletirken, yapay zeka tarayıcıları GPTBot veya ClaudeBot gibi kendi özel tanımlayıcılarını kullanır.

Sisteme entegre ettiğiniz <LLMOnly> bileşeni, bu kullanıcı aracısı kimliğini 30'dan fazla bilinen yapay zeka botu imzasından oluşan bir listeyle karşılaştırır. İstek bir yapay zeka tarayıcısından geliyorsa içerik normal şekilde oluşturulur, standart bir tarayıcıdan geliyorsa tamamen gizlenir.

Kurulum ve Kullanım Süreci

Sistemi projenize dahil etmek için npm üzerinden llm-only paketini yüklemeniz yeterlidir: npm install llm-only

Ardından Next.js uygulamanızda next/headers üzerinden kullanıcı aracısı verisini çekerek <LLMOnly userAgent={userAgent}> formatında kullanabilirsiniz. Eğer içeriği bir bileşen içine sarmak yerine koşullu bir mantık kurgulamak isterseniz, paket içindeki isLLM() yardımcı fonksiyonunu kullanabilirsiniz. Bu fonksiyon, gelen isteğin bir bota ait olup olmadığını kontrol ederek true veya false değeri döndürür.

Geliştirme aşamasında içeriğinizin doğru çalışıp çalışmadığını test etmek için, komut satırından cURL kullanarak kendinizi bir yapay zeka tarayıcısı gibi gösterebilirsiniz. Kullanıcı aracısı bilginizi GPTBot/1.0 olarak değiştirip sitenize istek attığınızda, gizli metinlerinizin sunucu yanıtında yer aldığını doğrudan görebilirsiniz.

Bu Bir Gizli Metin (Cloaking) İhlali mi?

Kesinlikle hayır. Google spam politikaları, gizli metin (cloaking) kavramını arama motorlarını aldatmak amacıyla farklı içerikler göstermek olarak tanımlar.

LLM Only kimseyi aldatmaz; aksine mevcut içeriğinizi tamamlar ve erişilebilir kılar. İnsanlara sunduğunuz bilginin birebir aynısını, sadece yapay zekanın ayrıştırabileceği formatta sağlarsınız. İnsan versiyonu ile bot versiyonu temel olarak tamamen aynı şeyi söyler. Aralarındaki tek fark; birinin etkileşimli, diğerinin ise düz metin olmasıdır.