AMP Validator একটি টুল যা AMP পেজের সঠিকতা যাচাই করতে ব্যবহৃত হয়। AMP Validator পেজের মধ্যে সঠিকভাবে AMP কম্পোনেন্ট এবং এলিমেন্ট ব্যবহার করা হয়েছে কিনা তা চেক করে এবং কোনো syntax errors বা validation errors থাকলে তা রিপোর্ট করে। এই রিপোর্টের মাধ্যমে আপনি আপনার AMP পেজের কোড ঠিক করতে পারবেন।
AMP Validator ব্যবহার করে Syntax Errors ঠিক করার পদক্ষেপ:
১. AMP Validator ব্যবহার করুন
প্রথমে AMP পেজের URL যাচাই করতে AMP Validator ওয়েবসাইটে যান:
- AMP Validator ওয়েবসাইট: https://validator.ampproject.org/
আপনার AMP পেজের URL ইনপুট বক্সে প্রবেশ করান এবং Validate বা Check বাটনে ক্লিক করুন। AMP Validator আপনার পেজ স্ক্যান করবে এবং যদি কোনো ভুল থাকে, তাহলে একটি রিপোর্ট প্রদান করবে।
২. Report দেখুন
যদি আপনার পেজে কোনো syntax error বা validation error থাকে, AMP Validator তা বিস্তারিতভাবে দেখাবে। এই রিপোর্টে error এবং warning-এর বিস্তারিত থাকবে, যার মধ্যে থাকবে:
- Error Type: কোথায় সমস্যা হচ্ছে, যেমন: "Missing
amp-imgtag" বা "Invalid<script>tag". - Line Number: ত্রুটি কোথায় ঘটছে, তার সঠিক স্থান।
৩. Error বা Warning বুঝুন
AMP Validator এর রিপোর্টে যদি কোনো error বা warning থাকে, তা নিচে দেওয়া হবে। যেমন:
- Error Example:
- Missing
amp-imgtag: আপনার ইমেজ ট্যাগ AMP কনফিগারেশন অনুযায়ী সঠিকভাবে দেওয়া হয়নি। - Invalid
<script>tag: AMP পেজে JavaScript সাধারণত সীমিত থাকে, তবে আপনি যদি সাধারণ<script>ট্যাগ ব্যবহার করেন, তবে এটি একটি error হিসেবে রিপোর্ট হবে।
- Missing
- Warning Example:
layoutattribute missing: AMP পেজের মধ্যে ইমেজ, ভিডিও বা অন্যান্য কম্পোনেন্টের জন্যlayoutঅ্যাট্রিবিউট দেয়া উচিত।
৪. Syntax Errors ঠিক করার পদক্ষেপ
একবার যদি আপনি AMP Validator থেকে ত্রুটির রিপোর্ট পান, তবে আপনার কোডে সেগুলোর সমাধান করতে হবে। নিচে কিছু সাধারণ সমস্যা এবং তাদের সমাধান দেওয়া হলো:
- Error:
Missing amp-img tag:- সমাধান: AMP-এ
<img>ট্যাগের পরিবর্তেamp-imgট্যাগ ব্যবহার করতে হবে। সঠিক কোড:
<amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>
- সমাধান: AMP-এ
- Error:
Invalid <script> tag usage:- সমাধান: AMP পেজে সাধারণ JavaScript ব্যবহার করা যায় না, তবে AMP-এ নির্দিষ্ট স্ক্রিপ্টগুলির জন্য
amp-scriptট্যাগ ব্যবহৃত হয়। সঠিক কোড:
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
- সমাধান: AMP পেজে সাধারণ JavaScript ব্যবহার করা যায় না, তবে AMP-এ নির্দিষ্ট স্ক্রিপ্টগুলির জন্য
- Error:
Invalid layout:- সমাধান: AMP কম্পোনেন্টের মধ্যে
layoutঅ্যাট্রিবিউট সঠিকভাবে উল্লেখ করতে হবে। সঠিক কোড:
<amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>
- সমাধান: AMP কম্পোনেন্টের মধ্যে
- Error:
Missing amp-carousel or amp-lightbox:- সমাধান: যদি আপনি carousel বা lightbox ব্যবহার করেন, তাহলে আপনাকে সঠিক AMP কম্পোনেন্ট (যেমন
amp-carouselবাamp-lightbox) সঠিকভাবে ব্যবহার করতে হবে। সঠিক কোড:
<amp-carousel width="300" height="200" layout="responsive" type="slides"> <div><img src="image1.jpg" alt="Image 1"></div> <div><img src="image2.jpg" alt="Image 2"></div> </amp-carousel>
- সমাধান: যদি আপনি carousel বা lightbox ব্যবহার করেন, তাহলে আপনাকে সঠিক AMP কম্পোনেন্ট (যেমন
৫. পুনরায় AMP Validator ব্যবহার করুন
কোড ঠিক করার পর, আবার AMP Validator ব্যবহার করে পেজটি যাচাই করুন। যদি সব ঠিক থাকে, তবে আপনি "Valid AMP Page" বার্তা পাবেন, যা নির্দেশ করে যে পেজটি AMP স্ট্যান্ডার্ড মেনে চলছে।
৬. উদাহরণ: সম্পূর্ণ AMP পেজ ঠিক করা
মূল কোড (ভুল):
<!doctype html>
<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
<img src="image.jpg" width="600" height="400">
</body>
</html>ভুল শনাক্তকরণ: AMP পেজে <img> ট্যাগের বদলে amp-img ট্যাগ ব্যবহার করা প্রয়োজন এবং layout অ্যাট্রিবিউটও প্রয়োজন।
সংশোধিত কোড (সঠিক):
<!doctype html>
<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
<amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>
</body>
</html>এখন, এই কোডটি AMP Validator দ্বারা যাচাই করার পর "Valid AMP Page" বার্তা পেতে হবে।
AMP Validator থেকে প্রাপ্ত ত্রুটির ধরন
- Critical Errors: যেমন
Missing amp-img,Invalid <script>ইত্যাদি। - Warnings: কিছু ছোটখাটো সমস্যাগুলি যেমন
layoutঅ্যাট্রিবিউট অভাব ইত্যাদি। - Informational: যখন পেজে উন্নত বৈশিষ্ট্য বা অপ্টিমাইজেশন প্রস্তাব দেওয়া হয়।
Conclusion
AMP Validator একটি অত্যন্ত কার্যকরী টুল, যা আপনাকে AMP পেজের সঠিকতা যাচাই করতে সহায়তা করে এবং কোনো ত্রুটি থাকলে সেগুলি সঠিকভাবে সংশোধন করতে সাহায্য করে। এটি খুবই গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি AMP পেজ তৈরি করছেন এবং এটি গুগল সার্চ ইঞ্জিন বা অন্য প্ল্যাটফর্মে প্রদর্শিত হতে যাচ্ছে।
Read more
