にほんブログ村
WIX サイトを AMP (Accelerated Mobile Pages) に変換すると、ユーザー エクスペリエンスが大幅に向上し、読み込み時間も短縮されます。読み込みに 3 秒以上かかるとモバイル ユーザーの 53% がページを放棄する状況では、AMP を実装することは賢明な選択です。このガイドは、WIX サイトでスムーズに AMP に移行するために必要なコーディングの手順を説明します。
Transforming your WIX site to AMP (Accelerated Mobile Pages) can significantly enhance user experience and improve load times. In a world where 53% of mobile users abandon a page if it takes more than three seconds to load, implementing AMP is a smart choice. This guide will help you navigate the coding required for a smooth AMP transition on your WIX site.
Understanding AMP
AMP is a web standard designed for faster loading on mobile devices. It streamlines web pages, presenting only the essential elements, making content easier to access on smartphones and tablets. For example, websites that adopted AMP saw a 15% improvement in user engagement, which can lead to increased sales, especially for e-commerce sites.
If you run a blog or an online store, switching to AMP can positively impact your website's performance metrics. In fact, Google has indicated that AMP can lead to a 20-60% increase in traffic to your site, particularly beneficial for content-heavy platforms.
WIX を AMP に変換するための前提条件
コーディングを始める前に、いくつかの前提条件が設定されていることを確認してください。
まず、モバイル表示用にコンテンツを最適化します。つまり、次のようになります。
ズームしなくてもテキストが判読可能であることを確認する
画像を適切に拡大縮小する
ユーザーフレンドリーなレイアウトを作成する
次に、WIX の設定を調べます。WIX は機能が豊富ですが、AMP 変換オプションがどこにあるかを知っておくことは重要です。
最後に、基本的な HTML と CSS に慣れてください。これらの言語を知っておくと、AMP HTML コードを効果的にカスタマイズできます。調査によると、コーディングの知識があればエラーが最大 40% 削減され、変換がスムーズになります。
AMP のコードを書く
次は、楽しい部分、つまりコードを書く部分です。WIX では、「コード」セクションを使用して、必要な AMP コンポーネントを追加します。必要な手順の概要は次のとおりです。
WIX の開発ツールにアクセスする: WIX エディターでサイトを見つけて、「開発モード」を有効にします。
AMP ページを作成する: AMP コンテンツ専用の新しいページを追加します。このページは、AMP ガイドラインに従いながら、現在のページを反映する必要があります。
AMP の基本的な HTML 構造: AMP フレームワークを含む HTML テンプレートから始めます。簡単な例を以下に示します。
```html
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>タイトルをここに入力</title>
<link rel="canonical" href="YOUR_CANONICAL_URL">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/ カスタム CSS をここに入力 /
</style>
</head>
<body>
<h1>ヘッダーをここに入力</h1>
<p>コンテンツをここに入力します。</p>
</body>
</html>
```
AMP コンポーネントを含める: AMP コンポーネントを活用してパフォーマンスを向上させます。たとえば、画像には `<amp-img>` を使用し、スライダーには `<amp-carousel>` を使用します。
AMP 画像を使用した例:
```html
<amp-img src="your-image-url.jpg" width="300" height="200" layout="responsive" alt="画像の説明"></amp-img>
```
AMP ページの検証: AMP ページの下書きが終わったら、AMP 検証ツールを使用して AMP 要件に準拠していることを確認します。
変換のテスト
コードが書き終わったら、テストすることが重要です。変更を WIX に公開してから、新しい AMP ページにアクセスします。Google PageSpeed Insights や AMP テスト ツールなどのツールを使用すると、読み込み時間や変換に関する問題に関する洞察が得られます。
ユーザー エクスペリエンスは画面サイズによって異なる可能性があるため、さまざまなモバイル デバイスでサイトのパフォーマンスを確認します。AMP を使用するサイトは、非 AMP バージョンよりも最大 2 倍速く読み込まれるため、ユーザーはよりスムーズに操作できます。
変換後のパフォーマンスの監視
AMP ページを公開したら、定期的なパフォーマンスの監視が重要です。追跡すべき重要な指標には、次のものがあります。
読み込み時間: さまざまなデバイスでページが読み込まれる速度を監視します。
ユーザー エンゲージメント: AMP ページでの直帰率とユーザー インタラクションを、非 AMP バージョンと比較して調べます。
SEO パフォーマンスにも注目してください。AMP を使用する Web サイトは、ユーザー エクスペリエンスの向上により、検索ランキングが 20～30% 向上する可能性があります。
これらの指標からのフィードバックを利用すると、AMP ページをさらに最適化できます。定期的なコーディング更新により、高いパフォーマンスを維持し、ユーザー エンゲージメントを向上させることができます。
より高速なページへの道
WIX サイトを AMP に移行するのは、思ったほど困難ではありません。これらの簡単な手順に従うことで、効率的でユーザー フレンドリーな Web ページを作成できます。WIX の設定でコードを記述すると、AMP の利点を活用でき、読み込み時間が短縮され、SEO が向上します。
モバイルの使用は増加すると予想されているため、AMP を採用することは、どの Web サイトにとっても戦略的な動きです。AMP テクノロジーとコーディング プラクティスの最新情報を常に把握して、サイトのパフォーマンスを最高に保ちましょう。
私がAMPコードを書いてテストした結果
The result of my testing the AMP code
AMPコードは、確かに認識されていました。WordPressでは、私は、AMPコードを書いていました。WordPressは、オープンソースなのでこれは、容易くできます。
けれども、Wix.comは、クローズで、コードを挿入するには、限られたスペースしかありません。これは、セキュリティが高いことを示しています。
私は、AMPコードをGoogleでテストしたところ、コードは、認識していました。けれども、これは、Wix.comでは、受け入れられませんでした。セキュリティも強いですし、AMPにすると、Google AdSenseなどのコードも変わるので、かなり煩雑になります。
GoogleもこのAMPを導入しても、優位性はなくなるとの見解でしたし、Wix.comもその見解が出た時点で、AMPをやめています。
コードを勉強できたのは、良い機会でした。これは、認識できました。でも、AMPにサイトは、変更できなかったです。
これを報告とさせていただきます。
The AMP code was certainly recognized. In WordPress, I wrote the AMP code. This is easy to do because WordPress is open source.
However, Wix.com is closed and there is only a limited space to insert the code. This shows high security.
When I tested the AMP code on Google, the code was recognized. However, this was not accepted by Wix.com. Security is also strong, and when you switch to AMP, the code of Google AdSense and others also changes, so it becomes quite complicated.
Google also had the view that even if this AMP was introduced, it would lose its advantage, and Wix.com also stopped using AMP when that view was issued.
It was a good opportunity to study the code. This was recognized. However, I was not able to change the site to AMP.
This is my report.
Prerequisites for Converting WIX to AMP
Before diving into coding, ensure a few prerequisites are set.
First, optimize your content for mobile viewing. This means:
Ensuring your text is legible without zooming
Scaling images appropriately
Creating a user-friendly layout
Next, explore WIX's settings. While WIX is feature-rich, knowing where to find AMP conversion options is vital.
Lastly, familiarize yourself with basic HTML and CSS. Knowing these languages will help you customize your AMP HTML code effectively. Studies show that coding knowledge can reduce errors by up to 40%, making your conversion smoother.
Writing the Code for AMP
Now comes the exciting part—writing the code. In WIX, use the 'code' section to add the necessary AMP components. Here's a straightforward outline of the steps involved:
Access WIX's Development Tools: Find your site in the WIX Editor and enable 'Dev Mode'.
Create Your AMP Page: Add a new page specifically for AMP content. This page should mirror your current page while following AMP guidelines.
Basic HTML Structure for AMP: Start with an HTML template that includes the AMP framework. Here’s a simple example:
```html
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Your Title Here</title>
<link rel="canonical" href="YOUR_CANONICAL_URL">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/ Your custom CSS here /
</style>
</head>
<body>
<h1>Your Header Here</h1>
<p>Your content goes here.</p>
</body>
</html>
```
Include AMP Components: Leverage AMP components to enhance performance. For instance, use `<amp-img>` for images or `<amp-carousel>` for sliders.
Example using an AMP image:
```html
<amp-img src="your-image-url.jpg" width="300" height="200" layout="responsive" alt="Description of the image"></amp-img>
```
Validate Your AMP Page: After drafting your AMP page, use the AMP Validator tool to ensure compliance with AMP requirements.
Testing the Conversion
Once your code is written, it’s essential to test it. Publish the changes on WIX, then access your new AMP page. Tools like Google PageSpeed Insights or the AMP Test Tool offer insights into load times and any issues with your conversion.
Check how your site performs on various mobile devices, as user experience can vary across screen sizes. Sites with AMP load up to twice as fast as non-AMP versions, allowing users a smoother experience.
Monitoring Performance Post-Conversion
After launching your AMP page, regular performance monitoring is key. Important metrics to track include:
Load Time: Monitor how fast your pages load on different devices.
User Engagement: Examine bounce rates and user interactions on AMP pages compared to non-AMP versions.
You may also want to keep an eye on your SEO performance. Websites using AMP can experience a 20-30% improvement in search rankings due to an enhanced user experience.
Utilizing feedback from these metrics will help optimize your AMP pages further. Regular coding updates can maintain high performance and improve user engagement.
Your Path to Speedier Pages
Transitioning your WIX site to AMP is not as daunting as it seems. By following these simple steps, you can create an efficient, user-friendly webpage. Writing code in WIX’s settings allows you to harness AMP's benefits, resulting in faster load times and improved SEO.
With mobile usage only projected to grow, adopting AMP is a strategic move for any website. Stay updated on the latest in AMP technology and coding practices to keep your site performing at its best.
댓글