Προτεινόμενα μαθήματα:
Ιδιότητα name του HTML <meta>
name Ορισμός και χρήση
name ιδιότητα που καθορίζει το όνομα των μεταδεδομένων. Η ιδιότητα που καθορίζει είναι ιδιότητα content
χρησιμοποιούνται για να ορίσουν το όνομα της τιμής. name και ιδιότητα content ιδιότητα, μπορεί να χρησιμοποιηθεί για να ορίσει μεταδεδομένα για το έγγραφο. Μεταξύ άλλων,name Η ιδιότητα χρησιμοποιείται για να δείξει τον τύπο των μεταδεδομένων, ενώ ιδιότητα content Η ιδιότητα χρησιμοποιείται για να παρέχει τιμές.
Η παρακάτω τаблицή περιλαμβάνει μερικές προκαθορισμένες τύπους μεταδεδομένων.
Σημείωση:Αν έχει οριστεί ιδιότητα http-equivΑν έχει οριστεί name Ιδιότητες.
Συμβουλή:Το HTML5 εισήγαγε έναν τρόπο, με τον οποίο οι σχεδιαστές ιστοσελίδων μπορούν να ελέγχουν την οπτική περιοχή μέσω του ετικέτας <meta> (την οπτική περιοχή της ιστοσελίδας που είναι ορατή από τον χρήστη) (βλέπε το παράδειγμα "Ρύθμιση οπτικής περιοχής" παρακάτω).
Παράδειγμα
Χρησιμοποιείται η ιδιότητα name για να καθορίσει περιγραφές, λέξεις-κλειδιά και συγγραφείς του έγγραφου HTML. Επίσης, καθορίζεται η οπτική περιοχή, για να ελέγξει το μέγεθος της σελίδας και το ρυθμό κλίμακας για διαφορετικά συσκευές:
<head> <meta name="description" content="Δωρεάν Web Εκμάθηση"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Επενδύσεις"> <meta\s+name="viewport"\s+content="width=device-width,\s+initial-scale=1.0"> </head>
Γλώσσα
<meta name="value">
Αξία του χαρακτηριστικού
| Αξία | Περιγραφή |
|---|---|
| application-name | Καθορίζει το όνομα της Web εφαρμογής που αντιπροσωπεύει η σελίδα. |
| author |
Καθορίζει το όνομα του συγγραφέα του εγγράφου. Για παράδειγμα: <meta name="author" content="YK Επενδύσεις"> |
| description |
Καθορίζει την περιγραφή της σελίδας. Οι μηχανές αναζήτησης μπορούν να επιλέξουν αυτήν την περιγραφή για να εμφανίσουν τα αποτελέσματα της αναζήτησης. Για παράδειγμα: <meta name="description" content="Δωρεάν Web Εκμάθηση"> |
| generator |
Καθορίζει ένα από τα πακέτα λογισμικού που χρησιμοποιούνται για τη δημιουργία εγγράφων (μη χρήσιμο για χειρογράφους σελίδων). Για παράδειγμα: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Καθορίζει τη λίστα των κλειδιών λογισμικού που σχετίζονται με τη σελίδα, διαχωρισμένα με κόμματα. Ενημερώνει τους μηχανές αναζήτησης για το περιεχόμενο της σελίδας. Συμβουλή:请始终规定关键字（搜索引擎需要对页面进行分类）。例如： |
| viewport | 控制视口（网页的用户可见区域）。 |
说明
除了表中的六种预定义的元数据类型，还可以使用元数据扩展。访问此页面可获取一份时常更新的扩展清单：
http://wiki.whatwg.org/wiki/MetaExtensions
有些扩展用得较多，而另外一些则只有很窄的用途，几乎无人使用。robots 元数据显然属于前者。HTML 文档作者可以用它告诉搜索引擎该如何对待该文档。例如：
这个元数据类型有三个大多数浏览器都认识的值：
- noindex - 表示不要索引本页
- noarchive - 表示不要将本页存档或缓存
- nofollow - 表示不要顺着本页的链接继续搜索下去
可用的元数据扩展为数不多，开发者最好读读那份在线的清单，看看有哪些可用于自己的项目。
提示
要告诉搜索引擎如何对内容分类和分等级，过去最主要的手段就是使用 keywords 元数据。现在的搜索引擎对 keywords 元数据的重视程度已大不如前，这是因为它可以被滥用来制作页面内容与相关性的假象。创作者如何希望内容在搜索引擎眼里有所改观，最好的方法是使用它们自己提供的建议。大多数搜索引擎都提供了优化网页或整个网站的指南。
谷歌：搜索引擎优化 (SEO) 新手指南
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
百度：百度搜索引擎优化指南
设置视口
视口是网页的用户可见区域。它因设备而异 —— 它在手机上会比在电脑屏幕上小。
您应该在所有网页中包含以下 元素：
<meta\s+name="viewport"\s+content="width=device-width,\s+initial-scale=1.0">
Προσφέρει οδηγίες στον browser για το πώς να ελέγξει το μέγεθος και την κλίμακα της σελίδας.
width=device-width Προσαρμογή της πλάθου της σελίδας για να ακολουθεί το πλάτος του οθόνης του συσκευής (η πλάθος μπορεί να διαφέρει ανάλογα με τη συσκευή).
initial-scale=1.0 Προσαρμογή της αρχικής κλίμακας που θα φορτώσει ο browser για την ιστοσελίδα.
Αυτό είναι ένα παράδειγμα ιστοσελίδας χωρίς μεταγενέστερο μεταετικτήρα οπτικής κλίμακας, καθώς και η ίδια ιστοσελίδα με μεταγενέστερο μεταετικτήρα οπτικής κλίμακας:
Συμβουλή:Αν χρησιμοποιείτε κινητό ή τάμπλετ για να περιηγηθείτε σε αυτή τη σελίδα, μπορείτε να κάνετε κλικ στα δύο παρακάτω συνδέσμοι για να δείτε τις διαφορές.
Μπορείτε να χρησιμοποιήσετε τα παρακάτωΟδηγός Απαντητικού Σχεδιασμού Ιστοσελίδας - ΠρόσοπτοΕκμάθηση περισσότερων για το Πρόσοπτο.
Υποστήριξη Browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη |
