What is Google AMP?
Google AMP is a web technology that is applied to web pages including online stores. Mobile content that uses Google AMP's technology can be loaded 85% faster than existing mobile content. As a result, you can use this feature to create a fast and stable shopping experience for customers living in countries with slower internet speeds and therefore reduce your store's bounce rate. Google AMP also improves a page's search engine optimization (SEO) level and can help your store reach the top of search pages for more effective global marketing.
Google AMP settings
- Go to Channels>Google>Google AMP>Google AMP settings.
- Set Google AMP settings to Enable.
- Go to My Store > Store setup > Search Engine Optimization > Advanced settings (Tab).
- Under Page connection settings, click the Mobile store tab and set Page not found connection settings to Connect to specified path. Enter a slash (/) at the very end of your store's domain.
E.g. https: https://m.cafe24sample.kr/ - Go to My Store > General > Domain and check your primary domain settings.
Primary domain requirements
- You must have SSL encryption installed on your primary domain. SSL encrypted domains begin with "https://".
- If your domain begins with "http://" and doesn't have SSL encryption, some content on your store may not be visible. - Return to Channels > Google > Google AMP > Google AMP settings and select the pages to which you want to apply AMP under AMP pages.
- Select the images you want to use for Product list image and Product details images.
- Enter the image size (pixels) for uploaded images in Product list image size.
Note
If the size entered in Product list image size is different from the actual image size used for products, the aspect ratio of the image may be displayed differently. Ensure that you enter the correct size.
- The Script IDs setting is used to install log analysis scripts used on Google AMP. To use this feature, enter your Google Analytics ID or Facebook Pixel ID.
- Google Analytics ID tracking e.g. UA-XXXXXXXX-X
- Facebook Pixel ID e.g. 123456789
Note
Log analysis scripts with other functions are not supported on Google AMP.
- Click Save.
Info
- Google AMP pages will use a specially designed AMP theme that is different from your existing mobile store theme. However, information such as products and posts will remain the same.
- Valid Google AMP pages will have a lightning bolt icon appear in front of search results to increase credibility.
- If a user accesses your Google AMP page through Google search results and then moves to a different page, they will be taken to your store with its primary theme.
Google AMP themes
You can edit your store's theme with ease to apply Google AMP. Using the settings provided, you can select the color, text style, product display and more for your store's AMP.
Info
- For product details, you can only display the product name, price, discounted price, and new/recommend/out-of-stock icons.
- To see a preview of your Google AMP, you need to upload at least one product to your store.
- When accessing a product details page through Google AMP, only basic product information will be displayed.
- Go to Channels > Google > Google AMP > Google AMP themes.
- Go to the Common layout tab and select the color and text style that will be used throughout the Google AMP pages.
- Select each of the individual Home page, Product Categories, and Product details tabs to edit the theme for those pages.
Info
Only pages selected under Select page in Google AMP settings can have their theme edited.
- You can enable and disable items and edit individual colors and fonts using the settings on the right side of the screen.
Info
Image and text modifications can be viewed after saving your changes.
If the preview screen does not show properly, wait first until the preview screen has fully loaded before editing. - When you have configured all your settings, click Save.
- Copy the URL in the preview screen and paste it into your web browser to check the final version.
- You can validate your theme for public use by clicking the Validate AMP theme button below the preview screen.
Why can't I find the "Validate AMP theme" button?
The Validate AMP theme button will only be visible if you are using a domain other than your default domain. AMP pages can only be used on SSL encrypted (https://) pages. Default domains like "m.storeID.cafe.com" do not support https://.
If Google AMP validation fails, please check the following.
- Your website may not be immediately visible on Google search results after setting up Google AMP.
As search results are created using information collected by web crawlers, your website will not be displayed until your newly set up AMP page has been crawled through by Google's web crawlers. If you want your store to be displayed on Google search results as soon as possible, register your website and sitemap on Google Search Console (Webmaster Tools). - Check that your URL begins with "https://".
Google MAP only works on pages that use the SSL security protocol (https://). Install an SSL certificate on your primary domain if you don't have https://. - Check your Select page settings in Channel > Google > Google AMP > Google AMP settings.
If a page's checkbox is not selected, its AMP page will not be displayed. - Check that you have allowed web crawlers to access your website.
Go to My Store > Store setup > Search Engine Optimization and check your settings under Web crawler access settings. If Google is marked next to "Disallow", deleted it. - Google AMP pages must be accessed through Google's mobile search results.
Google AMP pages can be viewed when the valid AMP information is accessed through Google's mobile search results. Cached AMP themes will only be shown at full speed when accessed through Google search results.
Google Login
Google Login is a feature that allows customers to log in to your store using their Google Account.
To use this feature, you need to register as a developer on the Google Developers website and get a Client ID and Client Secret.
- Go to the Google Developers website and log in with your existing Google Account or create a new one.
▶ Go to Google Developers - To create a new project, read the Terms of Service and click I agree.
- Click CREATE PROJECT on the right side, or Select a project at the top of the page, to bring up a pop-up. Click NEW PROJECT.
- You will be taken to the New Project page. Enter a Project name and click CREATE to create your new project.
- On the left side of the screen, under APIs and services, click OAuth consent screen.
- Set the User Type to External and click CREATE.
- Enter the App name, User support email, and any other required information, and click SAVE AND CONTINUE.
When entering a domain value, do not specify the protocol (http:// or https://) or include the path (test.com/) - When your project has been created, click Credentials on the left side of the screen.
- Click CREATE CREDENTIALS at the top of the page and click OAuth client ID.
- For Application type, select Web application.
- Complete the Authorized JavaScript origins and Authorized redirect URIs fields using the following information:
a. Authorized JavaScript origins: Enter the URLs to your online store's PC version and mobile version.
b. Authorized redirect URIs: Enter the detailed path as shown below behind the URLs to your online store's PC version and mobile version.
• E.g. If your domain is "cafe24sample.com", enter the following:
• If your domain uses SSL encryption, then only enter the https:// addresses.
① Authorized JavaScript origins:
- http://cafe24sample.com
- http://www.cafe24sample.com
- http://m.cafe24sample.com
- https://cafe24sample.com
- https://www.cafe24sample.com
- https://m.cafe24sample.com
② Authorized redirect URIs:
- http://cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
- http://www.cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
- http://m.cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
- https://cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
- https://www.cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
- https://m.cafe24sample.com/Api/Member/Oauth2ClientCallback/googleplus/
If you have any secondary domains that use Google Login, enter them all here.
Secondary domain: Primary domain, subdomains, mobile domains, localized store domains, etc. - Click CREATE to bring up the OAuth client created pop-up and check Your client ID and Your client Secret.
- Go to Channels > Google > Google Login on your Cafe24 admin page.
- Set Google Login to Enable.
- Enter your Client ID and Client Secret using the information from Step 12 and click Save.