كيف تنشر قصه جوجل الجديدة AMP Stories على موقعك

كيف تنشر قصه جوجل الجديدة AMP Stories على موقعك

بدأت جوجل منذ مطلع الشهر الحالي في تقديم طريقة جديدة لنشر الاخبار عبر محرك البحث الخاص بها.

الطريقة الجديدة تعتمد بشكل رئيسي على تقنية AMP او الصفحات الفورية التي تتيح الوصول للمحتوى بمنتهى السرعة.

وتختصر هذه التقنية في وقت الوصول الى الصفحات عن طريق ضغط المحتوى.

واطلقت جوجل على هذه الطريقة الجديدة اسم القصص (ستوريز) .

وقالت جوجل انها ستعتمد على عدد من المصادر لتقديم قصص بهذا الشكل خلال الفترة القادمة .

كيف تنشر قصه جوجل الجديدة AMP Stories على موقعك

يمكنك اختبار هذه التقنية الجديدة على موقعك ، من خلال اضافة مجلد واحد الى الموقع مع القيام بالتعديل عليه.

الشرح قدمه موقع search wilderness.

اولا : محتوى ملف AMP ، يمكنك التعديل عليه وفق قصة موقعك

<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Daily Search Forum Recap: February 13, 2018</title>
<link rel=”canonical” href=”pets.html”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<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>
<script async custom-element=”amp-story” src=”https://cdn.ampproject.org/v0/amp-story-0.1.js”></script>
<link href=”https://fonts.googleapis.com/css?family=Oswald:200,300,400″ rel=”stylesheet”>
<style amp-custom>
amp-story {
font-family: ‘Oswald’,sans-serif;
color: #fff;
}
amp-story-page {
background-color: #000;
}
h1 {
font-weight: bold;
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
}
p {
font-weight: normal;
font-size: 1.3em;
line-height: 1.5em;
color: #fff;
}
q {
font-weight: 300;
font-size: 1.1em;
}
amp-story-grid-layer.bottom {
align-content:end;
}
amp-story-grid-layer.noedge {
padding: 0px;
}
amp-story-grid-layer.center-text {
align-content: center;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.banner-text {
text-align: center;
background-color: #000;
line-height: 2em;
}
</style>
</head>
<body>
<amp-story standalone bookend-config-src=”bookend.json”>
<amp-story-page id=”cover” auto-advance-after=”2s”>
<amp-story-grid-layer template=”fill”>
<amp-img src=”assets/barry.jpg”
width=”720″ height=”1280″
layout=”responsive”>
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template=”vertical”>
<h1>Daily Search Forum Recap: February 13, 2018</h1>
<p>By Barry Schwartz</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-one”>
<amp-story-grid-layer template=”vertical”>
<h1 animate-in=”fly-in-top”>People Also Search</h1>
<p animate-in=”fly-in-left”>After Months Of Testing, Google Launches People Also Search For Box</p>
<amp-img src=”assets/answer-serp.png”
width=”640″ height=”395″
layout=”responsive”>
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-two”>
<amp-story-grid-layer template=”vertical”>
<h1 animate-in=”fly-in-top”>AMP Stories</h1>
<p animate-in=”fly-in-left”> Google Launches AMP Stories & Visual Stories In Mobile Search</p>
<amp-img src=”assets/amp-stories-1518527783.jpg”
width=”640″ height=”276″
layout=”responsive”>
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-three”>
<amp-story-grid-layer template=”vertical”>
<h1 animate-in=”fly-in-top”>Image Search Changes</h1>
<p animate-in=”fly-in-left”>Google Launches AMP Stories & Visual Stories In Mobile Search</p>
<amp-img src=”assets/t-getty-images-google-1518527122.jpg”
width=”640″ height=”506″
layout=”responsive”>
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-four”>
<amp-story-grid-layer template=”vertical”>
<h1>AdSense Payment Holds</h1>
<p>Google AdSense Places Payments On Hold Until Mailing Address Verification<//p>
<p><q>When you click through, it says you need to enter a PIN that you received via postal mail into the box. If you enter the wrong pin three times, your ad serving will be suspended.</q>–Barry Schwartz</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-five”>
<amp-story-grid-layer template=”vertical”>
<h1>Request Indexing Limits</h1>
<p>
<amp-img src=”assets/twitter.png”
width=”643″ height=”441″
layout=”responsive”>
</amp-img>
</p>
<p>Google Confirms: There Are Limits On Request Indexing Feature In Search Console</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-six”>
<amp-story-grid-layer template=”thirds”>
<h1 grid-area=”upper-third”>Tiffany DaSilva</h1>
<p grid-area=”middle-third”>
<amp-img src=”assets/Tiffany-DaSilva-1518443558.jpg”
width=”640″ height=”316″
layout=”responsive”>
</amp-img>
</p>
<p grid-area=”lower-third”>
<p>The Search Community Honors You</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id=”article-seven”>
<amp-story-grid-layer template=”fill”>
<amp-img src=”assets/no-googlers-allowed-1518524634.jpg”
width=”640″ height=”640″
layout=”responsive”>
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template=”thirds”>
<h1 grid-area=”lower-third”>A No Googlers Allowed Sign</h1>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>

ثانيا : محتوى ملف Bookend JSON الذي يضم المقالات المتعلقه

{
“share-providers”: {
“facebook”: true,
“twitter”: true,
“email”: true
},
“related-articles”: {
“Articles”: [
{
“title”: “People Also Search”,
“url”: “https://www.seroundtable.com/google-launches-people-also-search-for-box-25233.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “AMP Stories”,
“url”: “https://www.seroundtable.com/google-amp-stories-25232.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “Image Search Changes”,
“url”: “https://www.seroundtable.com/google-image-search-getty-images-25231.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “AdSense Payment Holds”,
“url”: “https://www.seroundtable.com/google-adsense-hold-payment-25230.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “Request Indexing Limits”,
“url”: “https://www.seroundtable.com/google-confirms-quota-limits-request-indexing-25229.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “Tiffany DaSilva”,
“url”: “https://www.seroundtable.com/tiffany-dasilva-25227.html”,
“image”: “assets/barry-related.jpg”
},
{
“title”: “A No Googlers Allowed Sign”,
“url”: “https://www.seroundtable.com/photos/no-googlers-allowed-sign-25228.html”,
“image”: “assets/barry-related.jpg”
}
]
}
}

بالطبع يجب عليك تغيير الصور الموجودة في الملفات لتناسب مسار الصور على موقعك.

شاهد مثال للقصه بعد اكتمالها من هنا ، وحمل الملفات المطلوبه من هنا.