nextjs metaラベルはkakao共有に適用されず、プレビューエラーを解決する方法
2464 ワード
nextjsでKakaoTalkを共有する場合、
正しいopen graphコードが入力されていますが.
常にメタタグが適用されないopen graph
KakaoDebTalkにアップしましたが、どう見ても私たちの状況に合わないアドバイスばかり…
それで最終的に組長にお願いしました.
metaラベルのappを適用します.tsxでコンソールをデバッグしました.
そこで、以下のように修正しました.
(したがって変数名もisServer Side)、、、
(ただし、通常、フロントはnot nullを返します.定義されていない場合を除きます)
要するに、metaラベルが適用されることを最終的に知ることができます.
HTMLコードが良く、metaタグが生成プレビューを受け付けているのが見えます😭 に感謝
あ、それから、レンダリングが正しいかどうか
https://developers.facebook.com/tools/debug/?locale=ko_KR
私のホームページがHTMLコードをどのように表現しているかを見ることができます!
週末を過ごして、解決してくれて嬉しいです.😆😆
私も組長のようにします.有能な開発者になりたいのですが、、、、😊
正しいopen graphコードが入力されていますが.
常にメタタグが適用されないopen graph
KakaoDebTalkにアップしましたが、どう見ても私たちの状況に合わないアドバイスばかり…
それで最終的に組長にお願いしました.
metaラベルのappを適用します.tsxでコンソールをデバッグしました.
export const WithContextApp = (props: AppProps) => {
const { loading, error, data } = useQuery<me>(ME, {
client,
});
const me = data?.Me || undefined;
const isLogined = !!me;
if (loading) return false;
return (
<AppContext.Provider
value={{
me,
isLogined,
}}
>
<App {...props} />
</AppContext.Provider>
);
};
loadがtrueを表示するとfalseに戻りhtmlタグがまったく適用されないことに気づきます...そこで、以下のように修正しました.
const isServerSide = typeof window === "undefined";
if (!isServerSide && loading) return false;
ここでtypeofwindowは定義されておらず、windowがサーバ側にあることを示します.(したがって変数名もisServer Side)、、、
(ただし、通常、フロントはnot nullを返します.定義されていない場合を除きます)
要するに、metaラベルが適用されることを最終的に知ることができます.
HTMLコードが良く、metaタグが生成プレビューを受け付けているのが見えます😭 に感謝
あ、それから、レンダリングが正しいかどうか
https://developers.facebook.com/tools/debug/?locale=ko_KR
私のホームページがHTMLコードをどのように表現しているかを見ることができます!
週末を過ごして、解決してくれて嬉しいです.😆😆
私も組長のようにします.有能な開発者になりたいのですが、、、、😊
Reference
この問題について(nextjs metaラベルはkakao共有に適用されず、プレビューエラーを解決する方法), 我々は、より多くの情報をここで見つけました https://velog.io/@gu2144/nextjs-meta태그가-적용이-안되어-kakao-공유시-미리보기-오류의-해결법テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol