ali
Moderator
- Katılım
- 6 Ara 2018
- Mesajlar
- 93
- Tepkime puanı
- 35
- Puanları
- 18
- Yaş
- 35
- Konum
- Almanya
- Web sitesi
- webtiryaki.com
Web sitenizin üst kısmında bulunan ve meta’ları içeren, header elemanına ekleyebileceğiniz tüm etiketleri listeleyen bir Github reposundan bahsedeceğim
Her web sitesinin bir başlığı vardır ve sadece bununla bitmez. Sayfaların header kısmına bir çok meta etiketi vs. eklenmesi gerekir.
Ancak, sıfırdan bir temayı kodluyorsanız, belge başlığınızı biraz genişletmek isteyebilirsiniz.
Web geliştiricileri tarafından kullanılan en yaygın çözümleri temel alan bir içindekiler tablosuyla organize edilen her etiketi listeler. Ayrıca bu listeyi, Get Head Info‘da bulabilirsiniz.
Bazı örnekler:
Recommended Minimum
Aşağıda, herhangi bir web belgesi için temel unsurlar (web siteleri / uygulamalar) verilmiştir:
Elements
Geçerli <head>unsurlar şunlardır meta, link, title, style, script, noscript, ve base.
Bu öğeler, bir belgenin web teknolojileri tarafından nasıl algılanması ve oluşturulması gerektiği hakkında bilgi sağlar. örneğin tarayıcılar, arama motorları, botlar, vb.
Meta
Link
Her web sitesinin bir başlığı vardır ve sadece bununla bitmez. Sayfaların header kısmına bir çok meta etiketi vs. eklenmesi gerekir.
Ancak, sıfırdan bir temayı kodluyorsanız, belge başlığınızı biraz genişletmek isteyebilirsiniz.
Web geliştiricileri tarafından kullanılan en yaygın çözümleri temel alan bir içindekiler tablosuyla organize edilen her etiketi listeler. Ayrıca bu listeyi, Get Head Info‘da bulabilirsiniz.
Bazı örnekler:
Recommended Minimum
Aşağıda, herhangi bir web belgesi için temel unsurlar (web siteleri / uygulamalar) verilmiştir:
Kod:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
The above 2 meta tags *must* come first in the <head>
to consistently ensure proper document rendering.
Any other head element should come *after* these tags.
-->
<title>Page Title</title>Elements
Geçerli <head>unsurlar şunlardır meta, link, title, style, script, noscript, ve base.
Bu öğeler, bir belgenin web teknolojileri tarafından nasıl algılanması ve oluşturulması gerektiği hakkında bilgi sağlar. örneğin tarayıcılar, arama motorları, botlar, vb.
Kod:
<!--
Set the character encoding for this document, so that
all characters within the UTF-8 space (such as emoji)
are rendered correctly.
-->
<meta charset="utf-8">
<!-- Set the document's title -->
<title>Page Title</title>
<!-- Set the base URL for all relative URLs within the document -->
<base href="https://example.com/page.html">
<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">
<!-- Used for adding in-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
// function(s) go here
</script>
<noscript>
<!-- No JS alternative -->
</noscript>Meta
Kod:
<!--
The following 2 meta tags *must* come first in the <head>
to consistently ensure proper document rendering.
Any other head element should come *after* these tags.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Allows control over where resources are loaded from.
Place as early in the <head> as possible, as the tag
only applies to resources that are declared after it.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Name of web application (only should be used if the website is used as an app) -->
<meta name="application-name" content="Application Name">
<!-- Theme Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Short description of the document (limit to 150 characters) -->
<!-- This content *may* be used as a part of search engine results. -->
<meta name="description" content="A description of the page">
<!-- Control the behavior of search engine crawling and indexing -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<!-- Tells Google not to show the sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">
<!-- Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">
<!-- Verify website ownership -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Short description of your document's subject -->
<meta name="subject" content="your document's subject">
<!-- Gives a general age rating based on the document's content -->
<meta name="rating" content="General">
<!-- Allows control over how referrer information is passed -->
<meta name="referrer" content="no-referrer">
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Completely opt out of DNS prefetching by setting to "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Specifies the document to appear in a specific frame -->
<meta http-equiv="Window-Target" content="_value">
<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->- Meta tags that Google understands
- WHATWG Wiki: MetaExtensions
- ICBM on Wikipedia
- Geotagging on Wikipedia
Link
Kod:
<!-- Points to an external stylesheet -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Links to an AMP HTML version of the current document -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
<link rel="manifest" href="manifest.json">
<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt">
<!-- Refers to a copyright statement that applies to the link's context -->
<link rel="license" href="copyright.html">
<!-- Gives a reference to a location in your document that may be in another language -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Provides information about an author or another person -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">
<!-- Links to a document that describes a collection of records, documents, or other materials of historical interest -->
<link rel="archives" href="https://example.com/archives/">
<!-- Links to top level resource in an hierarchical structure -->
<link rel="index" href="https://example.com/article/">
<!-- Provides a self reference - useful when the document has multiple possible references -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- The first, last, previous, and next documents in a series of documents, respectively -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Used when a 3rd party service is utilized to maintain a blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Forms an automated comment when another WordPress blog links to your WordPress blog or post -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- Notifies a URL when you link to it on your document -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Enables posting to your own domain using a Micropub client -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<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 -->
<!-- More info: https://css-tricks.com/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">