Urutan tag meta HTML

16

Sebuah perusahaan SEO menyarankan kita mengubah urutan meta tag HTML kita sehingga <title>dan <meta name="description">adalah yang pertama. Mereka mengatakan ini untuk memastikan mesin pencari dapat memanfaatkan kedua tag ini. Saya mendapat kesan bahwa urutan tag di dalam kepala dokumen tidak signifikan. Apakah saya salah? Apakah benar-benar ada mesin pencari yang menganggap bahwa dua tag pertama selalu titledan descriptiondan menyerah mencari mereka jika mereka tidak?

seo html meta-tags Kaivosukeltaja
sumber
Lihat juga di Stack Overflow: Dapatkah urutan penambahan tautan dan meta tag di kepala halaman web memiliki efek buruk?
unor

Jawaban:

15

Anda benar. Urutan tag tersebut tidak masalah untuk SEO. Mereka hanya perlu hadir. Siapa pun yang mengatakan itu jelas tidak mengerti (dan tentu saja menjalankan bisnis SEO. Sigh).

John Conde
sumber
Bisakah Anda memberikan sumber atau studi kasus?
s_hewitt
3
Pendapat saja berdasarkan pengalaman. Berikut adalah diskusi SearchEngineWatch pada topik - urutan tidak masalah: forums.searchenginewatch.com/showthread.php?t=16452
Ciaran
7

Sedangkan untuk keperluan SEO, mungkin benar bahwa urutannya tidak signifikan, tidak benar ketika mempertimbangkan hal-hal lain seperti keamanan, konten (karakter) tampilan, atau kecepatan pemuatan. Sebaiknya pesan kepala halaman secara kasar (anggap HTML5 untuk sintaksis):

<head>

Sejauh ini dalam dokumen, Anda seharusnya tidak menggunakan karakter non-ASCII, jadi pengkodean karakter belum menjadi masalah. Tetapi kemungkinan menggunakan karakter non-ASCII meningkat tajam begitu Anda membuka tag kepala itu. Dengan demikian (dan dengan asumsi bahwa Anda tidak mendeklarasikan pengkodean karakter Anda secara terprogram atau di tingkat server), Anda harus membuat pernyataan selanjutnya deklarasi pengkodean karakter Anda. Ini juga memuaskan parser / browser / agen yang akan mengendus pernyataan penyandian karakter:

  <meta charset="utf-8">

Dua ( X-UA-Compatibledan viewport) berikut ini direkomendasikan oleh orang-orang di Bootstrap (baru-baru ini sebagai v3.3.4). Meskipun saya hampir yakin bahwa rekomendasi ini didasarkan pada kinerja, sebagian besar dari apa yang saya katakan akan bersifat spekulatif:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

Jika Anda berpikir tentang desain / pengembangan perangkat-agnostik (termasuk agen pengguna non-desktop yang lebih kecil), Anda harus memasukkan yang berikut ini:

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

Akhirnya, judulnya:

  <title>Ingenious Page Title</title>

Selanjutnya, Anda menawarkan CSS sesegera mungkin setelah judul (tidak ada 'siang hari' di antara mereka):

  <link rel="stylesheet" href="stylesheet-1.css">
  <link rel="stylesheet" href="stylesheet-2.css">

Jika Anda menggunakan gaya tingkat halaman, mereka akan pergi di sini. Ini sebagian besar karena sifat 'cascading' CSS: yaitu deklarasi gaya terakhir dari tingkat spesifisitas yang identik (seperti dua pernyataan yang menargetkan paragraf p). Untuk membuat override gaya eksternal lebih mudah (yaitu tanpa menggunakan spesifisitas yang lebih besar, atau !important), Anda harus meletakkan gaya tingkat halaman setelah gaya eksternal <link>. Selain itu, umumnya tidak disarankan untuk menggunakan arahan @import dalam gaya tingkat halaman, karena itu akan menghambat pengunduhan bersamaan aset gaya lain:

  <style>body{color:black;}</style>

Ini adalah titik di mana tampaknya paling tepat untuk menaruh meta tag, favicons, dan cruft lainnya. Dapat diperdebatkan bahwa favicons atau aset serupa (misalnya gambar aplikasi iOS) akan dimuat sebelum sebagian besar tag meta, karena itu akan mengunduh aset-aset tersebut mulai lebih cepat.

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-icon.png">
  <meta name="description" content="Some information that is descriptive of the content">
  <meta name="generator" content="Microsoft FrontPage 2002">

Karena itu memblokir / menunda rendering, jika Anda berniat membutuhkan skrip, muat selambat-lambatnya. Jika harus ada di head, Anda dapat memuatnya sebelum tutup head( </head>). Jika Anda dapat memuatnya nanti, taruh sebelum bodytag ditutup ( </body>).

  <script src="script-1.js"></script>
  <script src="script-2.js"></script>
</head>

Tampaknya tidak penting dalam banyak kasus untuk memperhatikan urutan meta tag untuk keperluan SEO, mengingat bahwa bot pengindeksan (yaitu spider mesin pencari) akan menghabiskan seluruh halaman. Kalau tidak, bagaimana mereka akan mengindeks konten halaman, atau memperbarui indeks itu nanti?

Penting bagi saya bahwa untuk semua yang kami pikir kami tahu, dan semua rekomendasi yang kami temukan di web (bahkan dari tempat-tempat seperti Google dan Bing Webmaster Tools, dll.), Situs-situs seperti Amazon, Google dan orang-orang lain yang jelas peduli tentang kenaikan kinerja sangat kecil seperti itu tidak mengikuti aturan ini.

David Eldridge
sumber
Sementara X-UA-Compatible, viewportdan ikon sentuhan Apple masih (relatif) baru pada tahun 2010, semuanya digunakan. HTML5 hanya memengaruhi panjang deklarasi charset. CSS, JS dan pipelining gambar menjadi perhatian saat itu, serta rendering (ulang) halaman setelah penerapan CSS dan JS. Meskipun demikian, saya tidak dapat menemukan informasi ini di satu tempat (di luar headdokumen html), dan setelah menemukan pertanyaan ini, rasanya baik melakukannya di sini.
David Eldridge
Jawaban yang bagus @DavidEldridge. Namun, maukah Anda memperbarui jawaban untuk menyertakan application/ld+jsonskrip untuk data terstruktur? Untuk keperluan kecepatan. Di mana sebaiknya meletakkannya? Haruskah kita memperlakukannya sebagai JavaScriptfile eksternal ?
Brendan Vogt
2

Dari sudut pandang fungsionalitas, hal-hal berikut dari Bootstrap tampaknya merupakan urutan tag meta yang lebih baik: 

    1) <meta charset="utf-8">
    2) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    3) <title></title>
    4) <meta name="description" content="">
    5) <meta name="viewport" content="width=device-width, initial-scale=1">

Menurut orang-orang di Google, yang penting untuk SEO adalah

  1. ramah mobile
  2. judul dan deskripsi
  3. konten yang unik dan bermanfaat

Jika situs Anda tidak ramah seluler, mereka bahkan tidak melihat angka 2) atau 3). Jika ramah mobile, mereka dapat menggunakan judul dan deskripsi ketika mereka mendaftar situs Anda. Tidak ada jaminan untuk itu. Mereka mungkin memutuskan untuk membuat deskripsi sendiri berdasarkan apa yang mereka temukan di situs Anda.

Jika konten Anda dijiplak atau berulang-ulang dan jika Anda mencoba mengisinya penuh dengan kata kunci atau menggunakan teknik 'BlackHat' lainnya, hal-hal itu akan merugikan Anda dan mungkin mencekal Anda.

Michael Moriarty
sumber