Универсальний (изоморфный) «шлем» для React js или Как удобно работать с head на React js / Comments / Habr

BoryaMogila Oct 8 2016 at 11:11

Первый момент изоморфность, document.title на сервере не работает. Второй, представим что вы хотите нормальний шаринг, притом разный для разных соц сетей. У нас это выглядит премерно так

<title>Новостройки Украины</title>
    <meta name="title" content="Новостройки Украины" />
    <meta name="description" content="Каталог квартир в новостройках. Купить недорогую квартиру в новостройке от застройщика можно на сайте DOM.RIA." />

    <meta property="og:title" content="Новостройки Украины" />
    <meta property="og:description" content="Каталог квартир в новостройках. Купить недорогую квартиру в новостройке от застройщика можно на сайте DOM.RIA." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://dom.ria.com/ru/%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8/" />
    <meta property="og:locale" content="ru_UA"/>
    <meta property="og:locale:alternate" content="uk_UA"/>
    <meta property="og:site_name" content="DOM.RIA.com" />
    
    
    
    <meta property="og:image:width" content="620" />
    <meta property="og:image:height" content="460" />
    
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/92/9249/9249fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/148/14876/14876fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/92/9286/9286fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/95/9572/9572fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/107/10732/10732fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/115/11563/11563fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/129/12993/12993fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/130/13082/13082fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/75/7562/7562fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/131/13176/13176fl.jpg" />
    

    <meta property="fb:app_id" content="*******" />
    <!-- for yandex webmaster -->
    <meta name='yandex-verification' content='********' />


    

    
    <link rel="alternate" hreflang="uk-UA" href="https://dom.ria.com/uk/%D0%9D%D0%BE%D0%B2%D0%BE%D0%B1%D1%83%D0%B4%D0%BE%D0%B2%D0%B8/"/>
    

    
    <link rel="alternate" hreflang="ru-UA" href="https://dom.ria.com/ru/%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8/"/>

Comments 6

vintage Oct 7 2016 at 23:31

Меня смущает, то вложенный компонент затирает title родителя вместо того, чтобы добавлять значение вначало через разделитель. Костыль с titleTemplate действует лишь на один уровень.

BoryaMogila Oct 8 2016 at 11:04

С вами согласен, как мы знаем идеальных решений нет. Но думаю не составит труда написать на пару символов больше.

frenzzyman Oct 8 2016 at 11:04

А можете так же пояснить для чего может понадобиться обновлять base, link и meta теги уже после загрузки страницы? Ведь для того чтобы обновить заголовок document.title = 'Новый заголовок' не обязательно тянуть отдельную библиотеку.

M-A-XG Oct 9 2016 at 18:17

Создаем себе проблему, а потом героически ее решаем :)

BoryaMogila Oct 10 2016 at 09:06

задачи создают менеджера, а мы их решаем.)))