AMP (Accelerated Mobile Pages) ইনস্টলেশন এবং সেটআপ করার জন্য কিছু নির্দিষ্ট পদক্ষেপ অনুসরণ করতে হয়, যাতে AMP পেজ দ্রুত লোড হতে পারে এবং আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত হয়। নীচে AMP ইনস্টলেশন এবং সেটআপের জন্য প্রয়োজনীয় পদক্ষেপ দেওয়া হলো।
১. AMP HTML ফাইল তৈরি করা
AMP পেজ তৈরি করতে আপনাকে বিশেষভাবে AMP HTML ব্যবহার করতে হবে। এটি স্ট্যান্ডার্ড HTML-এর কিছু সীমাবদ্ধতা এবং নির্দিষ্ট বৈশিষ্ট্য নিয়ে কাজ করে।
AMP HTML পেজের জন্য স্ট্রাকচার:
AMP HTML পেজের জন্য একটি সাধারণ স্ট্রাকচার হল:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>AMP Page</title>
<link rel="canonical" href="https://www.yoursite.com/page/">
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
/* AMP স্টাইল এখানে */
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>এটি একটি AMP পেজ</h1>
<amp-img src="image.jpg" width="600" height="400" alt="AMP Image"></amp-img>
</body>
</html>২. AMP JS লোড করা
AMP পেজে JavaScript ব্যবহার সীমিত, এবং AMP JS লাইব্রেরি লোড করা হয় একটি নির্দিষ্ট স্ক্রিপ্ট ট্যাগ দিয়ে, যা পেজের পারফরম্যান্স অপ্টিমাইজ করতে সাহায্য করে। এটি সাধারণত হেড সেকশনে যুক্ত করা হয়।
<script async src="https://cdn.ampproject.org/v0.js"></script>৩. AMP এর জন্য স্টাইলশিট (CSS) সেট করা
AMP পেজে CSS কোডের আকার ৫০ KB এর বেশি হতে পারে না এবং এটি শুধুমাত্র inline স্টাইল হিসেবে দেওয়া যায়। CSS স্টাইলশিট হেড সেকশনে দিতে হবে:
<style amp-custom>
/* AMP স্টাইল */
</style>৪. AMP পেজের ক্যানোনিক URL যুক্ত করা
AMP পেজের সাথে মূল পেজের একটি ক্যানোনিক URL যুক্ত করতে হবে। এটি গুগলকে জানিয়ে দেয় যে, এই AMP পেজটি মূল পেজের একটি দ্রুত সংস্করণ। ক্যানোনিক URL পেজের <head> সেকশনে যুক্ত করতে হবে।
<link rel="canonical" href="https://www.yoursite.com/original-page/">৫. AMP Cache ব্যবহার করা
গুগল AMP Cache ব্যবহার করে AMP পেজের কপি ক্যাশে করে রাখে, যার ফলে পেজ দ্রুত লোড হয়। তবে, এই ক্ষেত্রে AMP পেজের কন্টেন্ট কিভাবে ক্যাশ করা হবে তা গুগল পরিচালনা করে। কোনো অতিরিক্ত কনফিগারেশন এখানে করা হয় না, তবে নিশ্চিত করতে হবে যে পেজটি গুগল সার্চে AMP হিসেবে তালিকাভুক্ত।
৬. AMP প্লাগইন (WordPress এর জন্য)
যদি আপনি WordPress ব্যবহার করে থাকেন, তবে AMP পেজ তৈরি করতে সহজে একটি প্লাগইন ব্যবহার করতে পারেন। WordPress এর জন্য AMP প্লাগইনটি ব্যবহার করার জন্য নিম্নলিখিত পদক্ষেপ অনুসরণ করুন:
- AMP প্লাগইন ইনস্টল করা:
- WordPress ড্যাশবোর্ডে গিয়ে Plugins > Add New এ ক্লিক করুন।
- সার্চ বক্সে "AMP" লিখে সার্চ করুন।
- AMP by AMP Project Contributors প্লাগইনটি ইনস্টল এবং সক্রিয় করুন।
- প্লাগইন কনফিগারেশন:
- প্লাগইন ইনস্টল করার পর AMP অপশনটি WordPress সাইটের ড্যাশবোর্ডে দেখা যাবে।
- এখানে আপনি AMP পেজের লেআউট, ডিজাইন এবং কনফিগারেশন সেট করতে পারবেন।
- প্লাগইনটি স্বয়ংক্রিয়ভাবে AMP পেজ তৈরি করবে এবং আপনার সাইটের পারফরম্যান্স উন্নত করবে।
- AMP স্টাইল কাস্টমাইজ করা:
- প্লাগইন ব্যবহার করলে আপনি স্টাইলশিট কাস্টমাইজ করতে পারবেন। তবে এটি নির্দিষ্ট AMP কোডের মধ্যে থাকবে।
৭. AMP পেজ গুগল সার্চে ইনডেক্স করা
AMP পেজটি গুগল সার্চে ঠিকভাবে প্রদর্শিত হতে হলে আপনাকে AMP পেজের জন্য সঠিক ক্যানোনিক URL এবং AMP HTML সঠিকভাবে সেট করতে হবে। গুগল সার্চ কনসোল ব্যবহার করে AMP পেজের ইন্ডেক্সিং ট্র্যাক করতে পারেন।
গুগল সার্চ কনসোল সেটআপ:
- গুগল সার্চ কনসোলে আপনার ওয়েবসাইট অ্যাড করুন।
- URL Inspection Tool ব্যবহার করে AMP পেজ ইনডেক্স করার জন্য চেক করুন।
- গুগল সার্চ কনসোলের AMP রিপোর্টে গিয়ে AMP পেজের কোনো সমস্যা থাকলে তা ঠিক করুন।
৮. AMP এর জন্য সমর্থিত বৈশিষ্ট্যসমূহ
- AMP-img: ছবির জন্য AMP এর একটি নির্দিষ্ট ট্যাগ। এটি ইমেজ লোডিং অপ্টিমাইজ করতে সাহায্য করে।
<amp-img src="image.jpg" width="600" height="400" alt="AMP Image"></amp-img>- AMP-video: ভিডিও প্লে করার জন্য একটি নির্দিষ্ট ট্যাগ ব্যবহার করুন।
<amp-video width="600" height="400" layout="responsive" controls>
<source src="video.mp4" type="video/mp4">
</amp-video>- AMP-iframe: ওয়েব পেজের ইনলাইন কন্টেন্ট বা এম্বেডেড কন্টেন্টের জন্য।
<amp-iframe width="600" height="400" src="https://www.example.com" frameborder="0" scrolling="no"></amp-iframe>৯. AMP এর জন্য অন্যান্য টুলস
- AMP Validator: AMP পেজটি সঠিকভাবে কাজ করছে কিনা তা যাচাই করতে AMP Validator ব্যবহার করুন। এটি আপনার AMP পেজে কোনো ত্রুটি বা সমস্যার সংকেত দিতে পারে।
সারাংশ:
AMP ইনস্টলেশন এবং সেটআপের মাধ্যমে আপনি মোবাইল ওয়েবসাইটের পারফরম্যান্স এবং লোডিং টাইম উন্নত করতে পারেন। AMP HTML, AMP JS এবং AMP Cache সঠিকভাবে ব্যবহার করলে গুগল সার্চে আপনার সাইটের র্যাঙ্কিং বৃদ্ধি পাবে এবং ব্যবহারকারীরা দ্রুত ওয়েব পেজ লোড করতে সক্ষম হবেন।
AMP (Accelerated Mobile Pages) Framework ডাউনলোড এবং ইনস্টলেশন প্রক্রিয়া বেশ সোজা এবং ডেভেলপাররা এর জন্য একটি নির্দিষ্ট ফ্রেমওয়ার্ক ব্যবহার করে AMP পেজ তৈরি করতে পারেন। AMP প্রকল্পটি গুগল কর্তৃক ওপেন সোর্স হিসেবে তৈরি হওয়ায় এটি ব্যবহার করা এবং ইনস্টল করা বেশ সহজ। নিচে AMP ফ্রেমওয়ার্ক ডাউনলোড এবং ইনস্টল করার ধাপগুলি দেওয়া হল।
AMP Framework ডাউনলোড এবং ইনস্টলেশন
১. AMP HTML ফ্রেমওয়ার্ক ডাউনলোড করা
AMP পেজ তৈরি করতে আপনি AMP HTML ব্যবহার করবেন। AMP HTML একটি নির্দিষ্ট HTML ফরম্যাট যা AMP পেজ তৈরি করতে সাহায্য করে। AMP HTML কোডের জন্য বিশেষভাবে নির্দিষ্ট কিছু ট্যাগ ব্যবহার করা হয়।
- ডাউনলোড না করেও কাজ করা যাবে: আপনি AMP ফ্রেমওয়ার্কের ফাইলগুলো ডাউনলোড করার প্রয়োজন নেই। AMP পেজ তৈরি করতে আপনাকে শুধুমাত্র AMP HTML ফরম্যাট এবং AMP JS লাইব্রেরি ব্যবহার করতে হবে।
- জাভাস্ক্রিপ্ট ফাইল লোড করুন: AMP পেজ তৈরির জন্য আপনাকে AMP JS লাইব্রেরি লোড করতে হবে, যা পেজের উপাদানগুলো দ্রুত রেন্ডার করতে সহায়তা করবে।
<script async src="https://cdn.ampproject.org/v0.js"></script>২. AMP পেজ তৈরি করা
AMP পেজ তৈরি করার জন্য সাধারণ HTML ডকুমেন্টের মতো একটি HTML ফাইল তৈরি করুন, তবে এটি অবশ্যই AMP নির্দিষ্ট HTML ট্যাগ ব্যবহার করবে।
AMP HTML টেমপ্লেট:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>AMP Page Example</title>
<link rel="canonical" href="self.html">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
/* Custom Styles Here */
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to AMP Page</h1>
<amp-img src="example.jpg" width="600" height="400" layout="responsive" alt="Image Example"></amp-img>
</body>
</html>৩. AMP JS লোড করা
AMP পেজে JavaScript এর ব্যবহার সীমিত থাকে, তবে আপনাকে অবশ্যই AMP JS লাইব্রেরি লোড করতে হবে। এটি পেজের দ্রুত রেন্ডারিং নিশ্চিত করবে। যেমন:
<script async src="https://cdn.ampproject.org/v0.js"></script>এটি HTML ডকুমেন্টের <head> সেকশনে যোগ করতে হবে।
৪. AMP CSS লিমিটেশন
AMP পেজের জন্য স্টাইল শীট (CSS) ছোট এবং অপ্টিমাইজড হতে হবে। AMP-এ CSS এর আকার ৫০ KB এর বেশি হতে পারবে না। তাই আপনাকে কোডের আকার ছোট রাখতে হবে।
<style amp-custom>
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
</style>৫. AMP Cache এবং ক্যাশিং সিস্টেম
গুগল AMP Cache ব্যবহার করে পেজগুলো দ্রুত লোড হয়। পেজগুলো গুগলের সার্ভারে ক্যাশ করে রাখা হয়, যার ফলে ব্যবহারকারীরা যখন AMP পেজে প্রবেশ করে, তখন এটি দ্রুত লোড হয়।
৬. প্রয়োজনীয় টুলস এবং লাইব্রেরি
AMP ফ্রেমওয়ার্ক ব্যবহার করার জন্য আপনি কিছু বিশেষ টুল এবং লাইব্রেরি ব্যবহার করতে পারেন:
- AMP Validator: AMP পেজের সঠিকতা পরীক্ষা করার জন্য AMP Validator ব্যবহার করা হয়। এটি নিশ্চিত করবে যে পেজটি AMP স্ট্যান্ডার্ড অনুসরণ করছে।
- AMP Validator টুল: AMP Validator
- AMP Boilerplate Code: AMP প্রকল্পের অফিসিয়াল ওয়েবসাইটে অনেক টেমপ্লেট এবং বয়লারপ্লেট কোড সরবরাহ করা হয়, যা আপনি ব্যবহার করতে পারেন।
- অফিসিয়াল AMP ডকুমেন্টেশন: AMP Docs
৭. AMP পেজ ডেভেলপমেন্ট লাইফসাইকেল
AMP পেজ তৈরি করার পর, ডেভেলপারদের একটি নির্দিষ্ট পদ্ধতিতে সেগুলিকে তৈরি ও পরীক্ষা করতে হয়:
- পেজের গঠন চেক করা: HTML, CSS এবং JavaScript ফাইলের আকার এবং কোডের সঠিকতা নিশ্চিত করা।
- AMP সাইটের পারফরম্যান্স পরীক্ষা: আপনি Google PageSpeed Insights ব্যবহার করে AMP পেজের পারফরম্যান্স পরীক্ষা করতে পারেন এবং যেখানে প্রয়োজন সেখানে অপ্টিমাইজেশন করতে পারেন।
৮. AMP ইনস্টল করা:
AMP পেজ তৈরির জন্য আপনার সিস্টেমে কোনো নির্দিষ্ট ইনস্টলেশন প্রক্রিয়া নেই, তবে আপনি যদি AMP CLI বা AMP DevTools ব্যবহার করতে চান, তাহলে আপনাকে Node.js ইনস্টল করতে হতে পারে।
AMP CLI ইনস্টল করা (Optional):
AMP ডেভেলপমেন্টের জন্য আপনি AMP CLI ব্যবহার করতে পারেন যা Node.js ভিত্তিক। এই টুলটি ইনস্টল করতে হলে নিচের কমান্ড ব্যবহার করুন:
npm install -g @ampproject/toolbox-cliএটি আপনার প্রজেক্টে AMP পেজগুলি দ্রুত তৈরি এবং পরীক্ষা করতে সাহায্য করবে।
সারাংশ
AMP ফ্রেমওয়ার্কের মাধ্যমে মোবাইল-ফ্রেন্ডলি ওয়েব পেজ দ্রুত লোড করা যায়। ইনস্টলেশন প্রক্রিয়া সহজ, তবে ডেভেলপারদের AMP HTML ট্যাগ এবং AMP JS লাইব্রেরি ব্যবহার করে পেজ তৈরি করতে হয়। আপনি AMP পেজ ডেভেলপ করার জন্য কোনো নির্দিষ্ট টুল বা লাইব্রেরি ডাউনলোড না করেও কাজ করতে পারেন, কিন্তু AMP CLI এবং Validator টুল ব্যবহার করলে ডেভেলপমেন্ট আরো সহজ হবে।
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 পেজে রূপান্তরিত করতে পারবেন। এই সেটআপের মাধ্যমে পেজটি মোবাইল ডিভাইসে দ্রুত লোড হবে এবং গুগল সার্চে ভাল র্যাঙ্কিং পাবে।
AMP পেজ তৈরি করতে হলে আপনাকে কিছু নির্দিষ্ট HTML ফরম্যাট অনুসরণ করতে হবে। AMP HTML হলো একটি বিশেষ HTML ফরম্যাট যা কিছু নির্দিষ্ট বিধি এবং কৌশল ব্যবহার করে পেজের লোডিং টাইম কমায় এবং মোবাইল ডিভাইসে দ্রুত লোড হতে সহায়তা করে।
এখানে AMP এর জন্য একটি প্রাথমিক HTML ফরম্যাট দেয়া হলো:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMP Page Example</title>
<!-- AMP runtime script -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP styles (CSS) -->
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50;
}
p {
color: #555;
}
</style>
<!-- AMP font preload -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>
<body>
<header>
<h1>Welcome to AMP</h1>
</header>
<section>
<p>This is an example of an AMP (Accelerated Mobile Pages) HTML page.</p>
<!-- Example of AMP image -->
<amp-img src="https://via.placeholder.com/600x300" width="600" height="300" alt="AMP Image" layout="responsive"></amp-img>
<!-- Example of AMP video -->
<amp-video width="640" height="360" layout="responsive" src="https://www.w3schools.com/html/movie.mp4" controls></amp-video>
</section>
<footer>
<p>AMP Page Example - © 2024</p>
</footer>
</body>
</html>এই HTML ফরম্যাটের মূল উপাদান:
<html amp>:- AMP পেজের জন্য
htmlট্যাগের মধ্যেampঅ্যাট্রিবিউট থাকতে হবে, যা গুগলকে জানায় যে এই পেজটি AMP ফরম্যাটে লেখা হয়েছে।
- AMP পেজের জন্য
<script async src="https://cdn.ampproject.org/v0.js"></script>:- AMP পেজের জন্য গুগলের AMP রUNTIME স্ক্রিপ্ট যা পেজের কার্যক্ষমতা নিশ্চিত করে। এটি অবশ্যই
asyncঅ্যাট্রিবিউট সহ থাকতে হবে যাতে স্ক্রিপ্টটি পেজের লোডিংকে ব্লক না করে।
- AMP পেজের জন্য গুগলের AMP রUNTIME স্ক্রিপ্ট যা পেজের কার্যক্ষমতা নিশ্চিত করে। এটি অবশ্যই
<style amp-custom>:- AMP পেজের স্টাইলিং CSS এর জন্য
<style amp-custom>ট্যাগ ব্যবহার করা হয়। এখানে আপনি পেজের কাস্টম স্টাইলিং নির্ধারণ করতে পারেন। AMP সাইটে স্টাইলশিটের আকার ৫০ KB এর বেশি হওয়া উচিত নয়।
- AMP পেজের স্টাইলিং CSS এর জন্য
<amp-img>:- AMP এ সাধারণ
<img>ট্যাগের পরিবর্তে<amp-img>ট্যাগ ব্যবহার করা হয়। এর মধ্যেwidth,height, এবংlayoutঅ্যাট্রিবিউট থাকা জরুরি।
- AMP এ সাধারণ
<amp-video>:- AMP পেজে ভিডিও প্রদর্শনের জন্য
<amp-video>ট্যাগ ব্যবহার করা হয়। এটি সাধারণ<video>ট্যাগের পরিবর্তে ব্যবহৃত হয়, এবংwidth,height, এবংlayoutঅ্যাট্রিবিউট থাকা জরুরি।
- AMP পেজে ভিডিও প্রদর্শনের জন্য
<meta name="viewport" content="width=device-width, initial-scale=1">:- মোবাইল ডিভাইসের জন্য পেজটি রেসপন্সিভ এবং স্কেলেবল করার জন্য
viewportমেটা ট্যাগটি ব্যবহার করা হয়।
- মোবাইল ডিভাইসের জন্য পেজটি রেসপন্সিভ এবং স্কেলেবল করার জন্য
বিশেষ টিপস:
- AMP পেজে JavaScript ব্যবহার সীমিত থাকে। আপনি কেবল AMP লাইব্রেরি ব্যবহার করতে পারবেন এবং অন্য কাস্টম স্ক্রিপ্টের ব্যবহার করা যাবে না।
- CSS এর আকার ৫০ KB এর মধ্যে থাকতে হবে।
- পেজের লোডিং স্পীড উন্নত করার জন্য কিছু নির্দিষ্ট ট্যাগ এবং কনফিগারেশন অবশ্যই মানতে হবে।
এই HTML ফরম্যাট ব্যবহার করে আপনি AMP পেজ তৈরি করতে পারবেন এবং তা মোবাইল ডিভাইসে দ্রুত লোড হবে।
AMP Validator ব্যবহার করে AMP পেজ চেক করার প্রক্রিয়া খুবই সহজ এবং কার্যকর। এটি AMP পেজের কন্টেন্ট সঠিকভাবে AMP স্ট্যান্ডার্ড অনুসরণ করছে কিনা তা নিশ্চিত করতে সহায়তা করে। AMP Validator একটি টুল যা আপনার AMP পেজকে যাচাই করে এবং নিশ্চিত করে যে পেজটি AMP-এর সমস্ত নিয়ম মেনে চলে।
AMP পেজ চেক করার জন্য AMP Validator ব্যবহারের পদক্ষেপ:
১. AMP Validator ওয়েবসাইটে যান
- AMP পেজ যাচাই করার জন্য প্রথমে AMP Validator ওয়েবসাইটে যেতে হবে। আপনি এটি AMP Validator লিঙ্কে গিয়ে ব্যবহার করতে পারেন।
২. AMP পেজ URL দিন
- AMP Validator ওয়েবসাইটে গিয়ে আপনি আপনার AMP পেজের URL প্রবেশ করান। উদাহরণস্বরূপ, আপনার AMP পেজের URL কিছুটা এইরকম হতে পারে:
https://example.com/amp-page.html - URL ইনপুট করার পর "Validate" বা "Check" বাটনে ক্লিক করুন।
৩. AMP পেজের স্ট্যাটাস চেক করুন
- AMP Validator পেজটি স্ক্যান করবে এবং এটি আপনাকে একটি রিপোর্ট দেখাবে। এখানে দুটি মূল স্ট্যাটাস থাকবে:
- Valid AMP Page: যদি AMP পেজ সঠিকভাবে AMP স্ট্যান্ডার্ড অনুসরণ করে, তবে "Valid AMP Page" বার্তা দেখাবে।
- Invalid AMP Page: যদি পেজের মধ্যে কোনো ত্রুটি থাকে, তবে "Invalid AMP Page" বার্তা দেখাবে এবং সঠিক ত্রুটির বিস্তারিত দেওয়া থাকবে।
৪. ত্রুটি সংশোধন করুন (যদি থাকে)
- যদি পেজটি Invalid হয়, তবে AMP Validator আপনাকে ত্রুটির বিস্তারিত বার্তা দেবে। এটি আপনাকে বলবে কোন অংশে ত্রুটি আছে, যেমন:
- অযাচিত HTML ট্যাগ ব্যবহার।
- JavaScript কোডে সমস্যা।
- AMP নির্দিষ্ট বৈশিষ্ট্যের অভাব (যেমন
amp-imgবাamp-videoট্যাগের ব্যবহার)।
- আপনি ত্রুটির সঠিক অংশ চিহ্নিত করে সেগুলি সংশোধন করতে পারেন।
৫. পুনরায় চেক করুন
- AMP পেজে যেসব ত্রুটি সংশোধন করেছেন, সেগুলোর পরে পুনরায় AMP Validator টুল ব্যবহার করে পেজটি চেক করুন। যদি সবকিছু ঠিক থাকে, তাহলে "Valid AMP Page" বার্তা পাবেন।
৬. ব্রাউজারে AMP পেজ চেক করুন
- আপনি AMP Validator টুলের পাশাপাশি সরাসরি ব্রাউজারেও পেজটি চেক করতে পারেন। ব্রাউজারের Developer Tools এর Console ট্যাবে যদি কোনো AMP ত্রুটি থাকে, তা সেখানে প্রদর্শিত হবে।
AMP Validator এর সুবিধা:
- সহজ ব্যবহার: AMP পেজ যাচাই করার জন্য আপনাকে কোনো বিশেষ সফটওয়্যার ইনস্টল করার প্রয়োজন হয় না। এটি ওয়েব ভিত্তিক টুল, তাই সহজেই ব্যবহার করা যায়।
- ট্রাবলশুটিং: AMP Validator পেজের ত্রুটি এবং সমস্যা চিহ্নিত করতে সহায়তা করে, যা পেজের AMP কমপ্লায়েন্স নিশ্চিত করতে প্রয়োজনীয়।
- রিয়েল-টাইম রিপোর্টিং: ত্রুটিগুলি তাত্ক্ষণিকভাবে রিপোর্ট করা হয়, যা দ্রুত সমাধান করতে সাহায্য করে।
উদাহরণ:
ধরা যাক, আপনি https://example.com/amp-page.html এই URL দিয়ে AMP Validator যাচাই করছেন। যদি পেজে কোনো ভুল থাকে, তাহলে Invalid AMP Page বার্তা দেখাবে এবং নিচে এর বিস্তারিত সমস্যার তালিকা থাকবে, যেমন:
- "Missing
amp-imgtag." - "Invalid
<script>tag usage."
এভাবে AMP Validator ব্যবহার করে আপনি সহজেই আপনার AMP পেজ চেক এবং সংশোধন করতে পারবেন।
Read more
