Sekarang ini Pemasaran Konten sangat variatif dan penuh tantangan yang harus dihadapi,karena persaingan semakin ketat dan rumit,segala bentuk SEO yang diterapkan baik itu pada video,semua visualisasi,fotografi dan desain yang mengharuskan segalanya harus tampak sempurna dan terstruktur dengan baik.
Segalanya semakin berkembang,dan menimbulkan permasalahan bagi SEO,ada kesenjangan terhadap keterampilan secara individu,menurut saya hal ini erat kaitannya dengan krisis identitas diri dalam konteks berbagai industri,semuanya seakan saling mengajukan beberapa pertanyaan yang seakan sulit untuk dijawab.seberapa bagusnya diri kita,sejauh mana peranan kita?cara SEO apa yang harus diterapkan dan apakah setiap posting yang kita tulis akan ada artinya bagi pengunjung.
Dua tahap awal yang harus dilakukan
1. Menghitung Anggaran,Waktu,Resource dan skill
2. Mulai mencari tahu dan belajar apa yang di anjurkan penerapannya.
Secara Fakta saya katakan bahwa jika blog anda bermodal kecil,maka SEO-nya hanya dapat bertarung pada kelas Bantam.posting anda hanya jadi pengantri sembako dalam SERP.
Lalu,apakah anda harus menyerahkan SEO anda di tangan nasib,Hey...Wake Up meeen..!,sekarang bukan saatnya bersedu sedan seperti di dalam dunia sinetron hanya karena meratapi SEO anda tidak bisa naik kelas.karena hal tersebut sebenarnya dapat anda siasati,walaupun saya katakan hal itu agak sedikit susah,namun dengan ketekunan dan ketelitian,anda pun PASTI BISA !
Memasarkan Konten yang Powerful pada umumnya dihasilkan dari beberapa orang yang ahli dibidangnya masing-masing,ada si tukang Copywriter,Fotografer,Kreatif Direktur,Si desain Grafis,Videographer,ahli statistik,si tukang peneliti pasar,si tukang program (program back-end dan front-end),
Jadi,untuk kesuksesan pemasaran konten pada onlineshop atau toko online sedikitnya anda harus memiliki 2 atau 3 "si tukang" tersebut.dan hal tersebut tentu perlu biaya yang lumayan gede.
Nah,bagi kita yang berdomisili di indonesia,biasanya untuk mengeluarkan uang terlalu banyak untuk SEO kalimatnya akan berbunyi seperti berikut, " Masa harus mengeluarkan uang yang banyak "hanya" untuk SEO."
 |
| Ilustrasi Konten SEO yang maksimal namun irit biaya dan waktu yang efisien |
pada tahun 2012 lalu saat berada di tanah kelahiran my mother,saya (GeHaGe) sempatkan mengunjungi sebuah konfrensi Searchfest tentang Teknik SEO yang dibawakan oleh Justin Brigg,Justin mengatakan Teknik SEO adalah sebuah subset dari SEO itu sendiri yang akarnya menjorok pada on-site,jika anda adalah pelaku industri,walaupun skalanya masih individu akan tetapi tidak salah jika mulai belajar tentang kode Front-end dan konfigurasi server,karena SEO selalu memainkan perannya untuk suatu keberhasilan pencarian organik,dan itu saja tidak cukup,karena sekarang dunia maya semakin hari semakin dahsyat perubahannya dalam kemajuan,jangan sampai anda tertinggal untuk mengetahui tentang teknik SEO yang baru di kembangkan oleh pakar dunia untuk bisnis online seperti usaha yang sekarang ini anda coba kembangkan.maka dari itu jangan pernah berhenti belajar.
Sedikit kerja dengan hasil maksimal
Sebuah strategi konten akan mampu menghasilkan sebuah konten yang High Quality tapi tetap low budget (waktu dan biaya),salah satu di antaranya adalah dengan memanfaatkan skil teknis,Source dan kerangka kerja untuk membuatnya sedikit lebih low rupiah.
Jenis strategi konten yang anda akan buat tersebut akan :
1. Punya kinerja yang bagus pada SERP
2. Tingkat devaluasi yang minim disetiap update nanti
3. Dapat dibuat oleh anda sendiri
4. Menghasilkan konten yang unik tapi tetap relevan
Manfaatkan Teknis
beberapa situs ternama telah menerapkan teknik ini,dan hasilnya sangat nyata,hanya menggunakan kode Javascript dan visualisai hingga membuat kontennya unik secara keseluruhan.
Konten yang powerfull sebenarnya dapat di olah secara signifikan dengan metode yang sederhana,contoh saja yang dilakukan OKTren dan Trulia,serta site lain dari Indonesia seperti Bola News dan lainnya,mereka membuat konten yang ramah dengan SERP hanya dengan teknik sederhana yaitu pengoptimalan Javascript dan visualisasi.
Mungkin bagi yang pemula yang melihat kode html ini akan berkata, "Jiaaaaaah..mang,rumit amat!",namun sebenarnya anda juga bisa jika mau mencoba dengan sedikit ketelitian dan menyediakan obat sakit kepala buat cadangan.
Harapan saya dengan memposting tentang teknik hack Optimasi SEO agar lebih powerfull ini supaya para blogger di indonesia terutama yang memakai form toko online untuk mengais rejeki demi mencukupi kebutuhan rumah tangga anak dan istri.dan dalam penerapannya di harapkan agar dapat mengubah kebiasaan lama menggunakan konten infografik statis dan semacamnya.
Yang paling penting dalam hal ini adalah anda tidak perlu Mengerti Coding,paling cuma memahami tentang pembuatan Infografik interaktif yang akan saya bahas,walau hasilnya bukan sebuah konten yang terbaik dari yang terbaik,namun konten yang nantinya akan anda olah akan mampu bersaing dengan konten blog lainnya yang lebih mentereng dan sudah berkembang.
Contoh sebuah page infografik interaktif yang akan anda pelajari,Klik gambar untuk melihat contoh bagaimana page informatif secara interaktif bekerja.saya ambil dari presentasi justin briggs.
 |
| Image Source : www.justinbriggs.org akan dibahas tentang cara bagaimana membuatanya |
Meskipun Grafik infografik ini sederhana,namun akan sangat efektif jika digunakan pada blog yang berbasis online shop.Grafik tersebut memakai kode Bootstrap.js dari Google,dan untuk efek 3D-nya menggunakan NVD3.
Bootstrap.js
Penggunaan kode Bootstrap.js dapatmembuat grafik yang interaktif berbasis 3D (Dokumen Data Driven).dan dengan Bootstrap.js anda dimungkinkan untuk membuat bermacam-macam fitur,diantaranya Tooltips,tombol,Collaps,Typeheads,dropdown,tab,progres bar,navbar,table dan lainnya.yang mana kesemuanya itu akan membuat blog anda tampil berbeda.
Salah satu fiturnya yang paling sering digunakan para blog ternama adalah sistem pembagian kolomnya hingga menjadi 20 kolom dalam satu page,seperti fitur yang terdapat dalam microsoft excel,canggih bukan!.
Contoh kode Bootstraps.js untuk 2 kolom
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Membuat landing page,potongan postingan atau microsite akan sangat mudah jika menggunakan Bootstraps.js ini.
Penerapan Bootstraps.js
Untuk membuat kerangka Infografi interaktif,sebagai pendahuluan adalah menerapkan kode basisnya terlebih dahulu.
Letakkan dibawah meta tag yang ada dibawah <head>
<link href="assets/css/bootstrap.css" rel="stylesheet"><link href="assets/css/drinking.css" rel="stylesheet"><link href="assets/css/bootstrap-responsive.css" rel="stylesheet">Kemudian masukkan lagi dibawah <body>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/drinking.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="container-narrow">
<div class="jumbotron">
<h1>Online Gaming & Drinking</h1>
<p class="lead">How many people enjoy having a few beers or some wine, perhaps even a cocktail, while gaming?</p>
</div>
<hr>
<div class="row-fluid">
<div class="span12">
<div class="chart-area"> Tampilan Default Kerangka HTML
body {
padding-top: 20px;
padding-bottom: 40px;
background-color:#F9F2E7;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Top Header */
.jumbotron {
margin: 60px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 60px;
line-height: 1;
color:#8FBE00;
}
/* Graph Area */
.chart-area {
margin: 30px 0;
text-align: center;
}
Dan dengan itu, kami memiliki kerangka dasar dengan sejumlah alat untuk memanfaatkan CSS.
Google Web Font dan Warna
Langkah berikutnya adalah membuat desain.
Sebuah hack praktis untuk non-desainer:
Sekitar 90% dari desain dengan menggunakan tipografi dan skema warna (dan mungkin dengan sedikit gambar). Jika Anda ingin memilih tipografi dan skema warna,pastikan pilih warna yang tepat dan sesuai dengan irama warna desain anda keseluruhan.
Untuk menemukan skema warna yang baik, silahkan kunjungi COLOURlovers kemudian pilih "Web".otomatis anda akan langsung di suguhkan pada pilihan metrik warna yang baik dan sesuai denga tema yang anda sukai,Metrik ini memungkinkan Anda dengan cepat memilah-milah warna yang cocok. anda bahkan tidak perlu repot, karena crowdsourced akan memandu anda dalam menentukannya.
 | ||||
| Contoh pilihan skema warna tema web |
image source: http://www.colourlovers.com
Jika Anda memerlukan bantuan dengan masalah font, anda bisa menemukannya melalui layanan seperti Google Web Font dan Typekit .
Font
Jika Anda perlu bantuan memilih font, anda bisa melihat contoh-contoh pada web atau blog professional lain.biasanya para blogger dengan kemampuan desain yang jauh lebih baik daripada saya
Pelaksanaan teknis dari font sederhana.
Untuk mendapatkan akses ke font-font ini, Anda hanya perlu menghubungkan stylesheet di header.
Setelah itu, font dapat diakses untuk Anda gunakan dalam CSS.
h1 {
font-family: 'Lobster', Georgia, Times, serif;
font-size: 70px;
line-height: 100px;
}
p {
font-family: 'Cabin', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 25px;
}
biasanya tampilannya seperti itu HTML untuk pemilihan warna.
Anda sekarang memiliki kerangka skema warna yang bagus, dan dua font yang digunakan untuk teks konten.
Dokumen Data-Driven (D3)
D3 dapat berkisar dari yang sederhana hingga sangat kompleks.Untuk yang sederhana, saya fokuskan pada grafik yang menggunakan NVD3 . NVD3 membantu membuat grafik yang akan anda gunakan dalam komponen grafik untuk d3.js. disana ada banyak contoh kode-kode yang didemonstrasikan . untuk lebih mudahnya silahkan anda pilih yang sederhana saja,seperti yang saya gunakan pada blog saya.
anda bisa langsung mendownload NVD3 di sini, Anda akan temukan sejumlah besar contoh filenya.File tersebut akan memberikan sebuah kerangka untuk membuat sebagian besar jenis grafik atau diagram yang Anda butuhkan.
Mari kita mulai dengan grafik sederhana untuk menunjukkan betapa mudahnya dalam penerapannya.
sebagai awal, hubungkan sejumlah JS dan file CSS di header Anda.contohnya seperti yang terlihat dibawah ini.
<link href="assets/nvd-src/nv.d3.css" rel="stylesheet" type="text/css">
<script src="assets/lib/d3.v2.js"></script>
<script src="assets/js/nv.d3.js"></script>
<script src="assets/nvd-src/models/legend.js"></script>
<script src="assets/nvd-src/models/pie.js"></script>
<script src="assets/nvd-src/models/pieChart.js"></script>
<script src="assets/nvd-src/utils.js"></script>
<script src="assets/nvd-src/models/multiBarHorizontal.js"></script>
<script src="assets/nvd-src/models/multiBarHorizontalChart.js"></script>
itulah beberapa contoh kode js yang diperlukan untuk membuat konten yang interaktif.
Sebenarnya kode HTML tersebut sangat sederhana. Anda hanya menempatkan baris seperti terlihat dibawah ini dalam kode HTML Anda di mana saat Anda ingin grafik muncul.
<div class="pie"><svg id="drinkmen"></svg></div>
Pasangan tag DIV dan SVG diganti dengan graph JavaScript tersebut.
Setelah langkah ini dilakukan, Anda harus membuat sebuah JavaScript untuk membuatnya menjadi sebuah data yang masuk dalam data variabel. Hal ini dapat dilakukan in-line di bagian bawah halaman, atau di file eksternal. atau meletakkan semua JS kedalam sebuah file eksternal untuk tetap terpisah.
Langkah pertama adalah untuk menetapkan data ke data variabel. Di bawah ini Anda akan melihat bagaimana membuatnya.perubahan yang dibuat dari contoh di sini adalah menyesuaikan nama variabel dan mengubah nilai-nilai kunci dan angka di grafik.
$(document).ready(function(){
var drinkmendata = [
{
key: "Yes",
y: 61.56
},
{
key: "No",
y: 38.44
}
];
var drinkwomendata = [
{
key: "Yes",
y: 40.86
},
{
key: "No",
y: 59.14
}
];
Selanjutnya, Anda tentukan ketinggian dan lebar grafik. Selain itu,jika menginginkan lebih dari satu warna,anda tinggal menambahkannya saja menjadi angka (2)
var chart;
nv.addGraph(function() {
var width = 700,
height = 250;
var colorgroup = d3.scale.ordinal()
.domain(d3.range(2))
.range(["#40C0CB", "#AEE239"]);
contoh lain yang telah dirubah,silahkan modofikasi sendiri menurut keinginan anda
chart = nv.models.pieChart()
.x(function(d) {
return d.key }
)
.y(function(d) {
return d.y }
)
.margin({
top: 0, right: 0, bottom: 0, left: 0}
)
.values(function(d) {
return d }
)
.color(colorgroup.range())
.showLegend(false)
.width(width)
.height(height);
terakhir memilih kode ID dari HTML jika Anda ingin mengganti dari nama data variabel.
Dalam kode di bawah, (#) drinkmen adalah ID dari SVG yang kita tempatkan ke dalam HTML dan akan digantikan oleh grafik, dan "drinkmendata" adalah variabel yang berisi ya / tidak grafik data yang didefinisikan di atas. Selain itu, kode diangkat langsung dari contoh.
d3.select("#drinkmen")
.datum([drinkmendata])
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
}
);
return chart;
}
Sementara itu,anda pahami dulu apa yang saya kemukakan diatas,jika masih ada bagian-bagian yang kurang dimengerti,silahkan saja tanyakan langsung melalui kolom komentar,dengan senang hati saya akan menjawabnya.
terima kasih atas perhatian anda,semoga apa yang anda lakukan akan membuahkan hasil yang maksimal
Tidak ada komentar :
Posting Komentar
Yuk ! Kita budayakan relevansi berkomentar dan tidak membuat SPAM