Домой Оптимизация и учебники по WordPress Как настроить WordPress и AMP: Ускоренные мобильные страницы: Приложение Analytics, AdSense, Руководство...

Как настроить WordPress и AMP: Ускоренные мобильные страницы: Приложение Analytics, AdSense, Руководство по социальным сетям

412
0

В последние дни было много шума о Google AMP. Google официально объявил о поддержке страниц AMP как части страницы мобильного поиска. Это действительно интересно. До сих пор я по какой-то причине избегал внедрения AMP в Crunchify и никогда не чувствовал в этом никакой важности.

Но, посмотрев твит Барри, я решил AMPlify Хрустеть тоже.

хаха .. все мобильные !! хм .. тут как раз наоборот .. почти все на рабочем столе pic.twitter.com/9tDCAYa1SJ

— Crunchify (@Crunchify) 16 сентября 2016 г.

Вы ищете AMP и WordPress советы? Хотите улучшить свой сайт WordPress с помощью ускоренных мобильных страниц Google? Или вы хотите установить AMP в WordPress? В этом уроке мы рассмотрим шаги, как AMPlify вашего сайта WordPress, со всеми подробными шагами.

Что такое ускоренные мобильные страницы (AMP)?

Accelerated Mobile Pages (AMP) Project — проект с открытым исходным кодом, созданный с учетом скорости, который создает контент, оптимизированный для мобильных устройств, один раз и мгновенно загружает его везде . На странице отсутствует загрузка JavaScript . Существует очень минимальная загрузка CSS с жесткими ограничениями. Я заметил, что вы не можете использовать одно из наблюдений !important в CSS.

Есть ли у вас какие-либо вопросы ниже?

  • Google AMP: что это такое и правильно ли это для вашего сайта WordPress?
  • Лучший способ настроить WordPress для AMP
  • Как начать со страниц AMP Google и WordPress
  • Ускоренный плагин WordPress для мобильных страниц
  • Страницы усилителя WordPress
  • Yoast amp клей и WordPress запросы

Давайте начнем: Включите AMP для ваших сообщений WordPress

Шаг 1

Установите официальный плагин AMP .

  • После активации у вас все настроено. Вы не увидите меню опций.
  • Вы должны пойти в Settings -> Permalinks меню. Нажмите Save Changes без внесения каких-либо изменений.

Официальный плагин AMP обеспечивает базовую функциональность, и все ваши сообщения будут автоматически обновляться. Вы можете посетить AMPlified версию ваших сообщений, добавив /amp/ в конце любого сообщения URL.

Посмотрите на пример:

Шаг 2

Установите плагин Glue for Yoast SEO & AMP. Начальная версия 0.4 AMP WordPress version Я полагаю, вам не нужен какой-либо другой плагин, связанный с AMP.

Сейчас:

  • Идти к Appearance -> AMP ,
  • Предоставлять Header а также Background цвет и нажмите на Save ,

Шаг 3

Единственная проблема, которую я вижу с этим плагином, состоит в том, что он добавляет Powered by WordPress ссылка внизу страницы . Чтобы изменить это, вы можете изменить footer.php страница с кодом ниже.

  • Идти к Plugins -> Editor
  • Выберите плагин AMP
  • Выберите файл amp / templates / footer.php
а / шаблоны / footer.php

1
2
3
4
5
6
7
8
9
< footer class = amp-wp-footer >
< div >
< h2 > эхо esc_html ( $ это — > получить ( 'BLOG_NAME' ) ) ; ?> < / h2 >
< p >
авторское право < я class = fa fa-copyright aria — hidden = true > < / i > 2012 — 16 < а href = https://crunchify.com > Crunchify , LLC . < / a > & NBSP; • & nbsp; < а href = https://crunchify.com/sitemap/ target = _blank > Архивы < / a > & NBSP; • & nbsp; < а href = https://crunchify.com/advertise/ target = _blank > Реклама < / a >
< / p >
< а href = #top class = back-to-top > _e ( «Вернуться наверх» , «усилитель» ) ; ?> < / a >
< / div >
< / footer >

Измените код строки авторского права в соответствии с вашими потребностями

Шаг 4

добавлять Analytics а также Social Media иконки для ваших страниц AMP.

  1. crunchify_amp_add_analytics_social_ads_js функция добавит необходимую аналитику и социальные сети javascript код для вашей страницы усилителя.
  2. crunchify_amp_add_analytics_social_code Функция добавит актуальный код аналитики и иконки социальных сетей .
  3. Убедитесь, что вы обновили свой Google Analytics Universal tracking ID а также Facebook App ID ниже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Изменения Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
функция crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id знак равно $ amp_template — > get ( 'POST_ID' ) ;
? >
async custom-element = amp-analytics src = https://cdn.ampproject.org/v0/amp-analytics-0.1.js >
async custom-element = amp-social-share src = https://cdn.ampproject.org/v0/amp-social-share-0.1.js >
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
функция crunchify_amp_add_analytics_social_code ( $ amp_template ) {
     $ post_id знак равно $ amp_template — > get ( 'POST_ID' ) ;
     ?>
< amp — analytics type = googleanalytics id = analytics1 >
type = application / json >
{
   vars : {
аккаунт : UA-43876549-1      // Изменить универсальный идентификатор отслеживания
   } ,
   «триггеры» : {
trackPageview : {
   на : видимый ,
   «запрос» : Вид страницы
}
   }
}
< / amp — аналитика >
   // Код социальной сети
   < div align = center >
     < amp — social — share type = twitter
         ширина = 30
         высота = 30 > < / amp — социальные сети — поделиться >
     < amp — social — share type = gplus
         ширина = 30
         height = 30 > < / amp — social — share >
     < amp — social — share type = facebook
         ширина = 30
         высота = 30
         data — param — app_id = 509582389234904 > < / amp — social — share >    // Изменить идентификатор вашего приложения
   < / div >
     < ? PHP
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Конец изменений ~~~~~~~~~~~~~~~~~~~

Шаг 5

Добавьте код Google Adsense на свою страницу AMP. В моем случае я хотел добавить 300x250 Код Adsense ниже рекомендуемого изображения. Там нет никакого официального крючка для использования, поэтому я изменил, single.php файл находится в <каталоге плагинов AMP> / amp/templates/single.php ,

ЧИТАТЬ ТАКЖЕ:  Как исправить ошибку 404 Page Not Found, добавив 301 Redirect с помощью метода .htaccess?

  • Идти к Plugins Меню
  • Нажмите Editor
  • выберите AMP Plugin
  • Идти к single.php файл
  • Добавьте код AdSense, как показано в приведенном ниже фрагменте кода. Просто look for line featured-image и добавьте код Adsense после этого.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ this — > load_parts ( массив ( 'популярное изображение' ) ) ; ?>
// Adsense код СТАРТ
<Бр> ALIGN = Центр>
< amp — ширина объявления = 300 высота = 250
type = adsense
данные — объявление — клиент = ca-pub-xxxxxxxxxxxxxxxx
data — ad — slot = 0110036438 >
< div placeholder > < / div >
< div fallback > < / div >
< / amp — объявление >
< / div >
// Adsense код END
< div class = amp-wp-article-content >

И все готово. Просто очистите кэш своего сайта и проверьте страницу AMP. Вы увидите, что все значки Google Analytics, Adsense и социальных сетей работают правильно

Что теперь?

Давайте проверим и проверим вашу страницу AMP для любой проблемы. Перейдите на https://validator.ampproject.org/ и проверьте результат.

Как Google собирается сканировать страницы постов AMP?

Теперь у вас есть оба AMP and non-AMP versions AMP Plugin автоматически добавит метатег отношения ниже на обе ваши страницы.

Проверьте это на странице без AMP

Вы должны увидеть ссылку на AMP-версию страницы, чтобы сообщить об этом Google и другим платформам :

Проверьте это на странице AMP

Вы должны увидеть текст для ссылки на его не-AMP каноническую версию:

Теперь давайте подождем пару дней или хотя бы неделю, и вы должны увидеть страницы AMPlify в Google Search Console . Для меня это всего 4 дня, и я вижу почти 500 страниц, уже проиндексированных для результата AMP

Как проверить живой результат?

Просто найдите сообщение в Google на мобильном браузере, и вы должны увидеть AMP result на странице результатов поиска .

Кроме того, продолжайте посещать эту страницу или добавлять в закладки, так как я буду постоянно обновлять этот учебник в соответствии с моим обучением. Приятного ведения блога и помочь ускорить работу в сети.

Как настроить WordPress и AMP: Ускоренные мобильные страницы: Приложение Analytics, AdSense, Руководство по социальным сетям

0.00 (0%) 0 votes

ЭТО МОЖЕТ БЫТЬ ИНТЕРЕСНОЕЩЕ ОТ АВТОРА

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь