https://qwerty.work/tags/amp%E5%AF%BE%E5%BF%9C/ Recent content in AMP対応 on qwerty.work Hugo -- gohugo.io ja-JP Wed, 26 Apr 2017 21:06:27 +0900 https://qwerty.work/post/2017/04/movabletype-amp-template/ Wed, 26 Apr 2017 21:06:27 +0900 https://qwerty.work/post/2017/04/movabletype-amp-template/ <p>MovableTypeでAMP対応のページを書き出せるようにAMP用の記事テンプレートを作ってみたのでメモ。</p> <p><img class="gallery-image" data-flex-basis="410px" data-flex-grow="170" height="351" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/04/movabletype-amp-template/images/IMG_6343.jpg" width="600"></p> <p>スマホでグーグル検索したときの検索結果の**⚡マーク<strong>が付いているリンクを開くとページが高速で表示されるという</strong>AMP**（アンプ）。</p> <div class="link-card"> <a href="https://www.ampproject.org/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.ampproject.org/" alt="https://www.ampproject.org/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.ampproject.org/</span> <span class="link-card-url">https://www.ampproject.org/</span> </div> </a> </div> <h3 id="amp用の記事テンプレートを作成">AMP用の記事テンプレートを作成 </h3><p>AMPページでは</p> <ul> <li>がいる</li> <li>をまたはにする</li> <li>imgタグをamp-imgにするなどamp-***しないといけないタグがある</li> <li>CSSは内部に書かないといけない</li> <li>AMP対応のJavaScriptしか使えない</li> <li>AdSenseとAnalyticsもAMP対応のコード書き換えないといけない</li> <li>etc&hellip;</li> </ul> <p>と、いろいろ制約があるので、既存の記事テンプレートをいじるのではなく、AMP専用の記事テンプレートを作成することにしました。テンプレートを登録。</p> <h4 id="テンプレートのソース">テンプレートのソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span><span style="color:#f92672">&lt;br&gt;&lt;html</span> <span style="color:#960050;background-color:#1e0010">amp</span> <span style="color:#a6e22e">lang=</span><span style="color:#e6db74">&#34;&lt;$mt:BlogLanguage$&gt;&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;&lt;head&gt;&lt;br&gt;&lt;meta</span> <span style="color:#a6e22e">http-equiv=</span><span style="color:#e6db74">&#34;content-type&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;text/html; charset=UTF-8&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;&lt;meta</span> <span style="color:#a6e22e">charset=</span><span style="color:#e6db74">&#34;&lt;$mt:PublishCharset$&gt;&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;&lt;title&gt;</span><span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:EntryTitle encode_html=&#34;1&#34;$&gt;-<span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:BlogName encode_html=&#34;1&#34;$&gt;<span style="color:#f92672">&lt;/title&gt;&lt;br&gt;</span><span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:CanonicalLink regex_replace=&#34;//amp/&#34;,&#34;&#34; $&gt;<span style="color:#f92672">&lt;br&gt;&lt;meta</span> <span style="color:#a6e22e">name=</span><span style="color:#e6db74">&#34;viewport&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;width=device-width,minimum-scale=1,initial-scale=1&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;application/ld+json&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;</span> {<span style="color:#f92672">&lt;br&gt;</span> &#34;@context&#34;: &#34;http://schema.org&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;@type&#34;: &#34;Blog&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;headline&#34;: &#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:EntryTitle encode_json=&#39;1&#39;$&gt;&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;datePublished&#34;: &#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:EntryDate format_name=&#39;iso8601&#39;$&gt;&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;dateModified&#34;: &#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$MTDate format_name=&#39;iso8601&#39;$&gt;&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;author&#34;: &#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:EntryAuthorLink show_hcard=&#34;1&#34;$&gt;&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;publisher&#34;: &#34;Qwerty.Work&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;mainEntityOfPage&#34;: &#34;<span style="color:#960050;background-color:#1e0010">&lt;</span>$mt:CanonicalURL with_index=&#34;1&#34;$&gt;&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;image&#34;: &#34;&#34;<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span> <span style="color:#f92672">&lt;/script&gt;&lt;br&gt;&lt;style</span> <span style="color:#960050;background-color:#1e0010">amp-boilerplate</span><span style="color:#f92672">&gt;</span>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}}<span style="color:#f92672">&lt;/style&gt;&lt;br&gt;&lt;noscript&gt;&lt;style</span> <span style="color:#960050;background-color:#1e0010">amp-boilerplate</span><span style="color:#f92672">&gt;</span>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<span style="color:#f92672">&lt;/style&gt;&lt;/noscript&gt;&lt;br&gt;&lt;script</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-iframe&#34;</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-iframe-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;br&gt;&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-ad&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-ad-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;br&gt;&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-youtube&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-youtube-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;br&gt;&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-analytics&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-analytics-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;br&gt;&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;&lt;br&gt;&lt;style</span> <span style="color:#960050;background-color:#1e0010">amp-custom</span><span style="color:#f92672">&gt;&lt;br&gt;</span> body { margin:0; padding:10px; font-family:sans-serif; }<span style="color:#f92672">&lt;br&gt;</span> amp-img { background-color: gray; border: 1px solid black; }<span style="color:#f92672">&lt;br&gt;&lt;/style&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body&gt;&lt;br&gt;&lt;amp-analytics</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;googleanalytics&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;analytics1&#34;</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">&lt;br&gt;</span> <span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;application/json&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;</span> {<span style="color:#f92672">&lt;br&gt;</span> &#34;vars&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;account&#34;: &#34;UA-12345678-1&#34;<span style="color:#f92672">&lt;br&gt;</span> },<span style="color:#f92672">&lt;br&gt;</span> &#34;triggers&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;trackPageview&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;on&#34;: &#34;visible&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;request&#34;: &#34;pageview&#34;<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span> <span style="color:#f92672">&lt;/script&gt;</span> <span style="color:#f92672">&lt;br&gt;&lt;/amp-analytics&gt;&lt;br&gt;&lt;header&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;h1&gt;&lt;mt:EntryTitle&gt;&lt;/h1&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;time&gt;&lt;mt:EntryDate&gt;&lt;/time&gt;&lt;br&gt;&lt;/header&gt;&lt;br&gt;&lt;amp-ad</span> <span style="color:#960050;background-color:#1e0010">&lt;br</span><span style="color:#f92672">&gt;</span> layout=&#34;responsive&#34; <span style="color:#f92672">&lt;br&gt;</span> width=300 <span style="color:#f92672">&lt;br&gt;</span> height=250 <span style="color:#f92672">&lt;br&gt;</span> type=&#34;adsense&#34; <span style="color:#f92672">&lt;br&gt;</span> data-ad-client=&#34;ca-pub-1234567891234567&#34; <span style="color:#f92672">&lt;br&gt;</span> data-ad-slot=&#34;1234567890&#34;&gt;<span style="color:#f92672">&lt;br&gt;&lt;/amp-ad&gt;&lt;br&gt;&lt;article&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;mt:AmpConvert</span> <span style="color:#a6e22e">fix_img_size=</span><span style="color:#e6db74">&#34;1&#34;</span> <span style="color:#a6e22e">base_url=</span><span style="color:#e6db74">&#34;https://qwerty.work&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;mt:EntryBody&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;mt:EntryMore&gt;&lt;br&gt;</span> <span style="color:#f92672">&lt;/mt:AmpConvert&gt;&lt;br&gt;&lt;/article&gt;&lt;br&gt;&lt;aside&gt;</span>&amp;nbsp;<span style="color:#f92672">&lt;/aside&gt;&lt;br&gt;&lt;footer&gt;&lt;hr&gt;&lt;a</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;&lt;mt:BlogURL&#34;</span><span style="color:#f92672">&gt;&lt;mt:BlogName&gt;&lt;/a&gt;&lt;/footer&gt;&lt;br&gt;&lt;/body&gt;&lt;br&gt;&lt;/html&gt;&lt;br&gt;</span> </span></span></code></pre></div><p>参考ページ</p> <div class="link-card"> <a href="https://mbdb.jp/hacks/movable-type-coping-with-amp.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://mbdb.jp/hacks/movable-type-coping-with-amp.html" alt="https://mbdb.jp/hacks/movable-type-coping-with-amp.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://mbdb.jp/hacks/movable-type-coping-with-amp.html</span> <span class="link-card-url">https://mbdb.jp/hacks/movable-type-coping-with-amp.html</span> </div> </a> </div> <div class="link-card"> <a href="https://www.brain-solution.net/blog/seo/amp-html/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.brain-solution.net/blog/seo/amp-html/" alt="https://www.brain-solution.net/blog/seo/amp-html/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.brain-solution.net/blog/seo/amp-html/</span> <span class="link-card-url">https://www.brain-solution.net/blog/seo/amp-html/</span> </div> </a> </div> <div class="link-card"> <a href="https://mbdb.jp/hacks/movable-type-coping-with-amp.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://mbdb.jp/hacks/movable-type-coping-with-amp.html" alt="https://mbdb.jp/hacks/movable-type-coping-with-amp.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://mbdb.jp/hacks/movable-type-coping-with-amp.html</span> <span class="link-card-url">https://mbdb.jp/hacks/movable-type-coping-with-amp.html</span> </div> </a> </div> <div class="link-card"> <a href="https://www.cherry-pick.jp/blog/movable-type/amp.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.cherry-pick.jp/blog/movable-type/amp.php" alt="https://www.cherry-pick.jp/blog/movable-type/amp.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.cherry-pick.jp/blog/movable-type/amp.php</span> <span class="link-card-url">https://www.cherry-pick.jp/blog/movable-type/amp.php</span> </div> </a> </div> <h4 id="アーカイブマッピングを設定する">アーカイブマッピングを設定する </h4><p>AMP用のページはブログルートフォルダの/ampという階層に書き出すことにしたので、</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span>amp/%y%/m%-f </span></span></code></pre></div><p>としました。<strong><em>ファイル名</em>.amp.html</strong>と書き出す手段もあったのですが、<strong>/amp</strong>に書き出すことにしました。</p> <p>記事の横のチェックボックスにはチェックを入れないこと。このチェックボックスはデフォルトのアーカイブマッピングを指定するものなので、ここにチェックを入れると、PC用のページのリンクが全部/ampにあるページのURLになってしまいます。</p> <h3 id="プラグインampconvert-を入れる">プラグイン「AmpConvert」 を入れる </h3><p>このプラグインを入れるとimgやYouToube用のiflameタグをAMP用のタグに変換してくれます。以下からプラグインをダウンロードしてMTの<strong>pluginフォルダ</strong>に<strong>AmpConvertフォルダを丸ごと</strong>置いてアップロードします。</p> <div class="link-card"> <a href="https://github.com/ARK-Web/mt_plugin_AmpConvert" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/ARK-Web/mt_plugin_AmpConvert" alt="https://github.com/ARK-Web/mt_plugin_AmpConvert" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/ARK-Web/mt_plugin_AmpConvert</span> <span class="link-card-url">https://github.com/ARK-Web/mt_plugin_AmpConvert</span> </div> </a> </div> <ul> <li><a class="link" href="https://www.ark-web.jp/blog/archives/2016/11/ampampconvert.html" target="_blank" rel="noopener" >https://www.ark-web.jp/blog/archives/2016/11/ampampconvert.html</a></li> <li><a class="link" href="https://plugins.movabletype.jp/author29eb2/ampconvert.html" target="_blank" rel="noopener" >https://plugins.movabletype.jp/author29eb2/ampconvert.html</a></li> </ul> <h4 id="使い方">使い方 </h4><p>AMP用のコードに変換したいコードを**～**で囲みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;mt:AmpConvert&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;mt:EntryBody&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;mt:EntryMore&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/mt:AmpConvert&gt;</span> </span></span></code></pre></div><p>これだけで<strong>img</strong>を<strong>amp-img</strong>に、<strong>YouTubeのiflame</strong>を<strong>amp-youtube</strong>に変換してくれます。</p> <h3 id="adsenseのコード">AdSenseのコード </h3><h4 id="に以下を追加">～に以下を追加 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-ad&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-ad-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h4 id="amp用のadsenseコード">AMP用のAdSenseコード </h4><p>サイト運営者 ID（data-ad-client）と広告ユニット ID（data-ad-slot）を自分の広告のコードに書き換えます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;amp-ad</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width=</span><span style="color:#e6db74">300</span> <span style="color:#960050;background-color:#1e0010">&lt;br</span><span style="color:#f92672">&gt;</span> height=250 <span style="color:#f92672">&lt;br&gt;</span> type=&#34;adsense&#34; <span style="color:#f92672">&lt;br&gt;</span> data-ad-client=&#34;ca-pub-1234567891234567&#34; <span style="color:#f92672">&lt;br&gt;</span> data-ad-slot=&#34;1234567890&#34; </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/amp-ad&gt;</span> </span></span></code></pre></div><p>詳しくは以下のAdSenseヘルプのページを参照してください。</p> <div class="link-card"> <a href="https://support.google.com/adsense/answer/7183212?hl=ja" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://support.google.com/adsense/answer/7183212?hl=ja" alt="https://support.google.com/adsense/answer/7183212?hl=ja" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://support.google.com/adsense/answer/7183212?hl=ja</span> <span class="link-card-url">https://support.google.com/adsense/answer/7183212?hl=ja</span> </div> </a> </div> <h3 id="analyticsのコード">Analyticsのコード </h3><h4 id="に以下を追加-1">～に以下を追加 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#960050;background-color:#1e0010">async</span> <span style="color:#a6e22e">custom-element=</span><span style="color:#e6db74">&#34;amp-analytics&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.ampproject.org/v0/amp-analytics-0.1.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h4 id="amp用のanalyticsコード">AMP用のAnalyticsコード </h4><p>UA-XXXXX-Yの部分を自分のAnalyticsのコードに書き換えます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;amp-analytics</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;googleanalytics&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;analytics1&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;application/json&#34;</span><span style="color:#f92672">&gt;&lt;br&gt;</span>{<span style="color:#f92672">&lt;br&gt;</span> &#34;vars&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;account&#34;: &#34;UA-XXXXX-Y&#34;<span style="color:#f92672">&lt;br&gt;</span> },<span style="color:#f92672">&lt;br&gt;</span> &#34;triggers&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;trackPageview&#34;: {<span style="color:#f92672">&lt;br&gt;</span> &#34;on&#34;: &#34;visible&#34;,<span style="color:#f92672">&lt;br&gt;</span> &#34;request&#34;: &#34;pageview&#34;<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span> }<span style="color:#f92672">&lt;br&gt;</span>}<span style="color:#f92672">&lt;br&gt;&lt;/script&gt;&lt;br&gt;&lt;/amp-analytics&gt;</span> </span></span></code></pre></div><p>詳しくは以下のページを参照してください。</p> <div class="link-card"> <a href="https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja" alt="https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja</span> <span class="link-card-url">https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja</span> </div> </a> </div> <h3 id="ampページと通常ページのcanonical">AMPページと通常ページの&quot;canonical&quot; </h3><p>AMPページには通常ページのリンクを記載し、通常ページにはAMPページのリンクを記載します。<strong>通常のペー</strong>ジは**/blogの階層<strong>で、<strong>AMPページ</strong>は</strong>/blog/ampの階層**だった場合、以下のようになります。</p> <h4 id="ampページ">AMPページ </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;canonical&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://www.example.com/blog/document.html&#34;</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><h4 id="通常ページnon-ampページ">通常ページ（Non AMPページ） </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;amphtml&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://www.example.com/blog/amp/document.html&#34;</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><h3 id="構造化データについて">構造化データについて </h3><p>うまく説明できませんが、JSON-LDとかいう構造化データというのがあったほうがいいようです。ブログ用のJSON-LDのサンプルは以下を参考にしてみてください。</p> <div class="link-card"> <a href="http://jsonld.com/blog-post/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jsonld.com/blog-post/" alt="http://jsonld.com/blog-post/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jsonld.com/blog-post/</span> <span class="link-card-url">http://jsonld.com/blog-post/</span> </div> </a> </div> <p>ここでAMPページの構造化データのテストができます。</p> <div class="link-card"> <a href="https://search.google.com/structured-data/testing-tool" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://search.google.com/structured-data/testing-tool" alt="https://search.google.com/structured-data/testing-tool" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://search.google.com/structured-data/testing-tool</span> <span class="link-card-url">https://search.google.com/structured-data/testing-tool</span> </div> </a> </div> <h3 id="amp用ページのテスト">AMP用ページのテスト </h3><p>出来上がったAMP用のページがちゃんとできているか以下のAMPテストサイトで確認ができます。</p> <h4 id="googleの検証サイト">Googleの検証サイト </h4> <div class="link-card"> <a href="https://search.google.com/search-console/amp" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://search.google.com/search-console/amp" alt="https://search.google.com/search-console/amp" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://search.google.com/search-console/amp</span> <span class="link-card-url">https://search.google.com/search-console/amp</span> </div> </a> </div> <p>AMP用ページのURLを入れて[テストを実行]をボタンを押します。</p> <p><img class="gallery-image" data-flex-basis="774px" data-flex-grow="322" height="232" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/04/movabletype-amp-template/images/No-04.jpg" width="749"></p> <p>ダメな場合はダメな箇所を教えてくれます。</p> <p><img class="gallery-image" data-flex-basis="392px" data-flex-grow="163" height="453" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/04/movabletype-amp-template/images/No-05.jpg" width="741"></p> <h4 id="amp-projectの検証ツール">AMP Projectの検証ツール </h4><p>以下のURLで検証結果を表示できます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span>https://validator.ampproject.org/#url=AMPページのurl </span></span></code></pre></div><h3 id="search-consoleのampレポートでエラーチェック">Search ConsoleのAMPレポートでエラーチェック </h3><p>Accelerated Mobile Pages（AMP）レポートAMPページのインデックス状況やエラーや問題を確認できます。</p> <div class="link-card"> <a href="https://www.google.com/webmasters/tools/accelerated-mobile-pages" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.google.com/webmasters/tools/accelerated-mobile-pages" alt="https://www.google.com/webmasters/tools/accelerated-mobile-pages" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.google.com/webmasters/tools/accelerated-mobile-pages</span> <span class="link-card-url">https://www.google.com/webmasters/tools/accelerated-mobile-pages</span> </div> </a> </div> <p> </p> <p>やることはもっとありますが、とりあえず以上でAMPページは導入できたので今回はこのくらいにしておきます。</p>