API Referansi
Bu belge, Open Graph Meta Generator araci ve alttaki islevleri hakkinda teknik ayrintilar sunar.
Arac genel bakisi
Open Graph Meta Generator, Open Graph ve Twitter Card protokolleri icin HTML meta etiketleri ureten istemci tarafli bir aractir. Kullanici girdisini isler ve dogru bicimde formatlanmis HTML meta etiketleri uretir.
Girdi parametreleri
Genel bilgiler
| Parameter | Type | Required | Description | Example |
|---|---|---|---|---|
pageType | string | Yes | Icerik turu | "website", "article", "book" |
title | string | No | Sayfa basligi | "My Awesome Website" |
description | string | No | Sayfa aciklamasi | "A great website for developers" |
url | string | No | Sayfa URL'si | "https://example.com/page" |
siteName | string | No | Site adi | "My Company" |
Gorsel ayarlari
| Parameter | Type | Required | Description | Example |
|---|---|---|---|---|
imageUrl | string | No | Gorsel URL'si | "https://example.com/image.jpg" |
imageAlt | string | No | Gorsel alt metni | "Company logo" |
imageWidth | string | No | Piksel cinsinden genislik | "1200" |
imageHeight | string | No | Piksel cinsinden yukseklik | "630" |
Twitter ayarlari
| Parameter | Type | Required | Description | Example |
|---|---|---|---|---|
twitterCardType | string | Yes | Twitter kart turu | "summary_large_image" |
twitterSite | string | No | Site Twitter kullanici adi | "@example" |
twitterCreator | string | No | Olusturucu Twitter kullanici adi | "@author" |
Cikti formati
Arac, asagidaki bicimde HTML meta etiketleri uretir:
Open Graph etiketleri
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitter etiketleri
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
Icerik turleri
Desteklenen sayfa turleri
| Type | Description | Use Case |
|---|---|---|
website | Genel web sitesi sayfalari | Homepage, about page, contact page |
article | Blog yazilari ve haberler | Blog posts, news articles, tutorials |
book | Kitap ve e-kitap sayfalari | Book listings, e-book pages |
profile | Kisisel veya kurumsal profiller | User profiles, company pages |
music | Muzik parcasi ve albumler | Music streaming, album pages |
video | Video icerigi | Video pages, movie listings |
Twitter Card turleri
| Type | Description | Best For |
|---|---|---|
summary | Kucuk onizlemeli temel kart | Blog posts, news articles |
summary_large_image | Buyuk gorselli kart | Visual content, products |
app | Mobil uygulama tanitimi | App store pages |
player | Video veya ses icerigi | Video pages, podcasts |
Veri isleme
HTML kacislama
Tum kullanici girdileri, XSS saldirilarini onlemek icin otomatik olarak kacislanir:
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
URL dogrulama
URL'ler, dogru bicimde formatlandiklarindan emin olmak icin dogrulanir:
function isValidUrl(string) {
try {
new URL(string);
return true;
} catch (_) {
return false;
}
}
Icerik uzunlugu sinirlari
Arac, onerilen uzunluk sinirlarini uygular:
- Baslik: en fazla 60 karakter
- Aciklama: en fazla 160 karakter
- URL: gecerli URL formatinda olmalidir
Tarayici uyumlulugu
Desteklenen tarayicilar
| Browser | Version | Support |
|---|---|---|
| Chrome | 60+ | Tam destek |
| Firefox | 55+ | Tam destek |
| Safari | 12+ | Tam destek |
| Edge | 79+ | Tam destek |
Gerekli ozellikler
- ES6+ destegi
- Clipboard API destegi
- Local Storage destegi
- CSS Grid destegi
Performans hususlari
Istemci tarafli isleme
- Tum isleme tarayicida gerceklesir
- Sunucu istegi gerekmez
- Aninda uretim ve onizleme sunar
- Dusuk bellek kullanimi vardir
Onbellekleme
- Uretilen meta etiketleri tarayici depolamasinda onbelleklenir
- Gecmis kayitlari yerel olarak saklanir
- Harici bagimlilik yoktur
Hata yonetimi
Girdi dogrulama hatalari
// Example error handling
if (!title.trim()) {
showError("Title is required");
return;
}
if (url && !isValidUrl(url)) {
showError("Please enter a valid URL");
return;
}
Gorsel yukleme hatalari
// Handle image loading errors
function handleImageError(event) {
const img = event.target;
img.style.display = "none";
showWarning("Image failed to load");
}
Entegrasyon ornekleri
WordPress entegrasyonu
// Add to functions.php
function add_open_graph_tags() {
if (is_single()) {
$title = get_the_title();
$description = get_the_excerpt();
$image = get_the_post_thumbnail_url();
echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
echo '<meta property="og:image" content="' . esc_url($image) . '" />';
}
}
add_action('wp_head', 'add_open_graph_tags');
React entegrasyonu
// React component example
function OpenGraphMeta({ title, description, image, url }) {
return (
<>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
</>
);
}
Next.js entegrasyonu
// Next.js Head component
import Head from "next/head";
function MyPage() {
return (
<Head>
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
</Head>
);
}
Test ve dogrulama
Sosyal medya hata ayiklayicilari
- Facebook: developers.facebook.com/tools/debug
- Twitter: cards-dev.twitter.com/validator
- LinkedIn: linkedin.com/post-inspector
Otomatik testler
// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
test("generates correct meta tags", () => {
const input = {
pageType: "website",
title: "Test Page",
description: "Test description",
};
const output = generateMetaTags(input);
expect(output).toContain('<meta property="og:type" content="website" />');
expect(output).toContain('<meta property="og:title" content="Test Page" />');
});
});
Sorun giderme
Yaygin sorunlar
- Images not displaying: URL bicimini ve erisilebilirligi kontrol edin
- Tags not working: Sosyal medya hata ayiklayicilari ile dogrulayin
- Truncated content: Karakter sinirlarini kontrol edin
- Cache issues: Onbellek yenilemek icin hata ayiklama araclarini kullanin
Hata ayiklama modu
Ayrintili bilgileri gormek icin hata ayiklama modunu etkinlestirin:
// Enable debug logging
localStorage.setItem("debug", "true");
Gelecekteki iyilestirmeler
Planlanan ozellikler
- Schema.org yapilandirilmis veri destegi
- Coklu dil destegi
- Toplu uretim yetenekleri
- Sunucu tarafli uretim icin API endpoint'i
- Gelismis gorsel optimizasyonu
- Analitik entegrasyonu
Katki saglama
Open Graph Meta Generator'a katki saglamak icin:
- Depoyu fork edin
- Bir ozellik dali olusturun
- Degisikliklerinizi yapin
- Test ekleyin
- Bir pull request gonderin
Destek
Teknik destek veya sorular icin: