Implement Open Graph meta tags in AnnuncioDettaglio for improved SEO and social sharing
This commit is contained in:
parent
0744d032a3
commit
3748afbd7e
1 changed files with 90 additions and 86 deletions
|
|
@ -73,6 +73,30 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
|
||||||
flag,
|
flag,
|
||||||
meta,
|
meta,
|
||||||
}: AnnuncioProps) => {
|
}: AnnuncioProps) => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Head>
|
||||||
|
<title>{`${cod} | ${meta.title}`}</title>
|
||||||
|
<meta property="description" content={meta.description} />
|
||||||
|
<meta property="og:url" content={meta.ogUrl} />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content={`${cod} | ${meta.title}`} />
|
||||||
|
<meta property="og:description" content={meta.description} />
|
||||||
|
<meta property="og:image" content={meta.ogImage} />
|
||||||
|
<meta property="og:image:width" content="1200" />
|
||||||
|
<meta property="og:image:height" content="630" />
|
||||||
|
<meta
|
||||||
|
property="og:logo"
|
||||||
|
content={`${env.NEXT_PUBLIC_BASE_URL}/Infoalloggi.png`}
|
||||||
|
/>
|
||||||
|
<meta property="og:site_name" content="Infoalloggi.it" />
|
||||||
|
</Head>
|
||||||
|
<AnnuncioView cod={cod} flag={flag} />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const AnnuncioView = ({ cod, flag }: Omit<AnnuncioProps, "meta">) => {
|
||||||
const session = useSession();
|
const session = useSession();
|
||||||
const { locale } = useTranslation();
|
const { locale } = useTranslation();
|
||||||
|
|
||||||
|
|
@ -87,105 +111,84 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
|
||||||
|
|
||||||
if (isLoading || session.status === "pending") return <LoadingPage />;
|
if (isLoading || session.status === "pending") return <LoadingPage />;
|
||||||
if (
|
if (
|
||||||
(!isLoading && !data) ||
|
!data ||
|
||||||
session.status === "error" ||
|
session.status === "error" ||
|
||||||
(data && data.stato === "Sospeso")
|
(data && data.stato === "Sospeso")
|
||||||
) {
|
) {
|
||||||
return <FailedAnnuncioLoading />;
|
return <FailedAnnuncioLoading />;
|
||||||
}
|
}
|
||||||
if (!isLoading && data) {
|
|
||||||
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
|
|
||||||
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
|
|
||||||
|
|
||||||
const filteredCaratt = data.caratteristiche
|
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
|
||||||
? filteredCaratteristiche(data.caratteristiche)
|
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
const filteredCaratt = data.caratteristiche
|
||||||
<AnnuncioContext.Provider value={data}>
|
? filteredCaratteristiche(data.caratteristiche)
|
||||||
<TouchProvider>
|
: null;
|
||||||
<main>
|
|
||||||
<Head>
|
|
||||||
<title>{`${cod} | ${meta.title}`}</title>
|
|
||||||
<meta property="description" content={meta.description} />
|
|
||||||
<meta property="og:url" content={meta.ogUrl} />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content={`${cod} | ${meta.title}`} />
|
|
||||||
<meta property="og:description" content={meta.description} />
|
|
||||||
<meta property="og:image" content={meta.ogImage} />
|
|
||||||
<meta property="og:image:width" content="1200" />
|
|
||||||
<meta property="og:image:height" content="630" />
|
|
||||||
<meta
|
|
||||||
property="og:logo"
|
|
||||||
content={`${env.NEXT_PUBLIC_BASE_URL}/Infoalloggi.png`}
|
|
||||||
/>
|
|
||||||
<meta property="og:site_name" content="Infoalloggi.it" />
|
|
||||||
</Head>
|
|
||||||
<div className="mx-auto w-full px-2 sm:px-8">
|
|
||||||
<CarouselAnnuncio immagini={data.url_immagini} />
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:py-8 md:flex-row-reverse md:gap-2">
|
return (
|
||||||
<div className="mb-6 flex flex-col md:mb-0 md:w-1/3">
|
<AnnuncioContext.Provider value={data}>
|
||||||
<div className="flex w-full flex-col flex-nowrap items-center justify-center gap-6">
|
<TouchProvider>
|
||||||
<CardInfos data={data} />
|
<div className="mx-auto w-full px-2 sm:px-8">
|
||||||
{session.user?.isAdmin ? (
|
<CarouselAnnuncio immagini={data.url_immagini} />
|
||||||
<Link
|
|
||||||
href={`/area-riservata/admin/edit-annuncio/${data.id}`}
|
<div className="flex flex-col sm:py-8 md:flex-row-reverse md:gap-2">
|
||||||
className={cn(
|
<div className="mb-6 flex flex-col md:mb-0 md:w-1/3">
|
||||||
"flex w-full flex-row gap-4",
|
<div className="flex w-full flex-col flex-nowrap items-center justify-center gap-6">
|
||||||
buttonVariants({ variant: "default" }),
|
<CardInfos data={data} />
|
||||||
)}
|
{session.user?.isAdmin ? (
|
||||||
>
|
<Link
|
||||||
<Edit className="size-5" /> Modifica annuncio
|
href={`/area-riservata/admin/edit-annuncio/${data.id}`}
|
||||||
</Link>
|
className={cn(
|
||||||
) : (
|
"flex w-full flex-row gap-4",
|
||||||
<AnnuncioInteractions
|
buttonVariants({ variant: "default" }),
|
||||||
session={session}
|
|
||||||
disabled={flag === "true"}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
{data.tipo &&
|
>
|
||||||
(data.tipo == "Transitorio" ||
|
<Edit className="size-5" /> Modifica annuncio
|
||||||
data.tipo == "Stabile") && (
|
</Link>
|
||||||
<>
|
) : (
|
||||||
<Pricing
|
<AnnuncioInteractions
|
||||||
tipologia={
|
session={session}
|
||||||
data.tipo == "Transitorio"
|
disabled={flag === "true"}
|
||||||
? TipologiaPosizioneEnum.Transitorio
|
|
||||||
: TipologiaPosizioneEnum.Stabile
|
|
||||||
}
|
|
||||||
isDesktop={isDesktop}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mx-2 md:w-2/3">
|
|
||||||
<TestiAnnuncio
|
|
||||||
titolo={titolo}
|
|
||||||
description={description}
|
|
||||||
filteredCaratt={filteredCaratt}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
)}
|
||||||
|
{data.tipo &&
|
||||||
|
(data.tipo == "Transitorio" || data.tipo == "Stabile") && (
|
||||||
|
<>
|
||||||
|
<Pricing
|
||||||
|
tipologia={
|
||||||
|
data.tipo == "Transitorio"
|
||||||
|
? TipologiaPosizioneEnum.Transitorio
|
||||||
|
: TipologiaPosizioneEnum.Stabile
|
||||||
|
}
|
||||||
|
isDesktop={isDesktop}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<AnnuncioFooter
|
</div>
|
||||||
tipo={data.tipo}
|
<div className="mx-2 md:w-2/3">
|
||||||
comune={data.comune}
|
<TestiAnnuncio
|
||||||
consegna={data.consegna}
|
titolo={titolo}
|
||||||
url_video={data.url_video || []}
|
description={description}
|
||||||
first_image={
|
filteredCaratt={filteredCaratt}
|
||||||
data.url_immagini && data.url_immagini[0]
|
|
||||||
? data.url_immagini[0]
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</TouchProvider>
|
<AnnuncioFooter
|
||||||
</AnnuncioContext.Provider>
|
tipo={data.tipo}
|
||||||
);
|
comune={data.comune}
|
||||||
}
|
consegna={data.consegna}
|
||||||
return <div>Errore</div>;
|
url_video={data.url_video || []}
|
||||||
|
first_image={
|
||||||
|
data.url_immagini && data.url_immagini[0]
|
||||||
|
? data.url_immagini[0]
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TouchProvider>
|
||||||
|
</AnnuncioContext.Provider>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export async function getStaticProps(
|
export async function getStaticProps(
|
||||||
|
|
@ -201,6 +204,7 @@ export async function getStaticProps(
|
||||||
await ssg.annunci.getAnnuncio.prefetch({ cod: cod });
|
await ssg.annunci.getAnnuncio.prefetch({ cod: cod });
|
||||||
|
|
||||||
const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod });
|
const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod });
|
||||||
|
console.log("meta", meta);
|
||||||
|
|
||||||
const flag = await ssg.settings.GetFlagValue.fetch({
|
const flag = await ssg.settings.GetFlagValue.fetch({
|
||||||
id: "ANNUNCIO_INTERACTIONS_DISABLED",
|
id: "ANNUNCIO_INTERACTIONS_DISABLED",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue