Python、HTML、CSS、JSを使用してWebアプリのアンプページを作成します
GoogleがSERPにSunset AMPアイコンがあり、モバイルエンドのターゲットWebサイトページにトラフィックを自動的にリダイレクトする機能がある後、AMPページの重量が縮小されました。ただし、検索コンソールパネルから認識されるように、露出を増やし、検索チャネルからトラフィックを増やすための最も重要なスニペットの1つです。この作品では、Web用のアンプを作成する方法を簡単に説明します。アプリモバイルサイドユーザーは、PythonをサンプルとしてUSNG USNG。この作品の終わりまでに、コアコンポーネントを学習し、この章でモジュールを使用して独自のプロジェクトを開始できます。
GoogleがSERPにSunset AMPアイコンがあり、モバイルエンドのターゲットWebサイトページにトラフィックを自動的にリダイレクトする機能がある後、AMPページの重量が縮小されました。ただし、検索コンソールパネルから認識されるように、露出を増やし、検索チャネルからトラフィックを増やすための最も重要なスニペットの1つです。
したがって、この作品では、WebアプリのモバイルサイドユーザーのアンプをサンプルとしてUSNG Pythonのアンプを作成する方法を簡単に説明します。この作品の終わりまでに、コアコンポーネントを学習し、この章でモジュールを使用して独自のプロジェクトを開始できます。
目次：Webアプリ用のアンプページを作成するためのヒント
- Core AMP HTML, CSS & JS script
- AMPページの検証に合格するために完了する必要がある6チェックポイント
- Jinja2を使用した正規タグ
- ユーザーエージェントを使用してモバイルトラフィックを検出します
- url_をリダイレクトして、モバイルユーザーをアンプルートにリダイレクトします
- WebアプリのAMPページ作成の完全なPythonスクリプト
Core AMP HTML, CSS & JS Script
Accelerated Mobile Pages（AMP）は、モバイルデバイスのWebページのパフォーマンスを向上させるために作成されたオープンソースプロジェクトです。このプロジェクトは、GoogleとTwitterが先頭に立っていました。
そのため、基本的な標準構造とWebアプリに基本的なコンポーネントが追加されています。 AMPドキュメントWebサイトからダウンロードできる基本的なコンポーネントリストは次のとおりです。
- bass.css
- HTMLテンプレート
- base.js
Here are the stylesheet and script sample placed between <head></head> as follows:
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
HTMLページの命名については、元のHTMLページと区別するために、通常、ABC.AMP.HTMLなどのこの形式でAMPを名前を付けます。
6検証に合格するために完了する必要があるチェックポイント
一般的なWebアプリのモバイルページとは異なり、アンプページを作成するために展開する必要がある5つの必須要素があります。 Googleによる検証を成功させるためです。
a。アンプライブラリスクリプト
まず、ヘッダーにAMPスクリプトライブラリと、Bootstrap、JQueryなどの他のオープンソースプロジェクトを追加する必要があります。
<script async src="https://cdn.ampproject.org/v0.js"></script>
b。言語とコードのインジケーター
第二に、次のように言語とエンコードタグをヘッダーに追加する必要があります。
<meta charset="utf-8" />
<html ⚡ lang="en">
これらの2つのタグは、主にページと言語エンコーディングバージョンが使用している言語を示しています。
c。標準タグ
順番に、Canonical Tagは、このアンプページに匹敵する元のページを指示するため、必須タグです。私はすぐに詳細を歩きます。
d。ビューポートタグ
次に、ビューポートタグです。これは、モバイルエンドレイアウト設定を最適化するためです。これがサンプルタグです。
<meta name="viewport" content="width=device-width">
e。画像HTML要素設定
Different with non amp page in the image element, AMP image html element has an unique setting required. We use <amp-img></amp-img> instead of <img></img>
<amp-img src="mountains.jpg"></amp-img>
他の要素設定も例外ではないので、アンプページのライブの前にそれらをバルクで変更することをお勧めします。
f。記事スキーマ
Although Valid AMP pages do not require schema.org structured data, but some platforms like Google Search require it for certain experiences like the Top stories carousel. It’s generally a good idea to include structured data. Structured data helps search engines to better understand your web page, and to better display your content in Search Engine Result Pages (e.g., in rich snippets). The structured data is included in the <head> tag of your AMP page via an application/ld+jsontype script tag.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
実際、リッチでないアンプの外観からのトラフィックは、記事スキーマなしでそれらのピースよりも優れています
Jinja2を使用した正規タグ
アンプページの標準タグを設定するために、ジンジャを活用して、サーバー側と接続する標準変数を設定することもできます。他のHTMLページと比較したAMPページCanonical設定の重要なものは、AMPHTMLタグも非AMPページに追加する必要があります。次のようなサンプルは次のとおりです。
アンプページに展開されているタグ：
<link rel="canonical" href="/article.html">
非AMPページに同じ最終URLが展開されているタグ
<link rel="amphtml" href="/article.amp.html">
ユーザーエージェントを使用してモバイルトラフィックを検出します
AMPページの元の目的は、モバイルクライアント側のローディング速度とUXを増やすことです。そのため、Webアプリルートでモバイルトラフィックを検出するために検出器を追加する必要があります。参照のサンプルは次のとおりです
user_agent = request.headers.get('User-Agent')
if "iphone" in user_agent.lower():
elif "android" in user_agent.lower():
else:
url_をリダイレクトして、モバイルユーザーをアンプルートにリダイレクトします
非AMPページとAMPページの間の最後のURLは異なります。 AMPパラメーターを設定して、AMPページまたは新しいパスを表すこともできます。以下は、モバイルユーザーをAMP URLにリダイレクトする新しいページを設定するためのサンプルルートです。
非アンプページ：
@app.route("/<louis>/<lu>", methods=['GET', 'POST'])
def abct(louis, lu):
user_agent = request.headers.get('User-Agent')
if "iphone" in user_agent.lower():
return redirect(url_for('cde', easy2digtal=louis, buyfromlo=lu))
アンプページ：
@app.route("/<easy2digital>/<buyfromlo>/amp/", methods=['GET', 'POST'])
def singlePostAMP(easy2digital, buyfromlo):
return
WebアプリのAMPページ作成の完全なPythonスクリプト
If you are interested Chapter 86 – Tips to Create AMP Pages for Web App using Python, HTML, CSS, JS – Guide to Deploy Web App on Google App Engine, please subscribe to our newsletter by adding the message “Chapter 86”. We will send you the script immediately to your mailbox.
Python、HTML、CSS、JSを使用して、第86章を読むことをお楽しみください。もしそうなら、以下にリストされていることの1つを行うことで私たちをサポートしてください。
- Support and Donate to our channel through PayPal (paypal.me/Easy2digital)
- Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
- Follow and like my page Easy2Digital Facebook page
- ソーシャルネットワークの記事をハッシュタグ＃easy2digitalで共有する
- Easy2Digitalの最新の記事、ビデオ、および割引コードを受け取るために、毎週のニュースレターにサインアップしてください
- Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)
