WordPress'te Düzgün Görüntü Nasıl Eklenir (Adım Adım)

Yayınlanan: 2023-08-03

WordPress web sitenize veya blogunuza resim eklemenin doğru yolunu mu arıyorsunuz?

Resimleri WordPress'e doğru bir şekilde ekleyerek web sitenizin görsel çekiciliğini, erişilebilirliğini ve SEO'sunu geliştirebilirsiniz. Hatta kullanıcıların kendi resimlerini yüklemelerine ve bunları sitenizde veya yarışmalarınızda kullanmalarına izin verebilirsiniz.

Bu yazıda, WordPress'te nasıl düzgün bir şekilde resim ekleyeceğinizi göstereceğiz.

Add images in WordPress properly

WordPress'te Resimleri Doğru Yüklemenin Önemi

Bazen kullanıcılar, kaynaktan bir görseli doğrudan kopyalar ve web sitesi içeriğine yapıştırır. Ne yazık ki bu, yavaş sayfalar, zayıf kullanıcı deneyimi ve zayıf SEO gibi sorunlara neden olabilir.

WordPress web sitenize resim eklediğinizde, bunu doğru şekilde yapmanız önemlidir. Bu, doğru dosya formatını, dosya adını ve alternatif metni kullanmak anlamına gelir.

Resimlerinizi kısa çizgilerle ayrılmış açıklayıcı kelimelerle adlandırmanızı öneririz. Örneğin, seyahat blogunuzdaki bir resim için 'bali-tatil-fotoğraf.jpg' dosya adını kullanabilirsiniz.

Resimleri düzgün bir şekilde eklemek, aynı zamanda resimlerinizi hızlı bir şekilde yüklenecek ve tüm cihazlarda iyi görünecek şekilde yeniden boyutlandırmak anlamına gelir. Örneğin, JPEG gibi bazı görüntü formatları diğerlerinden daha fazla sıkıştırılmıştır, bu da bu görüntülerin sunucunuzda daha az yer kaplayacağı ve yüklenmesinin daha kısa süreceği anlamına gelir.

Bu formatları, WordPress blogunuzdaki resimler için bir resim sıkıştırma eklentisiyle birlikte kullanarak, web sitenizin kullanıcı deneyimini iyileştirebilirsiniz.

Benzer şekilde, WordPress'teki Resim bloğunu kullanarak ve resimlerinizi SEO ve alt metin için uygun şekilde optimize ederek, arama motorlarının resimlerinizi dizine eklemesini kolaylaştırabilirsiniz.

Bu, web sitenizin sıralamasını yükseltebilir ve web sitenizin engelli kişiler için erişilebilirliğini iyileştirebilir.

Bununla birlikte, WordPress'te nasıl düzgün bir şekilde resim ekleneceğini görelim. Birkaç yöntemi ele alacağız ve eğitimimizin farklı bölümlerine atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

  • Blok Düzenleyicide Görüntüler Nasıl Eklenir (Gutenberg)
  • Klasik Düzenleyicide Görüntüler Nasıl Eklenir?
  • Medya Kitaplığına Görüntüler Nasıl Eklenir?
  • Bir Görüntüyü WordPress SEO İçin Optimize Etme
  • Bonus: Kullanıcıların WordPress'e Resim Yüklemesine İzin Ver

Blok Düzenleyicide Görüntüler Nasıl Eklenir (Gutenberg)

Görüntü bloğunu kullanarak WordPress blok düzenleyicisine kolayca görüntü ekleyebilirsiniz.

Öncelikle, resim eklemek istediğiniz mevcut veya yeni sayfayı/yazıyı açmanız gerekir.

Oradayken, blok menüsünü açmak için ekranın sol üst köşesindeki '+' düğmesine tıklayın. Buradan, Resim bloğunu bulup gönderiye veya sayfaya eklemelisiniz.

Add image block to the post

Bunu yaptıktan sonra, ekranda 'Medya Seç veya Yükle' istemini başlatmak için 'Medya Kitaplığı' düğmesine tıklayın.

Buradan, bilgisayarınızdan bir görsel yüklemek istiyorsanız 'Dosyaları Yükle' sekmesine geçebilirsiniz.

Ancak, medya kitaplığından bir resim eklemek istiyorsanız, bunu 'Medya Kitaplığı' sekmesine geçerek de yapabilirsiniz.

Select image from the media library

Bir resim ekledikten sonra, sol sütuna bunun için alternatif metin eklemeniz gerekecektir. Bu alternatif metin, arama motorlarının görüntünün içeriğini anlamasına yardımcı olduğundan, görüntü SEO için çok önemlidir. Ayrıca, ekran okuyucusu olan kişilerin resimlerinizle ilgili bu bilgileri görmesini sağlar.

Sağ sütuna görseli açıklayan bir başlık ve resim yazısı da ekleyebilirsiniz. Altyazılar, resimlerinizin görünür metin açıklamalarıdır, başlık ise kullanıcı faresini resmin üzerine getirdiğinde görünür.

Ayrıntılar için, WordPress'te resimlere alt yazı eklemeyle ilgili başlangıç ​​kılavuzumuza bakmak isteyebilirsiniz.

Ardından, resmi sayfanıza veya gönderinize eklemek için 'Seç' düğmesini tıklamanız yeterlidir.

Fill in image details

Artık bir resim yüklediğinize göre, sağdaki blok panelinden boyutunu, boyutlarını, kenarlığını ve stilini daha da özelleştirebilirsiniz.

Ayrıntılar için, WordPress'te görüntülerin nasıl ekleneceği ve hizalanacağı ile ilgili eğiticimize göz atın.

Images settings in the block panel

Son olarak, ayarlarınızı kaydetmek için 'Güncelle' veya 'Yayınla' düğmesine tıklayın.

Artık Gutenberg editörüne düzgün bir şekilde bir resim eklediniz.

Klasik Düzenleyicide Görüntüler Nasıl Eklenir?

Hala WordPress'teki eski klasik düzenleyiciyi kullanıyorsanız, bu yöntemi kullanabilirsiniz.

Öncelikle, WordPress kontrol panelinden görüntüyü eklemek istediğiniz sayfayı veya gönderiyi ziyaret etmeniz gerekir. Oradayken, medya kitaplığını başlatmak için 'Medya Ekle' düğmesini tıklamanız yeterlidir.

Click the add media button

Ardından, bilgisayarınızdan bir resim yüklemek için 'Dosyaları Yükle' sekmesine geçebilirsiniz.

Alternatif olarak, medya kitaplığından bir görüntü eklemek için 'Medya Kitaplığı' sekmesine geçmeniz yeterlidir.

Upload image file in the classic editor

Bir resim ekledikten sonra, alternatif metin ve bunun için bir başlık eklemeniz gerekecek. İsterseniz bir açıklama ve başlık da ekleyebilirsiniz.

Tüm bu seçenekler için görüntüyü basitçe tanımlayabilirsiniz. Bu, arama motorunun resminizi dizine eklemesine ve web sitenizin görünürlüğünü artırmasına yardımcı olacaktır.

Ardından, devam edin ve 'Gönderiye Ekle' düğmesini tıklayın.

Configure attachment details in classic editor

Şimdi, resim WordPress yayınınıza veya sayfanıza eklenecektir.

Buradan, görüntünün üzerindeki hizalama simgelerini kullanarak hizalamasını değiştirebilirsiniz. Kalem simgesine tıklayarak bir görüntüyü daha fazla düzenleyebilirsiniz.

Click the Pencil icon to edit an image

Bu, ekranınızda boyutu değiştirebileceğiniz ve görüntü başlığı niteliklerini, CSS sınıflarını, hizalamayı ve daha fazlasını ekleyebileceğiniz 'Görüntü ayrıntıları' istemini açar.

İşiniz bittiğinde, yaptığınız değişiklikleri kaydetmek için 'Güncelle' düğmesini tıklamanız yeterlidir.

Edit image in the classic editor

Bundan sonra, gönderinizi kaydetmek için 'Yayınla' veya Güncelle' düğmesini tıklamanız yeterlidir.

Ortam Kitaplığına Görüntüler Nasıl Eklenir?

İsterseniz, medya kitaplığına doğrudan bir görüntü de ekleyebilirsiniz. Medya kitaplığına bir resim ekledikten sonra, yine de bir yazı veya sayfa açmanız ve Resim bloğunu eklemeniz gerekeceğini unutmayın.

Medya kitaplığından bir resim eklemek için, WordPress yönetici alanından Medya » Yeni Ekle sayfasını ziyaret etmelisiniz.

Oradayken, bilgisayarınızdan bir resim yüklemek için 'Dosyaları Seç' düğmesini tıklayın. Ardından, resmin yanındaki 'Düzenle' bağlantısını tıklayın.

Add Image in the media library and click the Edit link

Bu sizi görüntünün başlığını değiştirerek başlayabileceğiniz 'Medyayı Düzenle' sayfasına götürecektir. Bundan sonra, aşağı kaydırarak alternatif metin, başlık ve açıklama ekleyebilirsiniz.

Bunu yaptıktan sonra, 'Resmi Düzenle' düğmesine de tıklayabilirsiniz.

Click the Edit Image button

Bu sizi, görüntüyü beğeninize göre kırpabileceğiniz, ölçekleyebileceğiniz, döndürebileceğiniz veya çevirebileceğiniz başka bir sayfaya yönlendirecektir. Ayrıntılı talimatlar için lütfen WordPress'te temel görüntü düzenlemenin nasıl yapılacağına ilişkin başlangıç ​​kılavuzumuza bakın.

Memnun kaldığınızda, değişikliklerinizi kaydetmek için 'Güncelle' düğmesini tıklamanız yeterlidir.

basic editing features in WordPress

Bu sizi, ayarlarınızı kaydetmek için tekrar 'Güncelle' düğmesine tıklamanız gereken 'Medyayı Düzenle' sayfasına geri götürecektir.

Artık medya kitaplığına başarıyla bir resim eklediniz.

Ardından, bu resmi WordPress yönetici kenar çubuğundan eklemek istediğiniz gönderiyi ziyaret edin. Oraya vardığınızda, gönderiye bir Resim bloğu eklemek için '+' düğmesini tıklayın.

Ardından, 'Medya Kitaplığı' düğmesini seçmeniz gerekir.

Image block

Bu, ekranınızda 'Medya Seç veya Yükle' istemini başlatacak ve burada medya kitaplığına yüklediğiniz görüntüyü en üstte göreceksiniz.

Görüntüyü seçtiğinizde, başlığının, alternatif metninin, alt yazısının ve açıklamasının zaten medya kitaplığı sayfasından eklenmiş olduğunu göreceksiniz.

Şimdi, görüntüyü blok düzenleyiciye yüklemek için 'Seç' düğmesini tıklamanız yeterlidir.

Add image from the media library

Son olarak, ayarlarınızı kaydetmek için 'Yayınla' veya 'Güncelle' düğmesini tıklayın.

WordPress SEO için Bir Görüntü Nasıl Optimize Edilir

Bir yazıya/sayfaya resim ekledikten sonra, onu arama motorları için optimize etmek de çok önemlidir. Ne yazık ki, WordPress, görüntüler için herhangi bir yerleşik gelişmiş SEO özelliği sunmuyor.

Burası, WordPress için Hepsi Bir Arada SEO'nun (AIOSEO) devreye girdiği yerdir.

Arama motorları için resimler de dahil olmak üzere içeriğinizi optimize etmeyi çok kolaylaştıran, piyasadaki en iyi WordPress SEO eklentisidir.

Öncelikle, AIOSEO eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla talimat için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Not: AIOSEO'nun ücretsiz bir sürümü de vardır. Ancak, Görsel SEO özelliğinin kilidini açmak için eklentinin pro sürümüne ihtiyacınız olacak.

Aktivasyon üzerine, kurulum sihirbazını yapılandırmanız gerekecektir.

Daha fazla ayrıntı için, WordPress için All in One SEO'yu doğru şekilde nasıl kuracağınızla ilgili kılavuzumuza bakın.

AIOSEO setup wizard

Ardından, WordPress yönetici kenar çubuğundan Hepsi Bir Arada SEO » Görünüm Arama sayfasına gidin ve 'Görüntü SEO' sekmesine geçin.

Bundan sonra, özelliğin kilidini açmak için aşağı kaydırın ve 'Görüntü SEO'yu Etkinleştir' düğmesini tıklayın.

Activating the Image SEO Module in AIOSEO

Artık Görsel SEO ayarlarını görebileceksiniz. Burada başlık, alternatif metin, resim yazısı, açıklama ve dosya adı için farklı sekmeler göreceksiniz.

Otomatik Görüntü Başlıklarını Yapılandırma

Görsel SEO sayfasındaki 'Başlık' sekmesine geçtiğinizde, akıllı etiketler kullanarak resimleriniz için bir başlık formatı oluşturarak başlayabilirsiniz.

Bu akıllı etiketler, resimleriniz için otomatik olarak başlık nitelikleri oluşturur. Bu, bir ziyaretçinin faresini resimlerinizin üzerine getirdiğinde göreceği şeydir.

Örneğin, her resim başlığı özelliğinin resim başlığını ve site başlığını kullanmasını istiyorsanız, bu akıllı etiketleri 'Başlık Formatı' alanına ekleyebilirsiniz.

Add smart tags to configure title SEO

Bundan sonra, AIOSEO'nun dosya adından bir resim başlığı oluştururken bazı karakterleri otomatik olarak kaldırmasını istiyorsanız, Noktalama İşaretlerini Şeritle seçeneğini de etkinleştirebilirsiniz.

Örneğin 'an-example-image' gibi bir resim dosyasını kaydederken tire kullanıyorsanız, 'Boşluklara Dönüştürülecek Karakterler' bölümündeki 'Tire (-)' seçeneğini seçebilirsiniz.

Bunu yaptığınızda, AIOSEO bu çizgileri otomatik olarak kaldıracak ve bunları boşluklara çevirerek görüntü başlığını 'örnek bir görüntü' yapacaktır.

Configure strip punctuation and casing options

Bundan sonra, 'Gövde' bölümüne gidin.

Buradan, başlığınız için bir kasa seçeneği belirleyebilirsiniz. Başlıklarınızı daha okunaklı hale getirmek için cümle durumu veya başlık durumu seçmenizi öneririz.

Otomatik Alt Etiketleri Yapılandırma

Başlık ayarlarını yapılandırdıktan sonra üst kısımdan 'Alt Tag' sekmesine geçin.

Buradan, tüm resimleriniz için otomatik olarak alternatif metin oluşturmak için 'Alt Etiket Biçimi' seçeneğinin yanındaki akıllı etiketleri kullanabilirsiniz.

Bundan sonra, tire (-) veya alt çizgi (_) gibi karakterlerin boşluğa dönüştürülmesini istiyorsanız, Noktalama İşaretlerini Şeritle ayarını da etkinleştirebilirsiniz.

SEO settings for alt tags

Benzer şekilde, alt metni oluştururken AIOSEO'nun çıkarmasını istemediğiniz sayı veya artı işareti (+) gibi karakterler varsa, 'Karakterler Çıkarılmaktan Çıkarılacak' bölümünde bu seçenekler için kutuları işaretleyebilirsiniz.

Alternatif metniniz için bir büyük/küçük harf de seçebilirsiniz.

Otomatik Alt Yazıları ve Açıklamaları Yapılandırma

Resimleriniz için otomatik altyazılar oluşturmak üzere 'Altyazılar' sekmesine geçin.

Buradan, 'Yüklemede Altyazıyı Otomatik Oluştur' seçeneğinin etkinleştirildiğinden emin olun. Ardından, resimleriniz için altyazı oluşturmak için kullanılacak akıllı etiketleri seçebilirsiniz.

Enable Captions toggle and configure its smart tags

Ardından, altyazılardaki karakterleri hariç tutmak veya dahil etmek ve onlar için bir büyük/küçük harf seçmek için Noktalama İşaretlerini Şerit özelliğini de kullanabilirsiniz.

İşiniz bittiğinde, üstten 'Açıklama' sekmesine geçmeniz gerekir.

Buradan, 'Yükleme Sırasında Açıklamayı Otomatik Oluştur' seçeneğinin etkinleştirildiğinden emin olun. Otomatik resim açıklamaları oluşturmak için kullanmak istediğiniz akıllı etiketleri de seçmelisiniz.

Enable the Description toggle and configure its smart tags

Ardından, açıklamaya alt çizgi, kesme işareti veya sayı gibi karakterleri dahil etmek/hariç tutmak için Noktalama İşareti özelliğini de kullanabilirsiniz.

Bundan sonra, görüntü açıklamalarınız için bir kasa seçmeniz yeterlidir.

Strip punctuation and casing settings

Otomatik Dosya Adlarını Yapılandırma

Daha önce de belirttiğimiz gibi, resim dosyalarınıza SEO dostu dosya adları vermenizi öneririz. Bunu resimlerinizi yüklemeden önce yapabilirsiniz veya AIOSEO bunu sizin için otomatik olarak yapabilir.

Yukarıdan 'Dosya Adı' sekmesine geçtiğinizde, AIOSEO'nun Şerit Noktalama ayarını sizin için zaten yapılandırdığını fark edeceksiniz.

Ancak, başlıklar veya alternatif metin oluştururken AIOSEO'nun görüntü dosya adlarınızdan silmesini istediğiniz başka karakterler varsa, o karakterleri 'Kaldırılacak Sözcükler' kutusuna yazabilirsiniz.

AIOSEO settings for Filename

Bundan sonra, dosya adlarınız için bir büyük/küçük harf de seçebilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için 'Değişiklikleri Kaydet' düğmesini tıklamayı unutmayın.

Artık resimlerinizi SEO için başarıyla optimize ettiniz ve AIOSEO otomatik olarak tüm resimleriniz için başlıklar, alt metinler, alt yazılar ve açıklamalar üretecektir.

Daha ayrıntılı talimatlar için lütfen görselleri arama motorları için nasıl optimize edeceğimize ilişkin başlangıç ​​kılavuzumuza bakın.

Bonus: Kullanıcıların WordPress'e Resim Yüklemesine İzin Ver

Kullanıcılarınızın kendi resimlerini WordPress web sitenize yüklemelerine de izin vermek isteyebilirsiniz. Bir yarışma düzenliyorsanız veya kullanıcı tarafından oluşturulan görüntüleri kabul eden bir fotoğrafçılık web sitesi işletiyorsanız bu kullanışlı olabilir.

Bunun için piyasadaki en iyi iletişim formu eklentisi olan WPForms'u kullanabilirsiniz. Bir resim gönderme formu da dahil olmak üzere istediğiniz herhangi bir formu oluşturmayı çok kolaylaştıran bir sürükle ve bırak oluşturucu ile birlikte gelir.

Öncelikle, WPForms eklentisini kurmanız ve etkinleştirmeniz gerekecek. Ayrıntılar için, bir WordPress eklentisinin nasıl kurulacağına ilişkin talimatlarımıza bakın.

Aktivasyon üzerine, form oluşturucuyu başlatmak için WordPress panosundan WPForms »Yeni Ekle ekranına gidin.

Buradan, formunuz için bir ad yazmanız ve ardından 'Basit İletişim Formu' şablonunun altındaki 'Snippet'i Kullan' düğmesini tıklamanız gerekir.

Select contact form template

Bu, form şablonunu, sağda önizlemesini ve sol sütunda kullanılabilir alanları göreceğiniz form oluşturucuya yükleyecektir.

Buradan devam edin ve Dosya Yükleme alanını forma sürükleyip bırakın ve ayarlarını daha da özelleştirmek için üzerine tıklayın.

Add file upload field

Buradan, alanın etiketini ve açıklamasını değiştirebilir ve hatta izin verilen uzantıları belirleyebilirsiniz.

Örneğin, yalnızca JPEG ve PNG dosyalarına izin vermek istiyorsanız, bu seçenekleri 'İzin Verilen Dosya Uzantıları' alanına yazmalısınız. Her uzantıyı virgülle ayırmayı unutmayın.

Bundan sonra, sol sütunda maksimum resim dosyası boyutunu ve yükleme sayısını da yapılandırabilirsiniz.

Configure field settings

Daha ayrıntılı talimatlar için, kullanıcıların WordPress'te resim yüklemesine nasıl izin verileceği konusundaki eğitimimize bakmak isteyebilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için 'Kaydet' düğmesini tıklamanız yeterlidir.

Ardından, resim yükleme formunu eklemek istediğiniz sayfayı/gönderiyi açın. Oradayken, blok menüsünü açmak için ekranın sol üst köşesindeki '+' düğmesini tıklayın.

Buradan, WPForms bloğunu sayfaya/yazıya eklemeniz gerekir.

Locate and add the WPForms block

Açılır menüden oluşturduğunuz resim dosyası yükleme formunu seçmeniz yeterlidir.

Son olarak, ayarlarınızı kaydetmek için 'Güncelle' veya 'Yayınla' düğmesine tıklayın. Artık formu çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz ve ziyaretçiler formu kullanarak resimlerini gönderebilecekler.

Bu makalenin, WordPress'te nasıl düzgün resim ekleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. WordPress'te blok yüksekliğini ve genişliğini nasıl değiştireceğinize ilişkin başlangıç ​​kılavuzumuzu ve grafik tasarımcılar için en iyi WordPress temaları için uzman seçimlerimizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.