Ana içeriğe geç

Ücretsiz Meta Etiket ve Open Graph Oluşturucu

Canlı Google ve sosyal paylaşım önizlemesiyle SEO meta etiketleri, Open Graph ve Twitter Card işaretlemesi oluşturun. Doğrudan sayfa başlığınıza kopyalayın.

Yüklendikten sonra çevrimdışı çalışır
0 · 0/580px
0 · 0/920px

En iyisi: 1200×630 px, 5 MB altı, mutlak bir https:// bağlantısı.

Şunları da ekle
Başlık 0/580px (30-60 önerilir)Açıklama 0/920px (70-160 önerilir)

Google arama önizlemesi

example.com
Sayfa başlığınız burada görünür
Meta açıklamanız burada görünür. Arama sonuçlarından tıklama oranını artırmak için çekici yazın.

Genişlikler tahminidir: Google karakterlere göre değil piksellere göre keser.

Sosyal kart önizlemesi

og:image önizlemesi
example.com
Sayfa başlığı
Sayfa açıklaması
<head> bölümüne yapıştır

Meta etiketleri oluşturmak için yukarıda en az bir alanı doldurun.

Yaygın kullanımlar

  • Blog Yazıları için Meta EtiketlerMakalelerin paylaşıldığında harika görünmesi için başlık, açıklama ve sosyal etiketler oluştur.
  • Ürün Sayfaları için Meta EtiketlerÜrün sayfalarının güzel paylaşılmasını sağla ve arama sonuçlarında iyi okunmasını sağla.
  • Landing Sayfalar için Meta EtiketlerKampanya sayfalarının paylaşıldığında ve arandığında nasıl görüneceğini tam olarak kontrol et.
  • Herhangi Bir Web Uygulaması için Meta Etiket OluşturYeni bir sayfa veya site için head meta etiketlerinin tam setini hızlı bir şekilde oluştur.
  • Çirkin Bağlantı Önizlemelerini DüzeltBağlantılarının çıplak URL olarak gösterilmesini durdur — zengin önizleme kartları oluşturan etiketler ekle.

Nasıl çalışır

Tüm etiket oluşturma ve head ayrıştırma doğrudan tarayıcınızda gerçekleşir — sunucu yok. Araç HTML dizelerini tepkisel olarak oluşturmak için React'in useMemo'sunu, içe aktarma/denetim özelliği için mevcut sayfa işaretlemesini okumak üzere tarayıcının yerel DOMParser API'sini kullanır.

  1. 1
    Form girdisi canlı oluşturmayı yönlendirir
    Siz yazarken bir useMemo kancası tüm etiket bloğunu — başlık, meta açıklaması, Open Graph özellikleri ve Twitter Card öznitelikleri — hemen yeniden oluşturur ve özel karakterleri (&, <, >, ") kaçışlar; böylece çıktı doğrudan HTML'ye yapıştırmak için güvenlidir.
  2. 2
    Tarayıcının URL yapıcısıyla URL doğrulama
    Her URL alanı (sayfa URL'si, sosyal görsel) tarayıcının yerleşik URL yapıcısıyla doğrulanır. Yalnızca noktalı ana bilgisayar adlarına sahip, düzgün biçimli http:// veya https:// adresleri geçer; geçersiz değerler kopyala düğmesini engeller ve satır içi bir hata gösterir.
  3. 3
    İçe aktarma: DOMParser mevcut head işaretlemesini okur
    Denetlemek için mevcut <head> HTML'sini yapıştırırsanız araç onu etkisiz modda DOMParser'dan geçirir — hiçbir betik çalışmaz ve hiçbir ağ isteği yapılmaz. Ardından ayrıştırılmış belgede bilinen meta seçicileri (og:title, twitter:description, canonical bağlantı vb.) sorgular ve bulduklarıyla form alanlarını önceden doldurur.
  4. 4
    Canlı Google ve sosyal kart önizlemeleri
    Araç aynı form durumunu kullanarak stilize bir Google arama sonucunu ve bir Open Graph kart önizlemesini gerçek zamanlı çizer; böylece çıktıyı kopyalamadan önce başlık ve açıklamanın tam olarak nasıl kısaltılacağını görebilirsiniz.

İlgili araçlar

Sık sorulan sorular