Cara Menampilkan Rumus Matematika di Blog Valid AMP

Halo sahabat Pena Info, apakah anda sedang mencari cara menampilkan rumus matematika di blog namun tetap valid AMP (Accelerated Mobile Pages)?

Yaa ketika kita ingin membuat blog bertemakan pendidikan matematika, tentu kita harus menampilkan formula-formula atau rumus-rumus matematika agar pembelajaran dapat dipahami.

Biasanya jika tidak ingin terlalu rumit maka dapat menggunakan gambar dalam format jpeg atau png untuk menampilkan rumus tersebut.

Namun cara itu sudah tidak efektif lagi, karena terlalu banyak gambar akan mengakibatkan loading blog semakin berat dan tidak SEO.

Nah bagaimana cara agar blog yang kita punya dapat menampilkan rumus matematika? Tentu kita harus menggunakan script untuk mendukung hal tersebut.

Setelah itu muncul pertanyaan lagi, apakah jika menggunakan script tersebut blog AMP kita akan error?

Untuk menjawab pertanyaan tersebut, Pena Info akan memberikan penjelasan dan langkah-langkah dalam menerapkannya agar valid AMP juga.

Penulisan Rumus Matematika di Blog AMP dengan MathML

Kali ini Pena Info akan memberikan langkah-langkah menerapkan rumus matematika di blog AMP dengan MathML.

Mathematical Markup Language (MathML) adalah sebuah aplikasi XML dimana bahasa pemrograman dengan format markup matematika.

Tujuannya adalah agar dapat mendeskripsikan dan menampilkan formula-formula atau rumus-rumus matematika di dalam sebuah halaman web atau blog.

Penggunaan MathML ini juga direkomendasi oleh World Wide Web Consortium (W3C). Dengan MathML tersebut, maka formula atau rumus matematika akan mudah dibaca dan dimengerti pada saat ditampilkan di halaman postingan blog kita.

Di samping itu penulisan rumus matematika dengan MathML juga akan menjadi semakin mudah, khususnya penulisan rumus pada postingan dengan blog AMP dan tentunya halaman menjadi valid AMP.

Nah, biasanya penulisan rumus matematika itu menggunakan script seperti LaTeX atau lainnya, sehingga ini akan menyebabkan error AMP.

Oleh sebab itu kini tim AMP sudah menyediakan js mathml dimana js tersebut merupakan script yang harus dipasang di blog agar penulisan rumus matematika atau rumus-rumus ilmiah di dalam postingan valid AMP.

Ekstensi amp-mathml ini menggunakan iframe untuk merender rumus-rumus MathML untuk ditampilkan di postingan.

Langkah pertama, silahkan pasang js amp-mathml berikut di atas kode </head> atau pasang setelah js amp lain yang sudah ada di blog anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script async="async" custom-element="amp-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js"></script> 

</b:if>

Kemudian copas kode berikut di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<amp-mathml class='mathmlnodisplay' data-formula='\[ \cos(θ+φ) \]' layout='container'/>

</b:if>

Langkah kedua, untuk menampilkan rumus matematika, silahkan tuliskan kode berikut di postingan mode HTML.

<amp-mathml 

layout="container"  

data-formula="\[ rumus matematika \]"> 

</amp-mathml>

Secara otomatis rumus akan tampil di tengah, namun apabila anda ingin menampilkannya di kiri atau berada pada kalimatnya, maka anda perlu menambahkan inline pada kode tersebut. Contohnya seperti di bawah ini.

<amp-mathml 

layout="container" 

inline data-formula="\[ rumus matematika \]"> 

</amp-mathml>

Sampai di sini anda sudah berhasil memasang kode nya. Selanjutnya bagaimana cara menuliskan rumus matematika agar sesuai dengan yang kita inginkan?

Terapkan langkah berikutnya seperti di bawah ini. Pada tutorial ini Pena Info menggunakan CodeCogs.

Langkah pertama, masuk ke situs codecogs di sini https://www.codecogs.com/eqnedit.php

Selanjutnya, akan muncul tampilan equation editor seperti gambar berikut yang dapat digunakan secara visual maupun langsung menggunakan kode latex.


Langkah kedua, buat rumus sampai tampilan visualnya seperti yang anda inginkan.

Langkah ketiga, copy kode latex nya dan paste di amp-mathml yang sudah anda buat tadi. Contohnya seperti di bawah ini.

<amp-mathml 

layout="container" 

inline data-formula="\[ \frac{9a^{2}b^{5}c}{3ab^{3}c} \]"> 

</amp-mathml>

*TIPS*
Ingat terapkan kode tersebut pada mode HTML di blog anda dan jangan pada mode Compose.

Tetaplah berada pada mode HTML, jika anda sudah pada mode HTML kemudian anda beralih mode Compose dan kembali lagi pada mode HTML maka kode-kode MathML tersebut akan jadi berantakan.

Sekian tutorial kali ini, semoga bermanfaat.