Да ли сте икада желели да се ваша Нект.јс локација прикаже као богат објекат када се дели на друштвеним медијима? Ако је тако, онда морате да примените Опен Грапх протокол.
Нект-сео пакет олакшава додавање Опен Грапх ознака на вашу Нект.јс локацију. Такође можете користити више ручни приступ за финију контролу над готовим резултатом.
Коначно, требало би да размотрите тачно које информације да укључите у своје ознаке.
Шта је Опен Грапх?
Протокол Опен Грапх је отворени стандард који омогућава програмерима да контролишу како друштвени медији приказују свој садржај. Првобитно га је развио Фацебоок, али су многе друге платформе од тада усвојиле протокол. То укључује Твиттер, ЛинкедИн и Пинтерест.
Опен Грапх вам омогућава да тачно одредите како други сајтови треба да приказују ваш садржај, осигуравајући да изгледа добро и да се лако чита. Такође омогућава већу контролу над начином на који се везе приказују. Ово олакшава праћење кликова и других показатеља ангажовања.
Зашто користити Опен Грапх протокол?
Постоје три главне области које би Опен Грапх требало да побољша: ангажовање друштвених медија, СЕО и саобраћај на веб локацији.
Опен Грапх може помоћи у побољшању ангажовања друштвених медија тако што корисницима олакшава да деле ваш садржај. Одређивањем како сајтови треба да приказују ваш садржај, можете га учинити визуелно привлачнијим и лакшим за читање. Ово, заузврат, може довести до више дељења и лајкова, као и до повећања стопе учесталости кликова.
2. Побољшајте СЕО
Опен Грапх такође може помоћи побољшајте свој СЕО. Одређивањем наслова, описа и слике за сваки део садржаја, можете да контролишете како се појављује у резултатима претраге. Ово може помоћи у повећању стопе учесталости кликова на вашој веб локацији, као и побољшању вашег укупног ранга.
3. Повећајте саобраћај на веб локацији
Коначно, Опен Грапх може помоћи у повећању саобраћаја на веб локацији. Олакшавајући корисницима да деле ваш садржај, можете повећати број људи који га виде. Ово, заузврат, може довести до већег броја посетилаца веб сајта и повећаног саобраћаја.
4. Побољшајте корисничко искуство
Још једна предност коришћења Опен Грапх протокола је да може побољшати корисничко искуство на вашој веб локацији. Укључивањем метаподатака можете помоћи приступачности и поново користити податке, осигуравајући да корисници виде најрелевантније информације. Ово може довести до бољег укупног искуства на вашој веб локацији, што може довести до већег броја поновних посетилаца.
Зашто користити Нект.јс?
Постоје два главна разлога да користите Нект.јс: да побољшате перформансе и да олакшате развој.
1. Побољшали перформансе
Нект.јс може да вам помогне да побољшате учинак тако што ћете поделити код у вашој апликацији и унапред преузети ресурсе. Ово може довести до бржег учитавања и смањеног оптерећења сервера.
2. Олакшајте развој
Нект.јс такође може олакшати развој пружањем једноставног начина за креирајте Реацт апликације које се приказују на серверу. Ово може учинити бржим и лакшим развој и примену Реацт апликација.
Како имплементирати Опен Грапх протокол у Нект.јс
Постоје два начина за имплементацију Опен Грапх протокола у Нект.јс: коришћење нект-сео пакета или креирање прилагођеног _доцумент.јс фајл.
Метод 1: Коришћење нект-сео пакета
Најлакши начин за имплементацију Опен Грапх протокола у Нект.јс је коришћење нект-сео пакета. Овај пакет ће аутоматски генерисати потребне ознаке за вас.
Да бисте инсталирали следећи-сео пакет, покрените следећу команду:
нпм инсталирајследећи-сео --сачуватиНакон инсталирања пакета, можете га користити додавањем следећег кода у свој индек.јс фајл:
увоз { НектСео } из 'нект-сео';конст ДемоПаге = () => (
<>
<НектСео
титле="Твој наслов"
десцриптион="Ово је демо опис"
канонски="https://www.example.com"
опенГрапх={{
урл: 'https://www.example.com',
наслов: 'Отворите наслов графикона',
Опис: 'Отворите опис графикона',
слике: [
{
урл: 'https://www.example.com/og-image01.jpg',
ширина: 800,
висина: 600,
алт: 'Ог Имаге Алт',
тип: 'имаге/јпег',
},
{
урл: 'https://www.example.com/og-image02.jpg',
ширина: 900,
висина: 800,
алт: 'Ог Слика Алт Сецонд',
тип: 'имаге/јпег',
},
{ урл: 'хттпс://ввв.екампле.цом/ог-имаге03.јпг' },
{ урл: 'хттпс://ввв.екампле.цом/ог-имаге04.јпг' },
],
Назив сајт: 'ИоурСитеНаме',
}}
твиттер={{
ручка: '@хандле',
сајт: '@сите',
Тип картице: 'суммари_ларге_имаге',
}}
/>
<стр>Демо страница</п>
</>
);
извозУобичајено ДемоПаге;
Овај код увози компоненту НектСео из пакета нект-сео и користи је за одређивање наслова, описа и слике странице. Такође специфицира назив сајта и Твиттер рукохват.
Покрените следећу команду да бисте покренули развојни сервер:
нпм рун девОтвори http://localhost: 3000 у вашем претраживачу да бисте видели демо страницу.
2. метод: Коришћење прилагођене датотеке _доцумент.јс
Други начин за имплементацију Опен Грапх протокола у Нект.јс је креирање прилагођеног _доцумент.јс фајл. Ова датотека ће вам омогућити да сами одредите ознаке Опен Грапх и креирајте код за вишекратну употребу за све странице.
Да подесите обичај _доцумент.јс датотеку, креирајте нову датотеку у свом странице директоријум са следећим садржајем:
увоз Документ, { Хтмл, Хеад, Маин, НектСцрипт} из 'следећи/документ';класаМиДоцументпротежеДокумент{
статичнеасинц гетИнитиалПропс (цтк) {
конст инитиалПропс = чекати Доцумент.гетИнитиалПропс (цтк);
повратак { ...инитиалПропс };
}дати, пружити() {
повратак (
<Хтмл>
<Глава>
<мета проперти="ог: урл" цонтент="https://www.example.com" />
<мета проперти="ог: наслов" цонтент="Отворите наслов графикона" />
<мета проперти="ог: опис" цонтент="Отворите опис графикона" />
<мета проперти="ог: слика" цонтент="https://www.example.com/og-image.jpg" />
<мета проперти="ог: име_сајта" цонтент="ИоурСитеНаме" />
<мета наме="твиттер: картица" цонтент="суммари_ларге_имаге" />
<мета наме="твиттер: сајт" цонтент="@сите" />
<мета наме="твиттер: креатор" цонтент="@хандле" />
</Head>
<тело>
<Главни />
<НектСцрипт />
</body>
</Html>
);
}
}
извозУобичајено МиДоцумент;
Додајте садржај испод у своју датотеку индек.јс:
конст ДемоПаге = () => (
<>
<стр>Демо страница</п>
</>
);
извозУобичајено ДемоПаге;
Овај код увози компоненту документа из следећег/документа и креира прилагођену МиДоцумент саставни део. Он одређује наслов, опис и слику за нашу страницу, као и назив сајта и Твиттер рукохват.
Покрените следећу команду да бисте покренули развојни сервер:
нпм рун девОтвори http://localhost: 3000 у вашем претраживачу да бисте видели демо страницу.
Додавање Опен Грапх ознака на вашу веб локацију може вам дати већу контролу над начином на који се појављује у објавама на друштвеним медијима и може помоћи у побољшању стопе учесталости кликова. Такође можете побољшати начин на који се ваша веб локација појављује у СЕРП-овима, што на крају може довести до побољшаног рангирања веб локације.
Постоји и много других начина за побољшање рангирања сајта. Требало би да оптимизујете своју веб локацију за мобилне уређаје и користите наслове и описе богате кључним речима. Али коришћење Опен Грапх ознака је брз и лак начин за почетак.