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…

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s