سئو برای زندگی

amp
مارک آپی که در زیر آورده شده است، نقطه شروع یا boilerplate خوبی برای این منظور است. این دستورات را در یک فایل با افزونه .html کپی و پیست کنید.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

محتوای بدنه کاملا مشخص و سر راست است ولی کد های جانبی و اضافه بسیاری در هد (head) صفحه وجود دارد که ممکن است در نگاه اول قابل تشخیص نباشد. خوب بگذارید مارک آپ های مورد نیاز را تشریح کنیم

مارک آپ های مورد نیاز اسناد AMP HTML باید:

با doctype  شروع شوند  <!doctype html>
حاوی یک تگ سطح بالای <html ⚡> باشند (<html amp>  هم قابل قبول است)
حاوی تگ <head> و <body> باشند (این تگ ها در html اختیاری هستند)
حاوی یک تگ <link rel="canonical" href="/$SOME_URL" />  در هد باشند که به نسخه معمولی HTML سند AMP HTML اشاره داشته، یا در صورتی که چنین نسخه ای از HTML وجود ندارد، به خودش اشاره داشته باشد.
حاوی یک تگ <meta charset="utf-8"> به عنوان اولین فرزند (Child) تگ هد باشد
حاوی یک تگ <meta name="viewport" content="width=device-width,minimum-scale=1">  در داخل هد تگ باشد. پیشنهاد می شود که علاوه بر آن شامل initial-scale=1 هم باشد.
حاوی یک تگ <script async src="https://cdn.ampproject.org/v0.js"></script>  به عنوان آخرین عنصر در هد باشد (که شامل کتابخانه AMP JS بوده و آن را لود می کند)
حاوی موارد زیر در تگ <head>  باشد:

style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

متا دیتای اختیاری نمونه ما علاوه بر داشتن موارد مورد نیاز، شامل یک تعریف اسکیما (Schema.org) در هد می باشد که برای AMP ضروری نیست ولی برای انتشار محتوا در مکان های مشخص ، مثل ابزار سرچ گوگل موسوم به Google Search news carousel، لازم است
در واقع تمام موارد ضروری و لازم برای ایجاد اولین صفحه AMP همان بود که گفته شد ولی قطعا موارد بیشتری را هم می توان به بدنه اضافه کرد. در بخش های بعد در مورد طریقه اضافه کردن عکس، عناصر AMP دلخواه، طراحی صفحه و ایجاد لایه بندی واکنش گرا (یا ریسپانسیو، Responsive)، توضیح داده خواهد شد.

مرحله 2: وارد کردن عکس

بیشتر تگ های HTML به طور مستقیم در AMP HTML قابل استفاده هستند ولی برخی از آن ها مانند تگ <img> ، قابل جایگزین با تگ های AMP HTML سفارشی یا تغییر یافته، است (و البته برخی از تگ های مشکل ساز نیز کاملاً ممنوع هستند)
کد زیر برای قرار دادن عکس در صفحه است که جهت آشنایی بیشتر با شکل و شمایل مارک آپ اضافی، آورده شده:

<amp-img src="/welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

مرحله 3: تصحیح نحوه نمایش و لایه

همان طور که می دانید AMP ها، صفحات وب هستند و هر گونه سبک (استایل، Style) یا عناصر با استفاده از ویژگی های (Properties) معمول CSS انجام می گیرد. عناصر سبکی (Style elemnts) که از کلاس (Class) یا گزینش گر عناصر در <head> یک استایل شیت درجا (inline Stylesheet) استفاده می کنند، <style amp-custom> نامیده می شوند.

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

همه صفحات AMP فقط می توانند یک استایل شیت تعبیه شده (Embedded stylesheet) داشت باشند و شما می توانید فقط از گزینش گر های مشخصی استفاده کنید.

کنترل لایه AMP در رابطه به کار گیری عناصر در صفحه، از قوانین مشخص و دقیقی پیروی می کند. در یک صفحه HTML معمولی می توانید به صورت ویژه از CSS برای به کار گیری عناصر استفاده کنید. ولی در AMP به دلیل نحوه عملکرد آن، تمام عناصر اندازه مشخصی داشته باشند.

مرحله 4: پیش نمایش و تأیید

پیش نمایش صفحه AMP درست همانند هر سایت استاتیک HTML دیگر است. این کار نیازمند فرآیند یا مراحل خاصی نیست، بنابر این کافی است:
•    آن را به طور مستقیم در مرور گر از فایل سیستم باز کنید. (به دلیل عدم دسترسی به xmlhttprequest ممکن است برخی از عناصر به درستی کار نکنند.)
•    از یک سرور محلی مانند آپاچی 2 (Apache 2) یا نگینکس (Neginx) استفاده کنید (راهنمایی: برای استفاده از یک سرور سریع، سرور ساده HTTP پایتون را اجرا کنید)

سپس مطمئن شوید که صفحه AMP حتما مجاز باشد، چرا که در غیر این صورت توسط پلتفرم های سوم شخص، مانند سرچ گوگل شناخته و طبقه بندی نمی شود. برای تأیید اعتبار:

1.    صفحه خود را در مرور گر باز کنید
2.    عبارت “#development=1” را به URL اضافه کنید. مثلا example,http://localhost:8000/released.amp.html#development=1
3.    Chrome DevTools Console را باز کنید و خطای اعتبار سنجی را بررسی کنید.

مرحله 5: صفحه را برای پیدا شدن و دسته بندی آماده کنید

گاهی ممکن است بخواهید هم نسخه AMP و هم نسخه غیر AMP یک صفحه را (مثلا برای یک مقاله) داشته باشید. در این شرایط باید به این نکته توجه داشته باشید که: اگر سرچ گوگل نسخه غیر AMP صفحه را پیدا کند، چطور باید متوجه وجود نسخه AMP آن هم بشود؟

لینک کرن صفحات با <link>
برای رفع این مشکل، ما اطلاعاتی در مورد صفحه AMP را به صفحه غیر AMP (و بر عکس)، به شکل تگ های<link>  در بخش <head>، اضافه می کنیم.
این عبارت را به صفحه غیر AMP اضافه کرده:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
و این عبارت را نیز به صفحه AMP اضافه می کنیم:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

اگر فقط یک نسخه از صفحه را داشته باشید چطور؟
اگر شما فقط یک صفحه دارید و آن صفحه AMP است، باز هم باید لینک استاندارد (Canonical Link) را به آن اضافه کنید، که البته در این حالت باید به خودش اشاره داشته باشد:
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

حالا شما به صورت محلی صفحه خود را آزموده اید و تمام مشکلات اعتبارسنجی را برطرف کرده اید، یعنی این که اولین صفحه AMP شما آماده است.

5 1 1 1 1 1 1 1 1 1 1 Rating 100% (2 Votes)
sd-logos-part1
sd-logos-part2

منتخب از مشتریان با ارزش ما

مشتریان ما سرمایه ما
themeforest-logo
codecanyon--logo
graphicriver-logo
audiojungle-logo
photodune-logo
activeden--logo