Question

所有内容都在此url中： https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fweally.org%2Fentity%2F5dcac229156b765cb8c45148%2Fissue%2F5dcac2085b0a145d1f08d16e

如果您转到Facebook正在测试并查找源代码的页面，则存在meta标记（它们甚至重复，但这是另一个问题） https://weally.org/entity/5dcac229156b765cb8c45148/issue/5dcac2085b0a145d1f08d16e

这是我的_document.js文件：我尝试在ssr的首次加载中强制实施标签

import React from 'react';
import Document, {Head, Main, NextScript} from 'next/document';
import {ServerStyleSheets} from '@material-ui/styles';
import theme from '../src/theme';
import {getIssueImageSrc} from "../src/utils/util";
import DeveloperError from "../src/error/DeveloperError";

const ISSUE_URL_PREFIX = '/entity/';

function isIssuePath(path) {
    return !path.startsWith(ISSUE_URL_PREFIX) && path.indexOf('/issue/') != -1
}

function getIssueIdFromPath(path) {

    const startIndex = path.indexOf('/issue/') + '/issue/'.length
    let otherParam = path.indexOf('/', startIndex);
    if (otherParam == -1) otherParam = path.length

    const issueId = path.substr(startIndex, otherParam - startIndex)
    console.log("issue id for paht ", path, "   is : ", issueId)
    return issueId
}

class MyDocument extends Document {
    render() {
        return (<html lang="en">
        <Head>
            <meta charSet="utf-8"/>
            {/* Use minimum-scale=1 to enable GPU rasterization */}
            <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
            />
            {/* PWA primary color */}
            <meta name="theme-color" content={theme.palette.primary.main}/>
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
            <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            />
            {this.props.desc && <meta property="og:description" content={this.props.desc}/>}
            {this.props.desc == null && <meta property="og:description"
                                                                                content="Make your complaint about any company visible to the entire world on WeAlly.org. We can finally look at the problems companies have with their customers, complain on WeAlly and join the responsible citizens"/>}
            {this.props.image && <meta property="og:description" content={this.props.image}/>}
            {this.props.image == null && <meta property="og:image" content={'https://weally.org/static/images/fb_splash.jpg'}/>}
            {this.props.title && <meta property="og:title" content={this.props.title}/>}
            {this.props.title == null && <meta property="og:title" content="Allied together, our complaints are powerful"/>}

            <link rel="icon" href="/static/images/favicon.ico"/>
            <script language="JavaScript" type="text/javascript" src="/static/js/scripts.js">
            </script>
            <meta property="og:url" content={`https://weally.org`}/>
            <meta property="og:type" content="website"/>

        </Head>
        <body>
        <Main/>
        <NextScript/>
        </body>
        </html>);
    }
}

MyDocument.getInitialProps = async ctx => {
    // Resolution order
    //
    // On the server:
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. document.getInitialProps
    // 4. app.render
    // 5. page.render
    // 6. document.render
    //
    // On the server with error:
    // 1. document.getInitialProps
    // 2. app.render
    // 3. page.render
    // 4. document.render
    //
    // On the client
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. app.render
    // 4. page.render

    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => originalRenderPage({
        enhanceApp: App => props => sheets.collect(<App {...props} />),
    });

    const initialProps = await Document.getInitialProps(ctx);
    const metaTags = {}

    if (!process.browser) {
        const path = ctx.asPath
        if (path.startsWith(ISSUE_URL_PREFIX)) {
            try {
                const issueId = getIssueIdFromPath(path)
                const mongoose = require('mongoose')
                const Complaint = mongoose.model('Complaint')
                const complaint = await Complaint.findById(issueId)

                metaTags.image = getIssueImageSrc(complaint)
                metaTags.desc = complaint.desc
                metaTags.title = complaint.title

            } catch (e) {
                console.log( "Error in meta data prefetching ", e )
            }
        }
    }

    const propsToReturn = {
        ...metaTags,
        ...initialProps, // Styles fragment is rendered after the app and page rendering finish.
        styles: (<React.Fragment>
            {initialProps.styles}
            {sheets.getStyleElement()}
        </React.Fragment>),
    }

    return propsToReturn
}


export default MyDocument;

我自然地再次检查了标签是否已插入此代码。

请提出任何想法，facebook总是退回到与此类网址根本不相关的“默认值”。还请注意，Facebook调试器抱怨og：image似乎根本看不到

Facebook无法读取nextjs生成的开放图标签

0 个答案: