HTML <meta> name-ominaisuus
Määrittely ja käyttö
name ominaisuus määrittelee metadata-nimen.
name ominaisuus määrittelee content-ominaisuus arvon nimeä.
käyttämällä name ja content ominaisuusname ominaisuus edustaa metadata-tyyppiä, kun taas content ominaisuus tarjoaa arvon.
Seuraavassa taulukossa luetellaan useita esipäätettyjä metadata-tyyppejä.
Huomioitavaa:Jos on asetettu http-equiv-ominaisuusjos asetetaan name ominaisuus
Vinkki:HTML5 on tuonut mukanaan menetelmän, jonka avulla verkkosivun suunnittelijat voivat hallita näkymää <meta>-tagin avulla (katso alla oleva "Aseta näkymä" -esimerkki).
esimerkki
Käytä name-ominaisuutta määrittääksesi HTML-dokumentin kuvausta, avainsanoja ja kirjoittajaa. Määritä myös näkymä, jotta voit hallita sivun kokoa ja skaalausta eri laitteille:
<head> <meta name="description" content="Ilmainen Web-opas"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
syntaksi
<meta name="arvo">
ominaisuuden arvo
| arvo | kuvaus |
|---|---|
| application-name | Määritä sivun edustaman Web-sovelluksen nimi. |
| author |
Määritä dokumentin kirjoittajan nimi. Esimerkiksi: <meta name="author" content="YK Investment"> |
| description |
Määritä sivun kuvaus. Hakukone voi käyttää tätä kuvausta näyttääkseen hakutulokset. Esimerkiksi: <meta name="description" content="Ilmainen Web-opas"> |
| generator |
Määritä yksi dokumentin luomiseen käytettävistä ohjelmistoista (ei käytetä käsin kirjoitettuun sivuun). Esimerkiksi: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Määritä sivulle liittyvät avainsanat, erotettuna pilkulla. Ilmoita hakukoneille sivun sisällöstä. Vinkki:Aina määritä avainsanat (hakukoneiden on luokiteltava sivu). Esimerkiksi: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Hallitse katselutilaa (verkkosivun käyttäjän näkyvä alue). |
Selitys
Lisäksi kuudelle esitäytetylle metatiedotyypille voidaan käyttää metatietolaajennuksia. Vieraile tällä sivulla saadaksesi luettelon ajan tasalla olevista laajennuksista:
http://wiki.whatwg.org/wiki/MetaExtensions
Joissakin laajennuksissa käytetään enemmän, kun taas toiset ovat vain suppean käytön laajennuksia, joita harvoin käytetään. Robots-metatiedot kuuluvat jälkimmäiseen ryhmään. HTML-dokumenttien kirjoittajat voivat käyttää sitä kertoakseen hakukoneille, miten dokumenttia tulisi käsitellä. Esimerkiksi:
<meta name="robots" content="noindex">
Tämä metatietotyyppi tunnetaan kolmella arvolla, joita useimmat selaimet tunnistavat:
- noindex - Merkitsee, että tätä sivua ei tulisi indeksoida
- noarchive - Merkitsee, että tätä sivua ei tulisi arkistoida tai tallentaa välimuistiin
- nofollow - Merkitsee, että hakukoneiden ei tulisi jatkaa hakua tämän sivun linkkien kautta
Käytettävissä olevat metatiedot ovat harvinaisia, joten kehittäjien on suositeltavaa lukea verkossa oleva luettelo ja tarkistaa, mitä voidaan käyttää omassa projektissaan.
Vinkki
Jotta hakukoneet tietäisivät, miten sisältöä luokitellaan ja arvioidaan, menneisyydessä tärkein keino oli käyttää keywords -metatietoja. Nykyään hakukoneiden painoarvo keywords-metatiedoille on vähentynyt merkittävästi, koska ne voidaan käyttää väärin luodakseen harhaanjohtavia kuvauksia sivujen sisällön ja aiheen välisestä yhteydestä. Jos luojat haluavat, että sisältö näyttää paremmalta hakukoneiden silmissä, paras tapa on käyttää hakukoneiden itse tarjoamia ehdotuksia. Useimmat hakukoneet tarjoavat ohjeita sivujen tai koko verkkosivuston optimoimiseksi.
Google: Hakukoneoptimointi (SEO) aloittelijan opas
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Baidu hakukoneoptimointiohjeet
Aseta katselutila
Katselutila on verkkosivun käyttäjän näkyvä alue. Se vaihtelee laitteesta toiseen – se on pienempi puhelimessa kuin tietokoneen näytöllä.
Sinun tulisi sisällyttää kaikki sivuille seuraava <meta> -elementti:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Se tarjoaa selaimelle ohjeita siitä, miten hallita sivun kokoa ja skaalaa.
width=device-width Osa asetuksista määrittää sivun leveyden seuratakseen laitteen näytön leveyttä (eri laitteissa).
initial-scale=1.0 Osa asetuksista määrittää selaimen alkuperäisen lataus缩放级别.
Tämä on esimerkki sivusta ilman näyttöala-metatietotageja, sekä samasta sivusta näyttöala-metatietotageja sisältävä versio:
Vinkki:Jos käytät puhelinta tai tablet-laitetta tätä sivua selatessasi, voit napsauttaa alla olevia kahta linkkiä nähdäksesi eron.
Voit löytääResponsiivinen verkkosivun suunnittelu - näyttöala - opetusOpit lisää näyttöalasta.
Selaimen tuki
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Tuki | Tuki | Tuki | Tuki | Tuki |
