WooCommerce Ürün Ana Resmine Otomatik Title Tag Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde SEO, sadece meta etiketler ve içerik optimizasyonundan ibaret değil. Görseller de bu denklemin kritik bir parçası. Özellikle WooCommerce mağazalarında ürün ana resimlerinin title attribute’u çoğu zaman boş bırakılıyor ya da anlamsız dosya adlarıyla doluyor. Bu durum hem erişilebilirlik açısından hem de arama motoru optimizasyonu açısından ciddi bir kayıp.

Bu yazıda, WooCommerce ürün ana resmine otomatik olarak ürün adını title tag olarak nasıl tanımlayacağımızı, bunu functions.php üzerinden nasıl yöneteceğimizi ve farklı senaryolarda nasıl uyarlayabileceğimizi adım adım ele alacağız.

Neden Önemli?

Bir görselin title attribute’u, kullanıcı o görselin üzerine fare ile geldiğinde browser tarafından tooltip olarak gösterilen metindir. alt attribute’undan farklı olarak title, erişilebilirlik araçları tarafından zorunlu kabul edilmez ama yine de önemli bir metadata parçasıdır.

WooCommerce, ürün resimlerini WordPress media kütüphanesinden çeker. Eğer bir görsele medya kütüphanesinde title bilgisi girilmemişse, tag’inde title attribute’u ya hiç çıkmaz ya da dosya adından türetilmiş anlamsız bir string görünür. Örneğin product-image-1024x768.jpg gibi bir şey.

Peki gerçek dünyada bu neden sorun?

  • SEO: Arama motorları görsellerdeki title attribute’unu tarar. Anlamlı bir title, görsel aramalarında sıralamayı etkiler.
  • Kullanıcı deneyimi: Hover tooltip olarak ürün adının gösterilmesi, kullanıcıya ek bir bağlam sağlar.
  • Erişilebilirlik: Screen reader kullanan bazı kullanıcılar title attribute’undan da faydalanır.
  • Toplu ürün yönetimi: Binlerce üründe tek tek media kütüphanesine gidip title doldurmak mümkün değil. Programatik çözüm şart.

Temel Yaklaşım: WooCommerce Hook Sistemi

WooCommerce, ürün resimlerini render ederken çeşitli filtreler sunar. Bunların başında woocommerce_product_get_image filtresi gelir. Ancak bu filtre, HTML çıktısının tamamını döndürür; yani tag’inin kendisini. Bunu manipüle etmek için ya regex kullanmak gerekir ya da daha alt seviyede müdahale etmek.

Daha temiz bir yaklaşım ise wp_get_attachment_image_attributes filtresini kullanmaktır. Bu filtre, WordPress’in herhangi bir görsel oluştururken kullandığı attributes dizisini filtreler. Hem WooCommerce ürün resimleri hem de genel WordPress görselleri bu filtreden geçer.

// Temel kullanim - TUM gorseller icin title attribute ekle
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( empty( $attr['title'] ) ) {
        $attr['title'] = get_the_title( $attachment->ID );
    }
    return $attr;
}, 10, 3 );

Bu kod tüm görseller için çalışır. Ama biz sadece WooCommerce ürün ana resimlerini hedeflemek istiyoruz. O zaman biraz daha spesifik olmalıyız.

Sadece Ürün Ana Resmine Odaklanmak

WooCommerce ürün sayfasında, ana resim woocommerce_before_single_product_summary action’ı içinde render edilir ve woocommerce_show_product_images() fonksiyonu tarafından çağrılır. Bize gereken, bu render sürecinde devreye giren bir filtre.

// Sadece WooCommerce urun ana resminde calis
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    // Sadece WooCommerce single product sayfasinda calis
    if ( ! is_product() ) {
        return $attr;
    }
    
    global $product;
    
    if ( ! $product instanceof WC_Product ) {
        return $attr;
    }
    
    // Ana resim ID'sini al
    $featured_image_id = $product->get_image_id();
    
    // Eger bu gorsel urunun ana resmiyse title'i urun adiyla doldur
    if ( (int) $attachment->ID === (int) $featured_image_id ) {
        $attr['title'] = $product->get_name();
    }
    
    return $attr;
    
}, 10, 3 );

Bu yaklaşımla, yalnızca tekil ürün sayfasında ve yalnızca ana ürün resmi için title attribute’unu ürün adıyla dolduruyoruz. Galerili resimler, küçük resimler ve diğer sayfalar etkilenmiyor.

Galeri Resimlerini de Dahil Etmek

Bazı durumlarda sadece ana resim değil, ürün galeri resimlerinin de title attribute’una ihtiyaç duyabilirsiniz. WooCommerce ürün galerisi için de aynı mantığı genişletebiliriz.

// Ana resim VE galeri resimleri icin title ekle
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    if ( ! is_product() ) {
        return $attr;
    }
    
    global $product;
    
    if ( ! $product instanceof WC_Product ) {
        return $attr;
    }
    
    $featured_image_id  = (int) $product->get_image_id();
    $gallery_image_ids  = array_map( 'intval', $product->get_gallery_image_ids() );
    $all_product_images = array_merge( [ $featured_image_id ], $gallery_image_ids );
    
    if ( in_array( (int) $attachment->ID, $all_product_images, true ) ) {
        // Ana resim icin urun adi, galeri resimleri icin "Urun Adi - N" formatinda
        if ( (int) $attachment->ID === $featured_image_id ) {
            $attr['title'] = $product->get_name();
        } else {
            $gallery_index = array_search( (int) $attachment->ID, $gallery_image_ids, true );
            $attr['title'] = $product->get_name() . ' - ' . ( $gallery_index + 2 );
        }
    }
    
    return $attr;
    
}, 10, 3 );

Burada galeri resimlerine numara ekliyoruz: “Nike Air Max – 2”, “Nike Air Max – 3” gibi. Bu format hem kullanıcı için anlamlı hem de SEO açısından tekrar içerik oluşturmadan benzersiz title değerleri üretiyor.

Arşiv ve Kategori Sayfaları İçin Uyarlama

Ürün detay sayfası tek senaryo değil. WooCommerce mağaza sayfası, kategori sayfaları ve arama sonuçlarında da ürün resimleri görünür. Bu sayfalardaki ürün resimlerine de uygun title attribute’u eklemek isteyebilirsiniz.

// Magazin, kategori ve arsiv sayfalarindaki urun resimleri icin
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    // WooCommerce arsiv sayfalarinda calis
    if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_product() ) {
        return $attr;
    }
    
    // Gorsel zaten title'a sahipse dokunma
    if ( ! empty( $attr['title'] ) ) {
        return $attr;
    }
    
    // Bu attachment bir urun ana resmi mi diye kontrol et
    $args = [
        'post_type'  => 'product',
        'meta_query' => [
            [
                'key'   => '_thumbnail_id',
                'value' => $attachment->ID,
            ],
        ],
        'posts_per_page' => 1,
        'fields'         => 'ids',
    ];
    
    $products = get_posts( $args );
    
    if ( ! empty( $products ) ) {
        $product = wc_get_product( $products[0] );
        if ( $product ) {
            $attr['title'] = $product->get_name();
        }
    }
    
    return $attr;
    
}, 10, 3 );

Dikkat: Bu yaklaşım her görsel render işleminde bir veritabanı sorgusu çalıştırır. Yoğun trafik alan sitelerde bu performans sorununa yol açabilir. Bu yüzden bu kodu doğrudan üretimde kullanmak yerine aşağıdaki önbellekleme yaklaşımıyla birleştirmenizi tavsiye ederim.

Performans Optimizasyonu: Transient ile Önbellekleme

Arşiv sayfalarında her sayfa yüklemesinde veritabanı sorgularını minimize etmek için WordPress transient API’sini kullanalım.

// Performans optimizasyonlu versiyon - transient cache ile
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_product() ) {
        return $attr;
    }
    
    if ( ! empty( $attr['title'] ) ) {
        return $attr;
    }
    
    $cache_key      = 'wc_img_title_' . $attachment->ID;
    $product_title  = get_transient( $cache_key );
    
    if ( false === $product_title ) {
        
        $args = [
            'post_type'      => 'product',
            'meta_query'     => [
                [
                    'key'   => '_thumbnail_id',
                    'value' => $attachment->ID,
                ],
            ],
            'posts_per_page' => 1,
            'fields'         => 'ids',
        ];
        
        $products = get_posts( $args );
        
        if ( ! empty( $products ) ) {
            $product = wc_get_product( $products[0] );
            $product_title = $product ? $product->get_name() : '';
        } else {
            $product_title = '';
        }
        
        // 24 saat cache'le
        set_transient( $cache_key, $product_title, DAY_IN_SECONDS );
    }
    
    if ( ! empty( $product_title ) ) {
        $attr['title'] = $product_title;
    }
    
    return $attr;
    
}, 10, 3 );

Bu versiyon, aynı görselin birden fazla yüklendiği durumlarda (örneğin sayfalama ile aynı ürün farklı sayfalarda çıkıyorsa) veritabanı sorgusunu tekrarlamaz. Transient 24 saat geçerli kalır ve ürün adı değiştiğinde otomatik olarak güncellenmez. Bunun için aşağıdaki temizleme fonksiyonunu da ekleyin.

// Urun guncellendikten sonra ilgili transient'i temizle
add_action( 'woocommerce_update_product', function( $product_id ) {
    
    $product           = wc_get_product( $product_id );
    $featured_image_id = $product->get_image_id();
    $gallery_ids       = $product->get_gallery_image_ids();
    $all_ids           = array_merge( [ $featured_image_id ], $gallery_ids );
    
    foreach ( $all_ids as $image_id ) {
        if ( $image_id ) {
            delete_transient( 'wc_img_title_' . $image_id );
        }
    }
    
}, 10, 1 );

Bu iki kod parçası birlikte çalıştığında, ürün adı her değiştirildiğinde cache otomatik olarak temizlenir ve bir sonraki sayfa yüklemesinde güncel bilgi çekilir.

Alt Attribute ile Senkronize Etmek

Gerçek dünya projelerinde sıklıkla karşılaştığım bir senaryo: alt ve title attribute’larının farklı değer taşıması gerektiği durumlar. WooCommerce varsayılan olarak alt attribute’una görsel başlığını ya da ürün adını yerleştirir, ancak bunu özelleştirmek isteyebilirsiniz. İşte hem alt hem title üzerinde tam kontrol sağlayan bir yaklaşım.

// Hem alt hem title attribute'unu tam kontrol altina al
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    if ( ! is_product() ) {
        return $attr;
    }
    
    global $product;
    
    if ( ! $product instanceof WC_Product ) {
        return $attr;
    }
    
    $featured_image_id = (int) $product->get_image_id();
    
    if ( (int) $attachment->ID !== $featured_image_id ) {
        return $attr;
    }
    
    $product_name     = $product->get_name();
    $product_sku      = $product->get_sku();
    $product_category = '';
    
    // Ilk kategori adini al
    $terms = get_the_terms( $product->get_id(), 'product_cat' );
    if ( ! is_wp_error( $terms ) && ! empty( $terms ) ) {
        $product_category = $terms[0]->name;
    }
    
    // Title: urun adi
    $attr['title'] = $product_name;
    
    // Alt: daha aciklayici format
    if ( ! empty( $product_category ) ) {
        $attr['alt'] = $product_name . ' - ' . $product_category;
    } else {
        $attr['alt'] = $product_name;
    }
    
    // SKU varsa title'a ekle
    if ( ! empty( $product_sku ) ) {
        $attr['title'] = $product_name . ' (' . $product_sku . ')';
    }
    
    return $attr;
    
}, 10, 3 );

Bu yaklaşım özellikle teknik ürünler satan mağazalarda çok işe yarıyor. Bir elektronik mağazasında title attribute’unda SKU numarasının görünmesi, hem kullanıcılar hem de B2B müşteriler için değerli bir bilgi.

Theme’de functions.php Nereye Eklenir?

Bu kodları nereye koyacağınız konusunda iki yaklaşım var.

Çocuk tema functions.php: Eğer bir çocuk tema kullanıyorsanız, kodları doğrudan wp-content/themes/your-child-theme/functions.php dosyasına ekleyebilirsiniz. Bu en yaygın ve güvenli yaklaşım.

Özel eklenti: Fonksiyonelliği tema bağımsız tutmak istiyorsanız, küçük bir mu-plugin ya da custom plugin oluşturun. wp-content/mu-plugins/ klasörüne koyduğunuz PHP dosyaları WordPress tarafından otomatik olarak yüklenir ve aktifleştirme gerektirmez.

<?php
/**
 * Plugin Name: WooCommerce Urun Resmi Title Optimizer
 * Description: WooCommerce urun ana resmine otomatik title tag ekler
 * Version: 1.0
 * Author: Sysadmin Blog
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Kodlarinizi buraya ekleyin
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    if ( ! is_product() ) {
        return $attr;
    }
    
    global $product;
    
    if ( ! $product instanceof WC_Product ) {
        return $attr;
    }
    
    $featured_image_id = (int) $product->get_image_id();
    
    if ( (int) $attachment->ID === $featured_image_id ) {
        $attr['title'] = $product->get_name();
    }
    
    return $attr;
    
}, 10, 3 );

Bu dosyayı wp-content/mu-plugins/wc-image-title.php olarak kaydedin. Tema değişse bile kodunuz çalışmaya devam eder.

Sık Karşılaşılan Sorunlar ve Çözümleri

Sorun: is_product() çalışmıyor

Bazı tema ve sayfa oluşturucular (Elementor, Divi gibi) is_product() fonksiyonunun erken hook’larda doğru çalışmamasına neden olabilir. Bu durumda şu alternatifi deneyin.

// is_product() calismazsa alternatif kontrol
function check_is_product_page() {
    global $post;
    return ( is_a( $post, 'WP_Post' ) && 'product' === get_post_type( $post ) );
}

Sorun: global $product boş geliyor

WooCommerce’in bazı versiyonlarında global $product değişkeni henüz initialize edilmemiş olabilir. Bu durumda wc_get_product() kullanmak daha güvenli.

// Global $product yerine wc_get_product kullan
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    
    if ( ! is_product() ) {
        return $attr;
    }
    
    $post_id = get_the_ID();
    if ( ! $post_id ) {
        return $attr;
    }
    
    $product = wc_get_product( $post_id );
    
    if ( ! $product ) {
        return $attr;
    }
    
    if ( (int) $attachment->ID === (int) $product->get_image_id() ) {
        $attr['title'] = $product->get_name();
    }
    
    return $attr;
    
}, 10, 3 );

Sorun: Özel karakter ve HTML entity’leri

Ürün adlarında tırnak işareti, aprostof ya da HTML özel karakterleri varsa title attribute’unda sorun çıkabilir. esc_attr() kullanmak şart.

Yukarıdaki örneklerde $attr['title'] = $product->get_name(); satırlarını $attr['title'] = esc_attr( $product->get_name() ); olarak güncelleyin. Bu, ", <, >, & gibi karakterlerin HTML uyumlu hale getirilmesini sağlar.

Toplu Mevcut Ürünleri Güncelleme

Eğer mağazanızda binlerce ürün varsa ve mevcut resimlerin WordPress medya kütüphanesindeki title alanlarını da güncellemek istiyorsanız, bir WP-CLI komutu işinizi görebilir. Bu yöntem, filtre yaklaşımından farklı olarak veritabanındaki gerçek post_title değerini günceller.

# WP-CLI ile tum urun resimlerinin title'ini urun adiyla guncelle
wp eval '
$products = wc_get_products( [ "limit" => -1, "return" => "ids" ] );
foreach ( $products as $product_id ) {
    $product = wc_get_product( $product_id );
    $image_id = $product->get_image_id();
    if ( $image_id ) {
        wp_update_post( [
            "ID"         => $image_id,
            "post_title" => $product->get_name(),
        ] );
        echo "Guncellendi: " . $product->get_name() . " (Image ID: " . $image_id . ")n";
    }
}
echo "Tamamlandi!n";
'

Bu komutu çalıştırmadan önce mutlaka yedek alın. Büyük kataloglarda --limit parametresi ekleyerek küçük gruplar halinde çalıştırabilirsiniz.

Test Etme ve Doğrulama

Kodunuzun doğru çalışıp çalışmadığını test etmek için browser’ın developer tools’unu kullanın.

  • Bir ürün sayfasını açın
  • F12 ile Developer Tools’u açın
  • Elements sekmesinde ürün resim elementini bulun
  • tag’inde title attribute’unun ürün adını içerdiğini doğrulayın

Alternatif olarak, sayfanın kaynak kodunu görüntüleyin ve title= araması yapın.

Ayrıca birden fazla ürün sayfasını test edin. Özellikle özel karakterler içeren ürün adları, sayılarla başlayan isimler ve uzun ürün adları olan ürünleri kontrol edin.

Sonuç

WooCommerce ürün resmine otomatik title tag eklemek, küçük bir functions.php müdahalesiyle çözülebilecek ama etkisi büyük bir optimizasyon. Yüzlerce ya da binlerce ürünü olan mağazalarda manuel olarak her görselin title bilgisini doldurmak hem zaman kaybı hem de tutarsızlıklara açık kapı bırakıyor.

Anlattığımız yaklaşımda önemli noktaları özetleyelim.

  • wp_get_attachment_image_attributes filtresi, bu iş için en temiz ve doğal çözüm noktası.
  • is_product() kontrolü ile gereksiz sayfalarda filtrenin devreye girmesini engelleyin.
  • Performans için transient cache kullanın, özellikle arşiv sayfalarında veritabanı sorgularını minimize etmek kritik.
  • esc_attr() ile özel karakterlerin HTML’i bozmasının önüne geçin.
  • WP-CLI ile mevcut veritabanındaki eski ürün görsellerini toplu güncelleyebilirsiniz.
  • Kodu mu-plugin olarak konumlandırmak, tema güncellemelerinde kodun kaybolma riskini ortadan kaldırır.

SEO çalışmalarınızda görselleri de denklem içine almak, arama motorlarının içeriğinizi daha iyi anlamasına ve görsel arama sonuçlarında daha iyi performans sergilemenize katkı sağlar. Bu küçük iyileştirme, özellikle görsel odaklı ürünler (moda, mobilya, elektronik) satan mağazalar için uzun vadede kayda değer bir fark yaratabilir.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir