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,
|
||||
meta,
|
||||
}: 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 { locale } = useTranslation();
|
||||
|
||||
|
|
@ -87,105 +111,84 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
|
|||
|
||||
if (isLoading || session.status === "pending") return <LoadingPage />;
|
||||
if (
|
||||
(!isLoading && !data) ||
|
||||
!data ||
|
||||
session.status === "error" ||
|
||||
(data && data.stato === "Sospeso")
|
||||
) {
|
||||
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
|
||||
? filteredCaratteristiche(data.caratteristiche)
|
||||
: null;
|
||||
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
|
||||
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
|
||||
|
||||
return (
|
||||
<AnnuncioContext.Provider value={data}>
|
||||
<TouchProvider>
|
||||
<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} />
|
||||
const filteredCaratt = data.caratteristiche
|
||||
? filteredCaratteristiche(data.caratteristiche)
|
||||
: null;
|
||||
|
||||
<div className="flex flex-col sm:py-8 md:flex-row-reverse md:gap-2">
|
||||
<div className="mb-6 flex flex-col md:mb-0 md:w-1/3">
|
||||
<div className="flex w-full flex-col flex-nowrap items-center justify-center gap-6">
|
||||
<CardInfos data={data} />
|
||||
{session.user?.isAdmin ? (
|
||||
<Link
|
||||
href={`/area-riservata/admin/edit-annuncio/${data.id}`}
|
||||
className={cn(
|
||||
"flex w-full flex-row gap-4",
|
||||
buttonVariants({ variant: "default" }),
|
||||
)}
|
||||
>
|
||||
<Edit className="size-5" /> Modifica annuncio
|
||||
</Link>
|
||||
) : (
|
||||
<AnnuncioInteractions
|
||||
session={session}
|
||||
disabled={flag === "true"}
|
||||
/>
|
||||
return (
|
||||
<AnnuncioContext.Provider value={data}>
|
||||
<TouchProvider>
|
||||
<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">
|
||||
<div className="mb-6 flex flex-col md:mb-0 md:w-1/3">
|
||||
<div className="flex w-full flex-col flex-nowrap items-center justify-center gap-6">
|
||||
<CardInfos data={data} />
|
||||
{session.user?.isAdmin ? (
|
||||
<Link
|
||||
href={`/area-riservata/admin/edit-annuncio/${data.id}`}
|
||||
className={cn(
|
||||
"flex w-full flex-row gap-4",
|
||||
buttonVariants({ variant: "default" }),
|
||||
)}
|
||||
{data.tipo &&
|
||||
(data.tipo == "Transitorio" ||
|
||||
data.tipo == "Stabile") && (
|
||||
<>
|
||||
<Pricing
|
||||
tipologia={
|
||||
data.tipo == "Transitorio"
|
||||
? TipologiaPosizioneEnum.Transitorio
|
||||
: TipologiaPosizioneEnum.Stabile
|
||||
}
|
||||
isDesktop={isDesktop}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-2 md:w-2/3">
|
||||
<TestiAnnuncio
|
||||
titolo={titolo}
|
||||
description={description}
|
||||
filteredCaratt={filteredCaratt}
|
||||
>
|
||||
<Edit className="size-5" /> Modifica annuncio
|
||||
</Link>
|
||||
) : (
|
||||
<AnnuncioInteractions
|
||||
session={session}
|
||||
disabled={flag === "true"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{data.tipo &&
|
||||
(data.tipo == "Transitorio" || data.tipo == "Stabile") && (
|
||||
<>
|
||||
<Pricing
|
||||
tipologia={
|
||||
data.tipo == "Transitorio"
|
||||
? TipologiaPosizioneEnum.Transitorio
|
||||
: TipologiaPosizioneEnum.Stabile
|
||||
}
|
||||
isDesktop={isDesktop}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<AnnuncioFooter
|
||||
tipo={data.tipo}
|
||||
comune={data.comune}
|
||||
consegna={data.consegna}
|
||||
url_video={data.url_video || []}
|
||||
first_image={
|
||||
data.url_immagini && data.url_immagini[0]
|
||||
? data.url_immagini[0]
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
<div className="mx-2 md:w-2/3">
|
||||
<TestiAnnuncio
|
||||
titolo={titolo}
|
||||
description={description}
|
||||
filteredCaratt={filteredCaratt}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</TouchProvider>
|
||||
</AnnuncioContext.Provider>
|
||||
);
|
||||
}
|
||||
return <div>Errore</div>;
|
||||
</div>
|
||||
<AnnuncioFooter
|
||||
tipo={data.tipo}
|
||||
comune={data.comune}
|
||||
consegna={data.consegna}
|
||||
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(
|
||||
|
|
@ -201,6 +204,7 @@ export async function getStaticProps(
|
|||
await ssg.annunci.getAnnuncio.prefetch({ cod: cod });
|
||||
|
||||
const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod });
|
||||
console.log("meta", meta);
|
||||
|
||||
const flag = await ssg.settings.GetFlagValue.fetch({
|
||||
id: "ANNUNCIO_INTERACTIONS_DISABLED",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue