Садржај
- Значај елемента главе за СЕО
- Направите СЕО компоненту главе
- Подесите компоненту
- Увезите компоненту
- Креирајте својства компоненте
- Користите својства у својој компоненти
Иако је Реацт моћна ЈаваСцрипт библиотека, она не укључује све делове који су вам потребни за изградњу једноставног, функционалног изгледа веб странице. НектЈС је Реацт оквир који вам омогућава да лако правите сервера приказане апликације и веб локације.
НектЈС такође одмах укључује бројне алате и функције попут Вебпацк-а, Бабел-а, динамичког усмеравања и преузимања. Што је најважније, открио сам да је НектЈС веома СЕО-фриендли.
Овај оквир вам омогућава да користите рендеровање на страни сервера, што не само да чини да се ваше апликације и веб странице учитавају знатно брже, већ и да ваше веб странице Реацт много олакшају претраживачима.
НектЈС такође олакшава стварање добро сегментиране архитектуре локације коришћењем динамичког усмеравања или прилагођеног усмеравања сервера. На пример, можете лако да сегментирате своју веб страницу у различите силосе попут / артицлес /, / продуцтс / и / сервицес / за бољу структуру садржаја.
Најбоље од свега је што можете да искористите све ствари које чине Реацт изврсним, попут компоненти, својстава компоненти и стања компонената, да примените заиста флексибилне технике оптимизације на страници. У овом чланку ћу детаљно израдити добро оптимизовану главну компоненту за Реацт.
Значај елемента главе за СЕО
Пре него што пређем на то како да направим ову главну компоненту, хајде да прво разговарамо о томе зашто је то важно и шта ћемо оптимизовати.
Елемент хеад на вашој веб локацији биће један од најважнијих одељака када је у питању техничка СЕО. Као прво, сви метаподаци веб локације су постављени у глави. Те ознаке укључују наслов, мета опис, кључне речи на страници, све релевантне информације о аутору и поставке оквира за приказ.
Елемент хеад је такође одговоран за постављање других важних ознака као што су ваша канонска УРЛ ознака, било које релевантне Фацебоок ОпенГрапх ознаке (ОГ тагови) или Твиттер картице и ваше мета роботске ознаке. Свака од ових ознака одговорна је за пренос различитих информација Гоогле-у или друштвеним мрежама, тако да могу боље разумети, индексирати и делити ваш садржај.
Неправилно конфигурисани метаподаци на вашој веб локацији могу бити катастрофални за вашу укупну оптимизацију веб странице и дефинитивно могу проузроковати ваше рангирање
Неправилно конфигурисани метаподаци на вашој веб локацији могу бити катастрофални за вашу укупну оптимизацију веб странице и дефинитивно могу проузроковати ваше рангирање.
На пример, две најгоре казне са којима би ваша веб локација могла да се суочи са становишта оптимизације странице су казна „дупликата ознаке наслова“ и казна „дупликата мета ознаке“. Ове две ознаке одговорне су за то да Гоогле-у дају ’нагиб лифта’ ваше веб локације. Такође диктирају текст који ће корисник видети када се ваша веб страница прикаже у резултатима Гоогле претраге.
Ако свака страница на вашој веб локацији има исти тачан наслов и исти тачан опис, Гоогле ће тешко разумети о чему се ради на вашој веб локацији. Као резултат тога, Гоогле неће обраћати превише пажње на вашу веб страницу и дефинитивно је неће сматрати надлежним власништвом.
Ако сте заинтересовани да сазнате више о техничком СЕО-у на страници, погледајте више о мом приступу на СпецкиБои-у.
Сад кад сте разумели мало више о елементу главе и зашто је толико важан испод хаубе, погледајмо како да направите СЕО компоненту главе за Реацт.
Направите СЕО компоненту главе
Компонента главе прилагођена СЕО-у коју сам детаљно описао у овом чланку специфична је за НектЈС. Међутим, ако користите другачији Реацт оквир или само користите Реацт, можете користити Реацт Хелмет уместо главне компоненте НектЈС.
Прво што ћете желети је да поставите основну структуру главе. Код у наставку може послужити као пример, али слободно му додајте или уклоните ствари како вам одговара. Ипак, у најмању руку, ваша глава треба да садржи ознаку наслова, ознаку мета описа, канонски УРЛ и све релевантне друштвене ознаке.
хеад> титле> / титле> мета наме = "десцриптион" цонтент = "" /> мета проперти = "ог: типе" цонтент = "вебсите" /> мета наме = "ог: титле" проперти = "ог: титле" цонтент = "" /> мета име = "ог: десцриптион" проперти = "ог: десцриптион" цонтент = "" /> мета проперти = "ог: сите_наме" цонтент = "" /> мета проперти = "ог: урл" цонтент = "" /> мета наме = "твиттер: цард" цонтент = "суммари" /> мета наме = "твиттер: титле" цонтент = "" /> мета наме = "твиттер: десцриптион" цонтент = {пропс.десц} /> мета наме = "твиттер: сите" цонтент = "" /> мета наме = "твиттер: цреатор" цонтент = "" /> линк рел = "ицон" типе = "имаге / пнг" хреф = "/ статиц / имагес / фавицон .ицо "/> линк рел =" аппле-тоуцх-ицон "хреф =" / статиц / имагес / фавицон.ицо "/> линк рел =" стилесхеет "хреф =" "/> мета проперти =" ог: имаге "цонтент = "" /> мета наме = "твиттер: имаге" цонтент = "" /> линк рел = "цаноницал" хреф = "" /> сцрипт типе = "тект / јавасцрипт" срц = ""> / сцрипт> / хеад>
Подесите компоненту
Затим ћете желети да направите нову делимичну датотеку за своју компоненту. Можете назвати делимичну датотеку сео-мета.јс или слично. Ову датотеку треба чувати у парцијалне именик.
Ваша почетна компонента ће изгледати отприлике овако:
импорт Хеад фром 'нект / хеад' цонст Мета = (реквизити) => (Хеад> титле> / титле> мета наме = "десцриптион" цонтент = "" /> мета проперти = "ог: типе" цонтент = "вебсите" / > мета наме = "ог: титле" проперти = "ог: титле" цонтент = "" /> мета наме = "ог: десцриптион" проперти = "ог: десцриптион" цонтент = "" /> мета проперти = "ог: сите_наме "цонтент =" "/> мета проперти =" ог: урл "цонтент =" "/> мета наме =" твиттер: цард "цонтент =" суммари "/> мета наме =" твиттер: титле "цонтент =" "/> мета наме = "твиттер: десцриптион" цонтент = {пропс.десц} /> мета наме = "твиттер: сите" цонтент = "" /> мета наме = "твиттер: цреатор" цонтент = "" /> линк рел = "ицон "типе =" имаге / пнг "хреф =" / статиц / имагес / фавицон.ицо "/> линк рел =" аппле-тоуцх-ицон "хреф =" / статиц / имагес / фавицон.ицо "/> линк рел =" табела стилова "хреф =" "/> мета својство =" ог: имаге "цонтент =" "/> мета наме =" твиттер: имаге "цонтент =" "/> линк рел =" цаноницал "хреф =" "/> типе сцрипт = "тект / јавасцрипт" срц = ""> / сцрипт> / Хеад>) екпорт дефаулт Мета
Приметићете да пролазим реквизитиили својства моје компоненте. Ова својства ћемо користити за попуњавање наших метатагова.
Увезите компоненту
Након што подесите основну компоненту, можете да је увезете на своје странице. Компоненту можете да увезете додавањем следећег на врх странице.
увези Мета са „../партиалс/сео-мета.јс“
Сада можете да ставите мета компоненту у своју функцију рендеровања, баш као што бисте то урадили са матичном главном компонентом НектЈС.
Креирајте својства компоненте
Сада када сте увезли и поставили своју мета компоненту, желећете да подесите својства која ће вам бити потребна за ваше метаподатке. Обично бисте требали укључити наслов, опис и УРЛ за сваку страницу, али по потреби можете укључити и слике и друге податке.
Такође можете укључити својства за ЦСС и ЈаваСцрипт датотеке како бисте их условно могли учитати на странице по потреби. Са свим тим постављеним својствима, компонента би изгледала отприлике овако:
Мета титле = “Ово је наслов | Назив веб локације ”десц =„ Ово је опис ”цаноницал =„ хттпс://ввв.сомеурл.цом ”цсс =’ / статиц / цсс / стилес.цсс ’јс =’ / статиц / јс / сцриптс.јс ’/>
Ако само градите статичку веб локацију са НектЈС-ом, требали бисте бити у могућности да попуните својства статичким садржајем. Међутим, ако учитавате странице са динамичких рута и попуњавате предлошке страница динамичким кодом, желећете да динамички подесите ова својства.
Наша веб локација, Пропер Ноун, користи ВордПресс АПИ као извор података, али можете да користите упутства у наставку користећи готово било који РЕСТ или ГрапхКЛ АПИ.
Када захтевате страницу, желећете да прибавите и вратите релевантне метаподатке и податке о страници током гетИнитиалПропс () асинц функцију. То ће вам омогућити да користите динамичке податке у функцији приказивања како би Гоогле и други роботи могли да индексирају информације.
У зависности од вашег извора података и неколико других фактора, можда ћете заузети другачији приступ да бисте добили почетна својства, али ево основног приступа за почетак.
статиц асинц гетИнитиалПропс (цтк) {цонст рес = аваит фетцх (’// апи.соме-урл.цом/цасе_студиес/?слуг=’ + цтк.рек.парамс.слуг) цонст еррор_цоде = рес.статусЦоде> 200? рес.статусЦоде: нетачно; подаци цонст = чекају рес.јсон (); нека урл = 'хттпс: //' + цтк.рек.хеадерс.хост + '/' + цтк.рек.парамс.слуг нека мета_титле = чека податке [0] .мета_титле нека мета_десц = чека податке [0] .мета_десц ретурн {еррор_цоде, цасе_студи: дата, мета_титле: мета_титле, мета_десц: мета_десц, урл: урл}}
Сада ћете моћи да приступите својствима која сте поставили у оквиру функције приказа. Када би се користили у вашем коду, изгледали би отприлике овако.
Мета титле = {тхис.пропс.мета_титле} десц = {тхис.пропс.мета_десц} цаноницал = {тхис.пропс.урл} цсс = '/ статиц / цсс / стилес.цсс' јс = '/ статиц / јс / сцриптс. јс '/>
Користите својства у својој компоненти
Последњи корак је подешавање компоненте тако да користи својства која јој се прослеђују. Иако ће нека својства попут наслова и описа бити постављена на свакој страници, друга попут ЦСС-а и ЈС-а могу бити условна. Ово ћете желети узети у обзир у својој компоненти.
У нашем примеру преносимо својства компоненти користећи аргумент реквизити. Тада можемо приступити појединачним реквизитима користећи њихова имена, на пример, реквизити.титле или реквизити.десц.
Када постављате условне блокове, можете приступити овако:
{пропс.цсс && линк рел = "таблица стилова" хреф = {`$ {пропс.цсс}`} />}
На овај начин, ако није постављен ЦСС, нећете поставити празну ознаку везе на својој страници. Исти приступ можете користити за ЈаваСцрипт датотеке.
Када завршите са попуњавањем компоненте главе, требало би да изгледа отприлике овако:
импорт Хеад фром 'нект / хеад' цонст Мета = (пропс) => (Хеад> титле> {пропс.титле} / титле> мета наме = "десцриптион" цонтент = {пропс.десц} /> мета проперти = "ог: укуцајте "цонтент =" вебсите "/> мета наме =" ог: титле "проперти =" ог: титле "цонтент = {пропс.титле} /> мета наме =" ог: десцриптион "проперти =" ог: десцриптион "цонтент = {пропс.десц} /> мета својство = "ог: сите_наме" цонтент = "Правилна именица" /> мета својство = "ог: урл" цонтент = {`$ {пропс.цаноницал}`} /> мета наме = "твиттер : цард "цонтент =" суммари "/> мета наме =" твиттер: титле "цонтент = {пропс.титле} /> мета наме =" твиттер: десцриптион "цонтент = {пропс.десц} /> мета наме =" твиттер: сите "цонтент =" @ Проперноунцо "/> мета наме =" твиттер: цреатор "цонтент =" @ Проперноунцо "/> линк рел =" ицон "типе =" имаге / пнг "хреф =" / статиц / имагес / фавицон.ицо "/> линк рел =" аппле-тоуцх-ицон "хреф =" / статиц / имагес / фавицон.ицо "/> {пропс.цсс && линк рел =" стилесхеет "хреф = {` $ {пропс.цсс} `} />} {пропс.имаге? (мета својство = "ог: имаге" цонтент = {`$ {пропс.имаге}`} />): (мета својство = "ог: имаге" цон шатор = "хттпс://ввв.проперноун.цо/статиц/имагес/пропер-ноун-социал.пнг" />)} {пропс.имаге && мета наме = "твиттер: имаге" цонтент = {`$ {реквизити. слика} `} />} {пропс.цаноницал && линк рел =" цаноницал "хреф = {` $ {пропс.цаноницал} `} />} {пропс.јс && сцрипт типе =" тект / јавасцрипт "срц = {` $ {пропс.јс} `}> / / сцрипт>} / Хеад>) екпорт дефаулт Мета
