-
Saya telah membaca banyak artikel tentang optimasi SEO selama periode ini, dan menemukan bahwa kebanyakan dari mereka berbicara tentang pengetahuan dalam tahap operasi, seperti tautan eksternal, tautan internal dalam artikel, peningkatan PR, dan beberapa pembicaraan pengalaman tentang optimasi mesin pencari tertentu . Terlalu banyak artikel semacam ini, jika Anda membaca terlalu banyak, Anda akan merasa sama dan tidak ada kesegarannya. Hari ini saya akan berbicara tentang sesuatu yang baru, terutama tentang beberapa teknik tentang tata letak HTML dalam optimasi SEO. Penulisnya adalah seorang programmer sejak lahir. Jadi apa yang saya tulis sedikit teknis, saya harap Anda dapat memahami saya.
Banyak halaman beranda situs web yang memiliki modul peta panas yang dapat dialihkan dalam bentuk tayangan slide (lihat gambar di bawah)
Modul ini menempati 70% situs web domestik, termasuk situs web penulis.Kode untuk efek ini sering kali berada di bagian depan struktur dokumen HTML, yang paling umum ada di bawah bilah navigasi Script JS, kode layout yang paling umum digunakan adalah sebagai berikut:
<div kelas="spanduk">
<objek>
versi FLASH
</objek>
</div>
<div kelas="spanduk">
<skrip tipe="teks/javascript">
Versi Javascript
</skrip>
</div>
Penulis berpendapat jika kode di atas disisipkan di bagian depan HTML, tidak hanya akan merugikan optimasi SEO, tetapi juga sangat menyedihkan bagi pengguna awam. Kerugian dari SEO adalah: seperti yang diketahui oleh sobat webmaster, bagian depan dari dokumen HTML Inilah yang lebih dihargai oleh mesin pencari. Jika Anda menggunakan JS atau FLASH untuk mengimplementasikannya, meskipun kode-kode ini tidak dapat dikenali oleh mesin pencari, bagian penting lainnya dapat ditampilkan ke mesin pencari terlebih dahulu, dan hal-hal yang tidak dapat dikenali ini akan ditampilkan. Nanti. Hal buruknya bagi pengguna biasa adalah efek ini biasanya memerlukan peralihan antara 4 hingga 5 gambar, dan ukuran total gambar ini setidaknya sekitar 200KB. Baik Anda menggunakan JS atau FLASH untuk mengimplementasikannya, selama Anda menyematkannya dalam sebuah Dokumen HTML, pengguna Anda harus menunggu sampai hal-hal ini dimuat. Apalagi jika gambarnya berukuran besar, kemungkinan besar akan tersangkut di area kepala sehingga menyebabkan browser macet. Ini adalah hal yang paling menakutkan bagi pengguna.
Selama periode ini, penulis merangkum beberapa solusi dan melalui pengamatan jangka panjang, praktik telah membuktikan bahwa solusi ini baik-baik saja, peringkatnya tidak terpengaruh, dan inklusinya normal. Saya dengan berani membagikannya kepada semua orang di sini.
1. Penyesuaian urutan struktural
Berdasarkan pengalaman penyusunan huruf dan tata letak sebelumnya, kode kita akan terlihat seperti ini:
Kode HTML:
<tubuh>
<div kelas="wadah">
<div class="header">Konten tajuk</div>
<div class="banner">Modul efek tayangan slide</div>
<div class="content">Konten teks</div>
<div class="copyright">Bagian hak cipta</div>
</div>
</tubuh>
Kode CSS:
isi {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.header {height:200px;line-height:200px;background:red;}
.banner {height:150px;line-height:150px;background:kuning;}
.content {height:400px;line-height:400px;background:blue;}
.hak cipta {height:50px;line-height:50px;background:green;}
Kode perbaikan penulis adalah sebagai berikut:
Kode HTML:
<tubuh>
<div kelas="wadah">
<div class="header">Konten tajuk</div>
<div class="content">Konten teks</div>
<div class="copyright">Bagian hak cipta</div>
<div class="banner">Modul efek tayangan slide</div>
</div>
</tubuh>
Kode CSS:
isi {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.header {height:200px;line-height:200px;background:red;}
.banner {posisi:absolute;atas:200px;lebar:980px;tinggi:150px;tinggi garis:150px;latar belakang:kuning;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}
.hak cipta {height:50px;line-height:50px;background:green;}
Melalui analisis komparatif kode di atas, saya sebenarnya menggunakan teknik tata letak Posisi mengambang di CSS. Anda dapat menemukan informasi yang relevan tentang tata letak Posisi mengambang. Pastikan untuk menguasai poin pengetahuan ini, yang sangat berguna untuk optimasi SEO.
2. Gunakan pemuatan tertunda dengan terampil
Kode HTML:
<tubuh>
<div kelas="wadah">
<div class="header">Konten tajuk</div>
<div class="content">Konten teks</div>
<div class="copyright">Bagian hak cipta</div>
<div kelas="banner"></div>
</div>
</tubuh>
Kode jQuery:
$(dokumen).siap(fungsi() {
jendela.setTimeout(fungsi() {
versi FLASH
$(".banner").html("<object>Di sinilah kode FLASH dimasukkan</object>")
versi Ajax
$.mendapatkan(" http://www.flagwind.com/GetBanner.html ", fungsi(data){
$(".banner").html(data);
});
}, 3000);
});
Arti umum dari kode Jquery ini adalah setelah dokumen dimuat, setelah 3 detik, jalankan permintaan AJAX atau yang lainnya untuk mengontrol konten di DIV banner.
Kode dari dua solusi di atas hanyalah beberapa contoh. Anda dapat menggunakannya di tempat lain, memuat beberapa konten yang tidak ada hubungannya dengan SEO nanti, atau menggunakan JS untuk menunda pemuatan untuk ditampilkan mesin. Namun, ini juga merupakan hal yang baik untuk pengguna biasa. Artikel ini awalnya dibuat oleh konstruksi situs web Shenzhen Flagwind Network www.flagwind.com . Harap jangan menghapus informasi hak cipta penulis asli saat meneruskan, terima kasih!
Terima kasih kepada Jaringan Shenzhen Qifeng atas kontribusinya