website launch checklist
1.0.0
Hal-hal yang perlu diperiksa ulang sebelum meluncurkan situs web
Sebelum meluncurkan situs web, pastikan bahwa:
Tag alt ("atribut alt" atau "deskripsi alt") adalah atribut yang diterapkan pada gambar yang berfungsi sebagai deskripsi gambar yang tidak terlihat.
Ini mendeskripsikan konten gambar dan digunakan oleh pembaca layar untuk membacakan dengan lantang kepada pengguna tunanetra. Ini juga digunakan oleh mesin pencari karena mereka tidak dapat menafsirkan gambar, mereka mengandalkan deskripsi alt tag. Menggunakan tag alt pada gambar berdampak positif pada peringkat mesin pencari, sehingga bagus untuk SEO. Teks alternatif juga ditampilkan ketika gambar gagal dimuat.
Alt tag harus mendeskripsikan konten gambar dan disarankan panjangnya maksimal 125 karakter.
Contoh:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Jika Anda memiliki lingkungan "staging" atau "dev" maka kemungkinan besar Anda memblokir staging dari pengindeksan.
Jika Anda ingin situs web Anda muncul di hasil pencarian, mesin pencari tersebut akan "mengindeks" situs web Anda. Mesin pencari memiliki "bot" otomatis yang mengunjungi halaman web, "merayapi" konten dan menyimpannya dalam indeks mesin pencari. Itu akan memungkinkan mesin pencari kemudian mengambil hasil pencarian yang paling relevan.
Sebelum meluncurkan, pastikan versi yang akan ditayangkan memungkinkan pengindeksan situs web Anda. Pastikan Anda tidak memiliki tag meta seperti itu di HTML Anda:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesPeriksa juga file robots.txt Anda. Jika Anda ingin mengizinkan semua halaman situs web Anda diindeks, maka robots.txt Anda harus berisi ini:
User-agent: *
Disallow:
Satu hal lagi yang perlu diperiksa adalah konfigurasi Apache/Nginx.
Saat situs web dibagikan ke Facebook atau Twitter, situs web tersebut akan menampilkan thumbnail, judul, dan deskripsi:
Jika Anda ingin website Anda ditampilkan dengan thumbnail, judul dan deskripsi yang benar, Anda harus menambahkan meta tag yang dibutuhkan oleh Facebook dan Twitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Anda dapat menguji tampilan situs web Anda saat dibagikan ke Facebook atau Twitter menggunakan alat berikut:
Debugger Berbagi Facebook
Validator Kartu Twitter
Favicon adalah ikon kecil di dekat judul situs web di tab browser.
Itu membuat situs web mudah untuk mengidentifikasi ketika banyak tab terbuka, melihat riwayat browser dan bookmark. Beberapa mesin pencari, seperti DuckDuckGo menampilkan favicon di dekat URL pada hasil pencarian. Selain meningkatkan kegunaan, ini juga dapat membantu menarik perhatian pengguna di hasil pencarian, sehingga bisa disebut sebagai teknik SEO tidak langsung.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Pengguna dapat menyimpan halaman web ke layar beranda di perangkat seluler. Itu menciptakan ikon untuk situs web, sama seperti ikon aplikasi, mengetuk ikon itu akan membuka situs web di browser.
Pengembang diberi kendali untuk menjadikan pengalaman situs web lebih mirip dengan pengalaman aplikasi asli di seluler. Misalnya, secara default, iOS akan mengatur tangkapan layar situs web sebagai ikon. Namun Anda dapat mengatur desain ikon khusus menggunakan tag meta Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android akan menggunakan nilai "apple-touch-icon" atau favicon (jika tag meta tidak ada) untuk membuat ikon layar beranda.
Jika alat analisis yang Anda gunakan tidak memiliki filter untuk lingkungan, maka Anda akan mencemari analisis situs web Anda dengan hasil pengujian di lingkungan non-produksi. Anda dapat menambahkan filter di alat analisis atau menyematkan kode secara kondisional hanya di lingkungan produksi.
Tag judul menentukan judul situs web. Tag deskripsi meta berisi deskripsi singkat halaman
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >Judul adalah apa yang ditampilkan di hasil mesin pencari, ditampilkan di tab browser dan kartu jejaring sosial saat dibagikan (jika judul terpisah tidak disediakan untuk jejaring sosial).
Deskripsi juga ditampilkan di hasil pencarian. Ini tidak secara langsung digunakan dalam algoritma pemeringkatan, sehingga tidak mempengaruhi peluang untuk muncul dalam hasil pencarian, namun membuatnya lebih mungkin bagi pengguna untuk mengklik situs web Anda dalam hasil. Hal ini akan meningkatkan rasio klik-tayang (RKT) halaman Anda di Google, yang berarti Google akan menganggapnya sebagai hasil yang baik dan akan mendapat peringkat lebih tinggi di hasil pencarian berikutnya.
Jika Anda memiliki tautan ke tautan eksternal di laman web Anda, terutama tautan yang terbuka di tab atau jendela baru, Anda harus menggunakan rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Ada manfaat keamanan dan kinerja dalam melakukannya. Tanpanya, halaman eksternal dapat mengakses objek window Anda menggunakan window.opener . Anda dapat mempelajari lebih lanjut tentang kerentanan apa yang diselesaikan dengan menggunakan noopener di sini: Tentang rel=noopener
Situs web lain mungkin juga berjalan pada proses yang sama dengan laman Anda saat ini, jadi jika laman eksternal menjalankan beberapa JavaScript yang berat, hal ini akan berdampak negatif pada kinerja situs web Anda. noopener mencegahnya juga.
Baca selengkapnya di sini: Manfaat kinerja rel=noopener
Saat Anda membuat banyak perubahan pada situs web Anda atau saat Anda menggunakan banyak perpustakaan eksternal atau kerangka CSS, kemungkinan besar file CSS Anda berisi banyak gaya yang tidak digunakan oleh halaman Anda. Misalnya, Anda mungkin menggunakan satu tema dari beberapa plugin, namun CSS untuk tema lainnya tetap berada di file CSS Anda dan tidak digunakan dan ukuran file stylesheet bertambah.
Anda dapat menghapus semua gaya yang tidak digunakan menggunakan alat yang disebut PurgeCSS. Anda dapat menggunakannya dengan CLI atau menggunakannya di Webpack, Gulp, dll. Ini akan menganalisis halaman Anda, mencocokkan pemilih yang digunakan pada halaman dengan yang ada di file CSS dan menghapus gaya yang tidak digunakan. Pada proyek terbaru saya, yang menggunakan kerangka Tailwind CSS, tentu saja ada banyak utilitas yang tidak saya gunakan. PurgeCSS mengurangi ukuran file app.css saya dari 214KiB menjadi 45.6Kib.
Namun berhati-hatilah, jika plugin secara dinamis membuat elemen pada halaman, PurgeCSS tidak akan mendeteksi gaya elemen tersebut. Namun Anda dapat memasukkan pemilih ke dalam daftar putih dengan meneruskan pemilih atau pola pemilih di konfigurasi, dan Anda juga dapat memasukkan pemilih ke dalam daftar putih dengan menggunakan komentar khusus untuk memasukkan aturan tertentu ke dalam daftar putih. Baca selengkapnya tentang Daftar Putih PurgeCSS.
Ketika browser meminta sumber daya, server dapat menginstruksikan browser berapa lama ia dapat menyimpan, atau "cache", sumber daya tersebut. Saat berikutnya sumber daya diperlukan, ia dapat menggunakan salinan lokal. Ini akan sangat meningkatkan kecepatan dan mengurangi beban pada server. Anda dapat mengonfigurasi server Anda untuk mengembalikan header, yang memberitahukan berapa lama aset akan di-cache:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Anda harus menetapkan usia maksimal berdasarkan seberapa sering aset Anda berubah.
Anda juga dapat mengonfigurasi server Anda untuk menggunakan kompresi, seperti kompresi Gzip, yang akan membuat sumber daya ditransfer lebih cepat. Mengompresi file CSS dengan gzip menghemat sekitar 50-70% ukuran file.
