WMASTERLAR
1 FORUM araçlar diğer
+ Üye Ol Giriş Yap


[-]
Duyuru

WMasterlar - Türkiye'nin en hızlı gelişen ve geliştiren webmaster portalına hoş geldiniz.

Değerli ziyaretçimiz, forumumuzdan en iyi ve en hızlı şekilde faydalanabilmeniz için üye olmanız gerekmektedir. Sitemize üyelikler ücretsizdir. Üye olmadan önce mutlaka Forum Kurallarını okuyunuz. Zaten kayıtlı bir üye iseniz sağ üst köşeden giriş yapabilirsiniz.


Sponsor Reklam
YENİ FORUM SİTEMİZ AÇILMIŞTIR YAKINDA BU SİSTEM KAPANACAKTIR YENİ SİSTEMDEN DEVAM EDİLECEKTİR DUYURULUR. YENİ SİSTEME GEÇMEK İÇİN TIKLAYINIZ.

Bir sayfanın <Head> bölümüne girebilecek tüm etiketler - DÖKÜMAN

0 Yorum   286 Görüntüleme  
Sosyal Ağlarda Paylaş


#1
Exclamation 
Sponsor Reklam
Sınırsız renk ve yeni nesil PDO sistemli full responsive kurumsal firma yazılımı..

Her sayfanın başını çeken <Head> etiketi, HTML sayfaları için çok maksatlı bir dolap gibi. İnternet tarayıcısı tarafından kullanıcıya aktarılmayacak ancak robotlar ve botlara hitap edecek tüm kodları, sitemizin <head> etiketlerine ekliyoruz. Peki, bir sayfanın içerisinde yer verebileceğiniz tüm <head> etiketlerinin neler olduğunu biliyor musunuz?

vPolqD.png

WordPress ve diğer CMS sistemlerinin yaygınca kullanılmaya başlaması Head etiketi işiyle manuel uğraşma zorunluluğumuzu ortadan kaldırdı. Artık zaten eklentiler bizim yerimize ihtiyaç duyduğumuz <head> etiketini sayfamızın başına yerleştiriyor. Fakat her bir etikete eklentiye ulaşamayacağınız ve bir gün tüm bu head etiketlerine tek bir sayfadan ulaşmaya ihtiyaç duyabileceğinizi düşünüyorum.

Neyse ki bunu düşünen tek ben değilmişim. Josh Buchea adında bir geliştirici Github üzerinden oluşturduğu HEAD reposuyla bir sayfanın <head> bölümünde yer alabilecek her şeyi bir araya toplamış. Bu listeye hemen aşağıdan ulaşabileceğiniz gibi, yukarıdaki link yardımıyla güncel repoya da göz atabilirsiniz:

Bir sayfa için önerilenler (Minimum)
Basit ve sade web siteleri için başlıca etiketler:


Kod:
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Yukarıdaki 3 meta etiketi head bölümü içerisinde *ilk sırada* konumlanmalıdır; diğer head içerikleri bu etiketlerin *ardından* yerleştirilmelidir -->
<title>Sayfa Başlığı</title>

Elementler

Kod:
<!-- Doküman Başlığı -->
<title>Sayfa Başlığı</title>

<!-- Base URL doküman içerisinde ilişkisel olarak girilmiş bağlantılar(relative path) için başlangıç noktası oluşturur -->
<base href="https://example.com/page.html">

<!-- Harici CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Doküman içi CSS -->
<style>
 /* ... */
</style>

<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--JS olmaması halinde--></noscript>
Meta Etiketleri

Kod:
<meta charset="utf-8"> <!-- Doküman için karakter kodlaması belirler -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Yukarıdaki 3 meta etiketi head bölümü içerisinde *ilk sırada* konumlanmalıdır; diğer head içerikleri bu taglerin *ardından* yerleştirilmelidir -->

<!-- Kaynakların nereden yükleneceğini kontrol eder -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Doküman içerisinde olabildiğince önce konumlandırın -->
<!-- Sadece bu etiketin altındaki içeriğe etki eder -->

<!-- Web uygulamasının adı (yalnızca web sayfası bir uygulamaysa kullanılmalı.) -->
<meta name="application-name" content="Application Name">

<!-- Sayfanın kısa açıklaması (150 karakter ile sınırlıdır) -->
<!-- *Bazı* durumlarda, bu açıklama arama sonuçları içerisinde sayfadan bir kesit olarak kullanılır -->
<meta name="description" content="A description of the page">

<!-- Arama motorunun gezinme ve indeksleme davranışını belirler  -->
<meta name="robots" content="index,follow,noodp"><!-- Bütün Arama Motorları -->
<meta name="googlebot" content="index,follow"><!-- Google'a özgül -->

<!-- Google'a sitelinks search boxı göstermemesini belirtir -->
<meta name="google" content="nositelinkssearchbox">

<!-- Google'a bu sayfa için bir çeviri sağlamamasını belirtir -->
<meta name="google" content="notranslate">

<!-- Google Search Console için site sahipliğini doğrular -->
<meta name="google-site-verification" content="verification_token">

<!-- Yandex Webmasters için site sahipliğini doğrular -->
<meta name="yandex-verification" content="verification_token">

<!-- Bing Webmaster Center için site sahipliğini doğrular -->
<meta name="msvalidate.01" content="verification_token">

<!-- Alexa Console için site sahipliğini doğrular -->
<meta name="alexaVerifyID" content="verification_token">

<!-- Pinterest Console için site sahipliğini doğrular -->
<meta name="p:domain_verify" content="code from pinterest">

<!-- Norton Safe Web için site sahipliğini doğrular -->
<meta name="norton-safeweb-site-verification" content="norton code">

<!-- Web sitesini oluşturmak için kullanılan araç (örnek - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- Web sitenin konusunu ifade eden kısa açıklama -->
<meta name="subject" content="your website's subject">

<!-- Web site içeriğinin hitap ettiği kitleyi belirtir -->
<meta name="rating" content="General">

<!-- Kaynak(referrer) bilgisinin nasıl iletileceğini belirtir -->
<meta name="referrer" content="no-referrer">

<!-- Uygun telefon numaraları için otomatik algılamayı ve biçimlendirmeyi iptal eder -->
<meta name="format-detection" content="telephone=no">

<!-- DNS ön tanımını tümden iptal eder -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Tarayıcı tarafında kullanıcı ile ilgili çerez(cookie) oluşturmayı sağlar -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- Sayfanın spesifik bir çerçeve içerisinde açılması durumunu belirler  -->
<meta http-equiv="Window-Target" content="_value">

<!-- Coğrafi etiketler -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Ülke kodu (ISO 3166-1): zorunlu, bölge kodu (ISO 3166-2): tercihen; örn. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- örn. content="New York City" -->
Link

Kod:
<!-- CSS stil dosyasını işaret eder -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Yinelenen içerik sorunlarını önlemeye yardımcı olur -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

<!-- İkon bağlantısından önce eklenirdi, ancak kullanımdan kaldırıldı -->
<link rel="shortlink" href="https://example.com/?p=42">

<!--Mevcut sayfanın AMP HTML versiyonuna ait linki belirtir -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Web uygulamaları için "kurulum" kimlik bilgilerini belirten bir JSON dosyasını tanımlar -->
<link rel="manifest" href="manifest.json">

<!-- Belgenin yaratıcısını belirtir -->
<link rel="author" href="humans.txt">

<!-- Telif hakkı bilidirimini açıklayan bağlantıyı işaret eder -->
<link rel="license" href="copyright.html">

<!-- Belgenin başka bir dildeki bağlantısına refere eder -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Yaratıcı veya başka biri hakkında bilgi verir  -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Dokümansal, kayıtsal veya tarihsel yönden ilişkisel olan bir koleksiyona işaret eder -->
<link rel="archives" href="https://example.com/2003/05/">

<!-- Bir hiyerarşik yapı içerisinde en üst seviyedeki kaynağa işaret eder -->
<link rel="index" href="https://example.com/">

<!-- Kendine referans verir - doküman birden fazla referansa sahip olduğunda faydalıdır -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

<!-- Bir dizi belgede sırasıyla ilk, bir sonraki, bir önceki ve son sıradaki belgeleri işaret eder -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="prev" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">

<!-- Üçüncü taraf servislerden blog hizmeti sağlantığında kullanılır  -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Başka bir WordPress gönderisi sizin blogunuza veya gönderinize bağlantı verdiğinde otomatik bir ping oluşturur -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Başka bir web sayfası sizin sayfanıza bağlantı verdiğinde bilgilendirdiği bağlantıyı işaret eder -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Harici bir HTML belgesini mevcut olan HTML belgesine dahil eder -->
<link rel="import" href="/path/to/component.html">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Akışlar -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- Detaylı bilgi: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
Favori Simgeleri

Kod:
<!-- IE 10 ve altı için -->
<!-- favicon.ico isminde bir dosyayı kök dizinine yerleştirin - element gerekli değil -->

<!-- IE 11, Chrome, Firefox, Safari, Opera için -->
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">
Sosyal

Kod:
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
Facebook Instant Articles

Kod:
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- Makalenizin web versiyonunun bağlantısı -->
<link rel="canonical" href="http://example.com/article.html">

<!-- Mevcut makale için kullanılacak stil -->
<meta property="fb:article_style" content="myarticlestyle">
Twitter Cards

Kod:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
Google+ / Schema.org

Kod:
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
Pinterest

Kod:
<link rel="alternate" type="application/json+oembed"
 href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
 href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">
Tarayıcılar / Platformlar

Kod:
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Uygun telefon numaraları için otomatik algılamayı ve biçimlendirmeyi iptal eder -->
<meta name="format-detection" content="telephone=no">

<!-- Ana Ekran'a ekle -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Uygulama Başlığı">

<!-- Touch İkonlar -->
<!-- Birçok durum için head alanında bir 180×180px touch simge yeterli -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Not: iOS 7 Safari, sembollere efekt eklemez. -->
<!-- Safari'nin önceki versiyonları "-precomposed.png" son eke sahip sembollere efekt eklemez. -->

<!-- Başlangıç Görseli ( Kullanımdan kaldırıldı ) -->
<link rel="apple-touch-startup-image" href="path/to/startup.png">

<!-- iOS derin uygulama bağlantısı(deep linking) -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
Apple Safari

Kod:
<!-- Sabitlenmiş(pinned) Site -->
<link rel="mask-icon" href="path/to/icon.svg" color="red">
Google Android

Kod:
<meta name="theme-color" content="#E64545">

<!-- Ana ekrana ekle -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Detaylı bilgi: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android derin uygulama bağlantısı(deep linking) -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
Google Chrome

Kod:
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Çeviri istemini devre dışı bırak -->
<meta name="google" content="notranslate">
Google Chrome Mobil (Yalnızca Android)
Chrome 31'den itibaren, web uygulamanızı tıpkı Safari'deki gibi "uygulama modu" olarak ayarlayabilirsiniz.


Kod:
<!-- manifest dosya bağlantısını ve meta bilgisini tanımlar -->
<!-- manifest.json örneği aşağıdaki bağlantıdan bulunabilir -->
<link rel="manifest" href="manifest.json">

<!-- Web sayfanızı web uygulaması olarak tanımlar -->
<meta name="mobile-web-app-capable" content="yes">

<!-- Ana Ekran Simgesi  -->
<link rel="icon" sizes="192x192" href="highres-icon.png">
Microsoft Internet Explorer

Kod:
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Windows Phone üzerindeki IE 10'da bağlantı vurgulamasını kaldırır (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Sabitlenmiş(pinned) siteler (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
<meta name="application-name" content="Örnek Başlık">
<meta name="msapplication-tooltip" content="Sitenin ne yaptığına ilişkin açıklama.">
<meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
<meta name="msapplication-badge" value="frequency=DAKIKA_CINSINDEN_SAYI;polling-uri=http://example.com/path/to/file.xml">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="/path/to/tileimage.jpg">

<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2">
<meta name="msapplication-task-separator" content="1">
App Links

Kod:
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- Detaylı bilgi: http://applinks.org/documentation/ -->
Teşekkür tarafından verilen:


Sponsor Reklam

Hızlı Menü:


Konuyu Okuyanlar:
1 Ziyaretçi

Anasayfa İletişim Arşiv RSS

Bu site Erkan Yazılım © tarafından desteklenmektedir. 2007-2018