AMP (Accelerated Mobile Pages) পেজ তৈরির জন্য কিছু নির্দিষ্ট ট্যাগ এবং কাঠামো রয়েছে, যা অবশ্যই ব্যবহার করতে হয়। এগুলি AMP পেজের ফাংশনালিটি এবং পারফরম্যান্স নিশ্চিত করতে সহায়ক। এখানে AMP পেজ তৈরির জন্য প্রয়োজনীয় কিছু মূল ট্যাগের আলোচনা করা হল:
1. <!DOCTYPE html>
- ডকটাইপ (DOCTYPE): AMP পেজের জন্য HTML ডকটাইপ অবশ্যই
<!DOCTYPE html>হওয়া উচিত, যাতে ব্রাউজার বুঝতে পারে যে এটি একটি HTML5 পেজ এবং AMP প্রযুক্তি ব্যবহার করা হচ্ছে।
<!DOCTYPE html>2. <html ⚡>
- AMP HTML রুট ট্যাগ: AMP পেজের প্রধান HTML ট্যাগে
⚡(থান্ডারবোল্ট চিহ্ন) চিহ্নটি থাকতে হবে, যা AMP প্রযুক্তি ব্যবহৃত হচ্ছে তা ব্রাউজারকে জানায়। এটি AMP পেজের একটি বিশেষ বৈশিষ্ট্য।
<html ⚡ lang="en">- এখানে
lang="en"প্যারামিটার ব্যবহার করে পেজের ভাষা নির্ধারণ করা হয়। আপনি এটি আপনার পেজের ভাষা অনুসারে পরিবর্তন করতে পারেন (যেমন:lang="bn"বাংলা ভাষার জন্য)।
3. <head>
- হেড সেকশন: AMP পেজের হেড সেকশনটি অন্যান্য HTML পেজের মতোই থাকে, তবে এখানে কিছু নির্দিষ্ট নিয়ম মেনে কাজ করতে হয়।
- একটি AMP পেজের হেডে কিছু অতিরিক্ত ট্যাগ থাকতে হবে যেমন
amp-font,metaট্যাগ, এবং AMP সাপোর্টেড স্ক্রিপ্ট।
প্রয়োজনীয় হেড ট্যাগগুলির মধ্যে কিছু:
<meta charset="utf-8">: পেজের ক্যারেক্টার এনকোডিং সেট করার জন্য।<meta name="viewport" content="width=device-width, initial-scale=1">: মোবাইল ডিভাইসে রেসপন্সিভ ডিজাইন নিশ্চিত করতে।<script async src="https://cdn.ampproject.org/v0.js"></script>: AMP JS লাইব্রেরি লোড করতে।
উদাহরণ:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Page Example</title>
</head>4. <body>
- বডি সেকশন: AMP পেজের বডি সেকশন সাধারণ HTML পেজের মতো থাকে, তবে এতে কিছু নির্দিষ্ট বিধি রয়েছে।
- AMP পেজে শুধুমাত্র অনুমোদিত HTML ট্যাগ এবং উপাদান ব্যবহার করা যাবে, যেমন:
<amp-img>,<amp-video>,<amp-ad>, ইত্যাদি। সাধারণ<img>,<script>,<iframe>এর মতো ট্যাগগুলো ব্যবহার করা যাবে না।
প্রয়োজনীয় ট্যাগগুলির মধ্যে কিছু:
<amp-img>: ইমেজ ডিসপ্লে করতে।<amp-video>: ভিডিও কন্টেন্ট প্রদর্শন করতে।<amp-ad>: বিজ্ঞাপন প্লেসমেন্টের জন্য।
উদাহরণ:
<body>
<h1>Welcome to AMP Page</h1>
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>AMP পেজের একটি সাধারণ উদাহরণ:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Example</title>
</head>
<body>
<h1>Welcome to AMP!</h1>
<amp-img src="https://example.com/image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>সংক্ষেপে:
<!DOCTYPE html>: HTML ডকটাইপ ডিফাইন করা।<html ⚡>: AMP HTML পেজের রুট ট্যাগ (⚡ চিহ্ন দিয়ে AMP প্রযুক্তি চিহ্নিত করা)।<head>: মেটা, স্ক্রিপ্ট এবং অন্যান্য ট্যাগ যা পেজের মেটাডেটা ধারণ করে।<body>: পেজের মূল কনটেন্ট যেখানে উপাদানগুলি যেমন ইমেজ, ভিডিও, টেক্সট থাকে।
এগুলো AMP পেজ তৈরির জন্য প্রাথমিক ও গুরুত্বপূর্ণ ট্যাগ, যা AMP পেজের দ্রুত লোডিং এবং ফাংশনালিটি নিশ্চিত করতে সহায়ক।
Content added By
Read more
