Metadata - meta etiketleri nedir? Metadata ve OpenGraph

Metadata meta etiketleri nedir Metadata ornekleri

Meta etiketleri <meta>; bir html dökümanının metadata yani meta bilgilerini tanımlar. Tarayıcılarda yani kullanıcılar tarafından görüntülenemez ancak arama motorları ve yazılım dili işleyicileri için arka planda çalışır. <meta> etiketi daima <head></head> etiketleri arasında kullanılır ve html dökümanının arama kelimesi (keywords), karakter tipi (charset), sayfa bilgisi, yazar bilgisi gibi bilgileri taşır.

Metadata aciklamasi

<head>

<meta charset="UTF-8">

<meta name="description" content="Ücretsiz seo dersleri">

<meta name="keywords" content="SEO, seo dersi">

<meta name="author" content="E. Burak OR">

</head>

Metadata'lar bilinen tüm tarayıcılar tarafından desteklenir (Safari, Opera, Chrome vb). Robots.txt yazısında anlattığım gibi; bir sayfanın veya web sitesinin tamamıyla arama sonuçlarında gösterilmesini istemediğimiz durumlarda da meta etiketleri kullanılır. Bir web sitesinin tamamıyla arama motorlarından hariç bırakılması için;

<meta name="robots" content="noindex, nofollow">

komutu kullanılır. Metadata için en sık kullanılan değerler aşağıdaki gibidir.

Attribute (Öznitelik) Value (Değer) Açıklama
charset character_set Html dökümanının karakter tipini belirler.
content text Name ve http-equiv özniteliği ile birlikte kullanılır. Değer sadece text olabilir.
http-equiv content-security-policy content-type default-style refresh HTTP header için content özniteliği ile bilgi veya değer taşır.
name application-name author description generator keywords viewport Metadata için isim özelliğini belirtir.

Metadata kullanım örnekleri

Metadata ile sayfayı belirli bir sürede yenileme veya viewport değeriyle farklı cihazlarda sorunsuzca görüntülenmesini sağlayabilirsiniz. Özellikle haber sitelerinde karşınıza çıkabilen ortalama 2 dakikada bir sayfayı otomatik olarak yenileyebilirsiniz.

Charset: HTML dökümanının karakter tipini belirler.

<meta charset="UTF-8">

Description: HTML dökümanının açıklamasını belirler.

<meta name="description" content="Ücretsiz seo dersleri">

Keywords: HTML dökümanının anahtar kelimelerini belirler (Genellikler arama motorları tarafından kullanılmaz).

<meta name="keywords" content="SEO, seo dersi">

Author: HTML dökümanının yazarını belirler.

<meta name="author" content="E. Burak OR">

Viewport: Çoklu ekran tiplerinde (Cep telefonu, Tablet) görüntünün doğru olarak gösterilmesini düzenler.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSP (Content-Security-Policy: HTML dökümanının içerisinde kullanılan js, css gibi bileşenlerin nereden çalıştırılıp çalıştırılamayacağını belirler. XSS saldırılarını neredeyse imkansız hale getirir.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Content-type: HTML5 ile content-type yerini charset'e bıraktı. Xhtml veya Html4 dökümanı kullanılıyorsa content-type kullanılabilir.

<meta http-equiv="content-type" content="UTF-8">

Default-style: Birden fazla css kullanılan dökümanlar için kullanılabilir. Belirli bir sayfada farklı css'ler kullanılacağı zaman işlevselleşir.

<meta http-equiv="default-style" content="stil-11">

Refresh: Sayfayı belirli bir saniyede, dakikadan sonra otomatik olarak yenilemeye yarar. Saniye cinsinden değer alır. Örnekte 1.30 dakika 90 saniye olarak verilmiştir.

<meta http-equiv="refresh" content="90">

Sosyal medya ve Whatsapp gibi websitesini paylaştığınızda hangi bilgilerin çıkacağını belirlemek içinde meta etiketler kullanılır. Aşağıdaki meta etiket örneklerini inceleyelim;

<meta property="og:locale" content="tr_TR">

<meta property="og:type" content="website">

<meta property="og:title" content="Web geliştirme platformu - burakor.com">

<meta property="og:description" content="Php, html, css tabanlı web geliştiriciliği. PageSpeed Insight, GTmetrix skorlarını iyileştirmeye yönelik çalışmalar ve T-Shaped SEO.">

<meta property="og:url" content="http://localhost/burakor/">

<meta property="og:site_name" content="burakor.com">

<meta property="og:updated_time" content="2020-09-17T00:16:09+03:00">

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="Web geliştirme platformu - burakor.com">

<meta name="twitter:description" content="Php, html, css tabanlı web geliştiriciliği. PageSpeed Insight, GTmetrix skorlarını iyileştirmeye yönelik çalışmalar ve T-Shaped SEO.">

Sizde fark ettiyseniz; Facebook için property, Twitter için name öznitelikleri kullanılıyor. OG (OpenGraph) kullanımı için property kullanılmaktadır. Ancak Twitter OpenGraph kullanmadığı için name özniteliği ile çalışır.

Nedir bu OpenGraph (OG)

Open Graph Protokolü; her hangi bir html dökümanının veya web sitesinin sosyal medya ve paylaşımlarda kullanılırken zengin içerikli bir döküman haline dönüştürülmesidir. OpenGraph Nedir

OpenGraph; Java, RDF, Python gibi uygulamalar için ve en önemlisi Rich Snippet uygulamaları içinde kullanılır. Facebook, Twitter gibi sosyal medya araçlarında, web sayfasını paylaşırken eğerki resimler görünmüyorsa; Wordpress, Drupal vs gibi sistemlerde Öne çıkan görsel'in seçili olduğundan emin olmalısınız. Buna rağmen resimler görünmüyor ise; <meta property="og:image" content="http://localhost/burakor/medyaresmi.png" /> kodu ile istediğiniz bir resmin gösterilmesini sağlayabilirsiniz. Bu kod ile birlikte; tüm paylaşımlarda eğer ki belirli bir görsel seçilmemiş ise otomatik olarak belirlediğiniz resim gösterilecektir. Bilinen tüm meta etiketlerin bir listesine buradan ulaşabilirsiniz (Thanks Lance).

Wordpress sayfasında OpenGraph kullanımı

Çoğu Wordpress teması OpenGrap optimizasyonuna sahip olmadığı için, web sitenizin sosyal mecralarda paylaşımında genellikle sorunlar meydana gelmektedir. Bu sorunlar;

  • Paylaşılan içeriğe ait başlık ve görsellerin bulunmaması,
  • Yanlış görsellerin gösterilmesi

gibi farklılık gösterebilir. Neyse ki Wordpress, kullanıcıların hayatını kolaylaştıran eklentilere sahip olduğu için kolaylıkla OpenGraph desteğine kavuşabilirsiniz.

Wordpress OpenGraph desteği sunan eklentiler;

  • Marcin Pietrzak - OG,
  • Rank Math (Rank Math genel olarak arama motoru optimizasyonu eklentisidir. Ancak sahip olduğu OpenGraph desteği ile farklı bir eklenti kullanmanıza gerek duymaz),
  • Custom4Web - WP Open Graph

kullanabileceğiniz bazı eklentilerdir.

Özel php yazılımlarda Open Graph kullanımı;

Her zaman hazır bir yazılım kullanmıyoruz. Bu nedenle PHP tabanlı üretilen web siteleri ve projelerde Open Graph kullanmak her zaman kolay olmayabiliyor. Bu nedenle; scottmac github kullanıcısının php için oluşturduğu Open Graph protokolünü kullanmak hayat kurtarabilir. Scottmac Open Graph Protokol Scottmac OG yardımcısıyla Open Graph kullanmak için;

$graph = OpenGraph::fetch('http://localhost/burakor/metadata-meta-etiketleri-nedir-metadata-ve-opengraph/'); 
print_r($graph); 

girdisinin çıktısı;

( 
[_values:OpenGraph:private] => Array 
( 
[type] => article=> 
[image] => /wp-content/uploads/2020/09/Metadata-meta-etiketleri-nedir-Metadata-ornekleri.png
[site_name] => Web gelistirme platformu | burakor.com 
[title] => Metadata - meta etiketleri nedir? 
Metadata ve OpenGraph 
[url] => http://localhost/burakor/metadata-meta-etiketleri-nedir-metadata-ve-opengraph/ 
[description] => Arama motoru optimizasyonunda meta etiketlerinin kullanımının önemi yüksektir. 
Meta etiketlerinin nasıl kullandığına yakından bakış. 
) 
[_position:OpenGraph:private] => 0 
)

şeklinde olacaktır.

{{ message }}

{{ 'Comments are closed.' | trans }}