Membuat Image Sitemap di Django

Sudah pernah dengar istilah image sitemap? Saya sendiri baru saja praktik membuat image sitemap dengan menggunakan bantuan jinja2. Sitemap ini intinya adalah memberi tahu Google sebagai mesin pencari bahwa pada sebuah kita memiliki daftar gambar yang "layak" untuk dimasukkan ke dalam index.


Sekilas Jinja2


Sebelum ke masalah utama, mari kita berkenalan dulu dengan template engine jinja2, bagaimana dengan template engine ini kita dapat membuat konten secara dinamis sesuai dengan context yang kita berikan.

Contoh kode untuk membuat template dengan jinja2:
from jinja2 import Environment, FileSystemLoader

# memanggil file template
BASE_DIR = os.path.dirname(__file__)
env = Environment(loader=FileSystemLoader(os.path.join(BASE_DIR, 'templates')))
template = env.get_template('miawaw.tmpl')

# contoh konteks
context = {
'nama': ', 'kholidfu',
}

# render context ke dalam template
output_from_parsed_template = template.render(context)

# menulis context ke dalam file miawaw.txt
envpath = os.path.join(BASE_DIR, 'miawaw.txt')
with open(envpath, 'w') as f:
f.write(output_from_parsed_template)

Sesuai dengan kode di atas, di dalam direktori templates kita buat dulu file miawaw.tmpl dengan isi misalnya sebagai berikut:
Halo, perkenalkan saya {{ nama }}

Jalankan script di atas, kemudian liat isi dari file miawaw.txt, bila tidak ada pesan kesalahan variable {{ nama }} akan berubah menjadi 'kholidfu':
Halo, perkenalkan saya kholidfu

Membuat image sitemap dengan jinja2


Secara konsep sama dengan script di atas, yang membedakan tentunya adalah file template, yang dalam hal ini ber-tipe xml. Berikut ini contoh berkas image-sitemap.xml saya:
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/static/sitemap.xsl"?><urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

{% for d in data %}
<url>
<loc>http://{{ DOMAIN_URL }}/{{ d['slug'] }}.html</loc>
<changefreq>daily</changefreq>
<priority>1.0</priority>
{% for i in d['images'] %}
<image:image>
<image:loc><![CDATA[ http://{{ DOMAIN_URL }}/asset/{{ i['path'] }} ]]></image:loc>
</image:image>
{% endfor %}
</url>
{% endfor %}
</urlset>

Kode di atas sekedar contoh saja, intinya saya melakukan looping terhadap tiap row yang ada di database, kemudian dari masing-masing row, cari image[s]-nya (jika ada). Tentu proses fetch data harus disesuaikan dengan model database Anda.

Satu hal lagi yang tidak kalah penting adalah, tag CDATA, fungsi tag ini adalah memberi tanda ke xml renderer (misal browser) bahwa data yang berada dalam tag tersebut adalah plaintext, jadi jika didalam tag tersebut ada tanda misalnya "&" yang sebenarnya memiliki arti khusus bagi xml, maka renderer akan menganggap data tersebut adalah data plaintext.

Sekian...

 

Comments

Popular posts from this blog

Adding Image Alternate Text into WordPress Image Attachment using python-wordpress-xmlrpc Library

Keutamaan Tidur yang Sedikit Menurut para Ulama

Kisah Nabi Uzair a.s.