반응 js에서 동적 값이있는 메타 태그를 사용하는 방법은 무엇입니까?

반응 js에서 동적 값을 가진 메타 태그를 사용하는 방법에 관해 도움을 줄 수있는 사람이 있습니까?반응 js에서 동적 값이있는 메타 태그를 사용하는 방법은 무엇입니까?

내 요구 사항 이미지를 참조하십시오, (반응이 오류가 발생 다른 하나의 태그 내에 완전한 HTML을 감싸 필요로하기 때문에) 내가 여기에 여분의 메타 태그 HTML 태그를 사용하고

code screenshot

. div/p를 사용하여 html 태그를 사용할 수도 있지만이 올바른 방법으로 반응 요소를 렌더링 할 수 있습니까? 그 메타 태그 내부보다 여분의 html 태그를 가지고 있습니다. 이게 SEO에서 효과가 있습니까?

메타 태그를 수동으로 사용하는 다른 좋은 방법을 제안 해주세요.

출처

2016-08-19 iamsonivivek

내가 공유 한 코드와 관련된 몇 가지 문제점이 있습니다.

메타 태그가 머리에 들어 있지만 반응 성분이 body 태그에 표시됩니다.
SEO 부분을 고려하면 google이 JS를 파싱 할 수 있으므로 귀하의 태그는 읽을 수 있지만 빙은 여전히 야후는 여전히 그렇게 할 수 없다고 생각한다면 (Google도 실제로 그렇게 효율적이지는 않습니다. 페이지 응용 프로그램)
반응 구성 요소가 Link을 사용하여 SPA의 경우에 해당한다고 가정하는 다른 구성 요소로 이동하면 크롤러가 직접 페이지에 연결하려고하기 때문에 작동하지 않습니다.

지금, 어쩌면 phatom-JS 또는 사전을 사용하여 미리 렌더링에 가서 당신이 하나의 구성 요소가 단일 페이지 응용 프로그램이있는 경우 react-helmet을 시도 할 수 있지만, 여러 구성 요소와 네비게이션을 포함하면 내가 당신을 제안 -render.io (간접적으로 팬텀을 사용함).

유일한 관심사가 메타 태그 인 경우 메타 태그를 HTML 코드에 직접 삽입하고이 아닌 을 삽입 할 수 있습니다. 이렇게하면 크롤러가 메타 태그를 볼 수 있습니다.

크롤러가 귀하의 콘텐츠를 보길 원한다면 사전 렌더링이 내가 지금 생각할 수있는 최상의 해결책입니다. https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

출처

2016-08-19 08:33:17

은 자세한 내용은이 블로그를 읽고 응용 프로그램을

반응 서버에서 메타 태그를 동적으로 생성 할 수 있습니다.

본질적으로, 귀하의 공개/index.html을 당신이 식별 문자열로 메타 데이터를 대체 할 파일 :

<!-- in public/index.html --> 
<title>$OG_TITLE</title> 
<meta name="description"  content="$OG_DESCRIPTION" /> 
<meta property="og:title"  content="$OG_TITLE" /> 
<meta property="og:description" content="$OG_DESCRIPTION" /> 
<meta property="og:image"  content="$OG_IMAGE" />

그리고 서버에서, 당신은 동적으로 생성 된 정보와 이러한 문자열을 대체 할을.

app.get('/about', function(request, response) { 
    console.log('About page visited!'); 
    const filePath = path.resolve(__dirname, './build', 'index.html') 
    fs.readFile(filePath, 'utf8', function (err,data) { 
    if (err) { 
     return console.log(err); 
    } 
    data = data.replace(/\$OG_TITLE/g, 'About Page'); 
    data = data.replace(/\$OG_DESCRIPTION/g, "About page description"); 
    result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png'); 
    response.send(result); 
    }); 
});

여기에이 튜토리얼에서 촬영 : https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

다음 노드와 Express를 예를 들어 경로는

출처

2018-01-18 17:29:59 Pavan

것은 당신이 당신이에서 번들 반응 제공하는 경우 - 서버 측 렌더링을 활성화 할 때 반응-문서 메타 NPM 모듈을 사용하여 달성 할 수

출처

2018-02-07 18:43:49 justswim

반응 js에서 동적 값이있는 메타 태그를 사용하는 방법은 무엇입니까?

답변

관련 문제