E-commerce Websites এ AMP (Accelerated Mobile Pages) পেজ তৈরি করার জন্য বিশেষ কিছু কৌশল ও টুলস রয়েছে, যা পেজ লোডিং টাইম কমাতে, মোবাইল ব্যবহারকারীদের অভিজ্ঞতা উন্নত করতে এবং সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) উন্নত করতে সহায়তা করে। AMP প্রযুক্তি ব্যবহার করে ই-কমার্স সাইটগুলোর পণ্য পেজ এবং ক্যাটালগ পেজগুলোকে দ্রুত লোড করা যায়, যার ফলে বিক্রির সম্ভাবনা বাড়ে এবং ব্যবহারকারীরা দ্রুত শপিং অভিজ্ঞতা পান।
নিচে E-commerce Websites-এর জন্য AMP পেজ তৈরি করার প্রক্রিয়া এবং কিছু গুরুত্বপূর্ণ দিক আলোচনা করা হলো:
AMP পেজ তৈরি করার পদক্ষেপ
1. AMP HTML ফাইল তৈরি
- AMP HTML হল AMP পেজের মূল কাঠামো। এটি সাধারণ HTML পেজের মতোই কিন্তু কিছু বিশেষ নিয়ম রয়েছে, যেমন, কিছু নির্দিষ্ট ট্যাগ এবং বৈশিষ্ট্য ব্যবহার করতে হবে।
- E-commerce সাইটের জন্য পণ্য পৃষ্ঠাগুলোর মূল তথ্য (পণ্য নাম, দাম, বর্ণনা, ছবি ইত্যাদি) প্রি-রেন্ডার করা উচিত যাতে পেজ দ্রুত লোড হয়।
একটি সাধারণ AMP HTML পেজের উদাহরণ:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Product Page</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="stylesheet" href="styles.css">
<script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>
</head>
<body>
<h1>Product Name</h1>
<amp-img src="product-image.jpg" width="600" height="400" alt="Product Image"></amp-img>
<p>Price: $99.99</p>
<p>Description of the product goes here.</p>
<form method="POST" action="/add-to-cart">
<button type="submit">Add to Cart</button>
</form>
</body>
</html>এই কোডের মধ্যে:
<script async src="https://cdn.ampproject.org/v0.js"></script>AMP JS লাইব্রেরি লোড করে।<amp-img>ট্যাগের মাধ্যমে ইমেজের দ্রুত লোড নিশ্চিত করা হয়।- ফর্ম সাবমিশনের জন্য
method="POST"ব্যবহার করা হয়।
2. AMP CSS ফাইল তৈরি
- AMP পেজের CSS ফাইলের আকার ৫০ কিলোবাইটের বেশি হওয়া উচিত নয়। AMP ডকুমেন্টের স্টাইল কাস্টমাইজ করার জন্য AMP CSS ব্যবহার করা হয়।
- শুধুমাত্র
amp-customক্লাসের মাধ্যমে কাস্টম CSS স্টাইল যোগ করা যাবে।
CSS ফাইলের একটি উদাহরণ:
amp-img {
max-width: 100%;
height: auto;
}
button {
background-color: #ff6600;
padding: 10px 20px;
border: none;
color: white;
}3. AMP Components (কম্পোনেন্টস) ব্যবহার
- E-commerce পেজে বিভিন্ন ধরনের AMP কম্পোনেন্ট ব্যবহার করতে হবে, যেমন:
<amp-form>: ব্যবহারকারীদের ফর্ম সাবমিট করার জন্য।<amp-carousel>: পণ্যের ছবির গ্যালারি প্রদর্শনের জন্য।<amp-list>: ডাইনামিক কন্টেন্ট লোড করার জন্য, যেমন পণ্যের তালিকা বা ক্যাটালগ।
একটি উদাহরণ:
<amp-carousel width="600" height="400" layout="responsive">
<amp-img src="product1.jpg" width="600" height="400" alt="Product Image 1"></amp-img>
<amp-img src="product2.jpg" width="600" height="400" alt="Product Image 2"></amp-img>
<amp-img src="product3.jpg" width="600" height="400" alt="Product Image 3"></amp-img>
</amp-carousel>4. AMP for E-commerce Features
- Add to Cart: পণ্য পৃষ্ঠায় একটি
Add to Cartবাটন তৈরি করুন, যা ব্যবহারকারীর জন্য সহজ এবং ইন্টারঅ্যাকটিভ হবে। AMP ফর্ম এবং বাটন দিয়ে এই ফিচার তৈরি করা যায়। - Product Details: পণ্যের বিস্তারিত তথ্য যেমন নাম, দাম, বর্ণনা, এবং ছবি গুলি AMP সাইটে দ্রুত লোড করতে হবে। এই তথ্যগুলো AMP Cache ব্যবহার করে কাস্টমাইজ এবং ক্যাশে করা যাবে।
5. AMP Cache Integration
- গুগলের AMP Cache ব্যবহার করে পেজের দ্রুত লোডিং নিশ্চিত করা হয়। গুগল AMP পেজের কনটেন্ট ক্যাশে করে রাখে, যাতে ব্যবহারকারীরা যখন সাইটে আসেন, তারা দ্রুত পেজ লোড দেখতে পান।
AMP Cache URL Example:
<link rel="canonical" href="https://yourstore.com/product-page">
<meta name="amp-html" content="https://yourstore.com/amp/product-page">6. SEO Optimization
- AMP পেজগুলি গুগল সার্চে উচ্চ র্যাঙ্কিং পেতে সাহায্য করে, কারণ এটি মোবাইল ফ্রেন্ডলি এবং দ্রুত লোড হয়।
- Canonical Tag ব্যবহার করে মূল পেজ এবং AMP পেজের মধ্যে সম্পর্ক নির্ধারণ করতে হবে।
<link rel="canonical" href="https://yourstore.com/product-page">7. Analytics Integration
- AMP পেজে Google Analytics ইন্টিগ্রেশন করার জন্য AMP Analytics ব্যবহার করতে হবে, যাতে আপনি পেজের ভিজিটর এবং ইন্টারঅ্যাকশন ট্র্যাক করতে পারেন।
Google Analytics Integration Example:
<amp-analytics type="googleanalytics" config="https://www.google-analytics.com/analytics.js">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>E-commerce Websites এ AMP এর সুবিধা
- দ্রুত লোডিং: AMP পেজগুলি বিশেষভাবে মোবাইল ডিভাইসে দ্রুত লোড হয়, যা ব্যবহারকারীদের জন্য একটি মসৃণ এবং দ্রুত শপিং অভিজ্ঞতা প্রদান করে।
- SEO উন্নতি: AMP পেজগুলি গুগল সার্চে উচ্চ র্যাঙ্কিং পায়, কারণ এটি মোবাইল-ফ্রেন্ডলি এবং দ্রুত লোড হয়।
- ব্যবহারকারী অভিজ্ঞতা: দ্রুত লোড হওয়া পেজ ব্যবহারকারীদের আরও বেশি সময় সাইটে রাখে, যা ই-কমার্স সাইটগুলির জন্য গুরুত্বপূর্ণ।
- Conversion বৃদ্ধি: দ্রুত পেজ লোড হওয়ার কারণে, ব্যবহারকারীরা কম সময় ব্যয় করে পণ্য ক্রয়ে আগ্রহী হন, ফলে বিক্রির হার বাড়ে।
উপসংহার
E-commerce Websites এ AMP পেজ তৈরি করার মাধ্যমে পণ্য পৃষ্ঠাগুলি দ্রুত লোড করা যায়, মোবাইল ব্যবহারকারীদের জন্য পারফরম্যান্স উন্নত করা যায় এবং SEO এর মাধ্যমে সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত করা যায়। এর ফলে শপিং অভিজ্ঞতা উন্নত হয় এবং বিক্রির সম্ভাবনা বৃদ্ধি পায়। AMP প্রযুক্তি ব্যবহার করে আপনি আপনার ই-কমার্স সাইটের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারেন।
Read more
