HTML পেজে AMP সেটআপ করার জন্য আপনাকে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে, যাতে পেজটি গুগল AMP স্ট্যান্ডার্ডস অনুযায়ী লোড হয় এবং মোবাইল ডিভাইসে দ্রুত প্রদর্শিত হয়। AMP পেজ তৈরির জন্য AMP HTML, AMP JS, এবং AMP CSS এর ব্যবহার করা হয়।
নিচে HTML পেজে AMP সেটআপ করার জন্য প্রাথমিক ধাপগুলো দেওয়া হলো:
1. HTML ফাইল তৈরি করা
প্রথমে একটি সাধারণ HTML পেজ তৈরি করুন এবং সেটিকে AMP পেজ হিসেবে কনফিগার করুন।
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMP Page Example</title>
<!-- AMP JS -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP CSS (Optional, but recommended for styling) -->
<style amp-custom>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
</style>
<!-- AMP Analytics (Optional) -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<h1>Welcome to AMP</h1>
<p>This is a simple AMP page example.</p>
<!-- AMP Image -->
<amp-img src="https://via.placeholder.com/600x300" width="600" height="300" layout="responsive" alt="AMP Image"></amp-img>
<!-- AMP YouTube Video (Optional) -->
<amp-youtube data-videoid="M7lc1UVf-VE" layout="responsive" width="480" height="270"></amp-youtube>
</body>
</html>2. AMP HTML ডকটাগ ব্যবহার করা
এটি নিশ্চিত করতে যে HTML পেজটি AMP পেজ হবে, HTML ট্যাগের মধ্যে ⚡ বা amp অ্যাট্রিবিউট যোগ করতে হবে।
<html ⚡>3. AMP JS স্ক্রিপ্ট লোড করা
AMP পেজে JavaScript ব্যবহার করার জন্য, আপনাকে AMP লাইব্রেরি লোড করতে হবে। এটি পেজের <head> সেকশনে যোগ করতে হবে। AMP JS লাইব্রেরি সবসময় async অ্যাট্রিবিউট সহ ব্যবহার করতে হবে।
<script async src="https://cdn.ampproject.org/v0.js"></script>4. AMP কম্পোনেন্ট ব্যবহার করা
AMP পেজে সাধারণ HTML ট্যাগের পরিবর্তে AMP এর নিজস্ব কম্পোনেন্ট ব্যবহার করতে হবে, যেমন: amp-img, amp-video, amp-analytics ইত্যাদি।
AMP ইমেজ:
AMP পেজে ইমেজ যুক্ত করতে হলেamp-imgট্যাগ ব্যবহার করতে হবে।<amp-img src="https://via.placeholder.com/600x300" width="600" height="300" layout="responsive" alt="AMP Image"></amp-img>AMP ভিডিও:
ভিডিও যোগ করতে হলেamp-youtubeবা অন্য ভিডিও প্ল্যাটফর্মের AMP কম্পোনেন্ট ব্যবহার করতে হবে।<amp-youtube data-videoid="M7lc1UVf-VE" layout="responsive" width="480" height="270"></amp-youtube>
5. স্টাইলিং (CSS)
AMP পেজের জন্য আপনাকে AMP CSS ব্যবহার করতে হবে। CSS ফাইলের আকার ৫০ KB এর বেশি হওয়া উচিত নয়। এটি <style amp-custom> ট্যাগের মধ্যে দিতে হবে।
<style amp-custom>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
</style>6. AMP কম্পোনেন্ট যোগ করা (Optional)
যদি আপনি বিশ্লেষণ, বিজ্ঞাপন বা অন্যান্য কাস্টম ফিচার ব্যবহার করতে চান, তবে আপনাকে AMP এর উপযুক্ত কম্পোনেন্ট ব্যবহার করতে হবে। উদাহরণস্বরূপ, AMP অ্যানালিটিক্সের জন্য:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>7. AMP পেজ ভ্যালিডেশন
AMP পেজ তৈরি করার পর, এটি নিশ্চিত করতে হবে যে পেজটি AMP স্ট্যান্ডার্ড অনুসরণ করছে। আপনি গুগল AMP ভ্যালিডেটর ব্যবহার করে AMP পেজের ভ্যালিডেশন চেক করতে পারেন।
ভ্যালিডেশন করতে, AMP পেজের URL গুগল AMP ভ্যালিডেটরে পেস্ট করুন অথবা ব্রাউজারে /amp যোগ করে চেক করুন।
8. AMP ক্যাশে ব্যবহার করা
গুগল AMP ক্যাশে আপনাকে স্বয়ংক্রিয়ভাবে পেজ ক্যাশ করে রাখবে, যার ফলে পেজটি দ্রুত লোড হবে।
9. AMP পেজের লিঙ্ক সরবরাহ করা
AMP পেজের <head> সেকশনে নিচের লিঙ্কটি যোগ করুন, যাতে গুগল ও অন্যান্য সার্চ ইঞ্জিন জানে এটি একটি AMP পেজ:
<link rel="amphtml" href="amp-version.html">এটি গুগলকে জানায় যে, এই পেজটির একটি AMP সংস্করণও আছে এবং এটি মোবাইল ডিভাইসে আরও দ্রুত লোড হবে।
এভাবে, আপনি খুব সহজেই একটি HTML পেজকে AMP পেজে রূপান্তরিত করতে পারবেন। এই সেটআপের মাধ্যমে পেজটি মোবাইল ডিভাইসে দ্রুত লোড হবে এবং গুগল সার্চে ভাল র্যাঙ্কিং পাবে।
Read more
