Use property attribute for OpenGraph title and image

[obiwanpelosi]

Fixes

Fixes #3211 by @sarayourfriend

Description

Change OpenGraph tags for title, description, and image from using a name attribute to using a property attribute instead.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[dhruvkb]

Thanks for contributing to the issue @RogueCode007! There are some changes required to make the code work properly. Additionally, after making these changes, you will need to update the tests.

[dhruvkb]

These types are imported from the vue-meta package and must use the name set by that package. Please revert this change.

[dhruvkb]

The robots meta tag must use name and content. Please revert this change.

[obulat]

@RogueCode007, og.ts only creates the meta for single result pages (single image and single audio).
To change the meta for other pages, you'll need to update these lines:

openverse/frontend/src/constants/meta.ts

Lines 27 to 31 in 0d95b62

	{ hid: "og:title", name: "og:title", content: "Openverse" },
	{
	hid: "og:image",
	name: "og:image",
	content: "/openverse-default.jpg",

[obiwanpelosi]

@RogueCode007, og.ts only creates the meta for single result pages (single image and single audio). To change the meta for other pages, you'll need to update these lines:

openverse/frontend/src/constants/meta.ts

Lines 27 to 31 in 0d95b62

	{ hid: "og:title", name: "og:title", content: "Openverse" },
	{
	hid: "og:image",
	name: "og:image",
	content: "/openverse-default.jpg",

ah thanks! i was wondering what was wrong

@RogueCode007, og.ts only creates the meta for single result pages (single image and single audio). To change the meta for other pages, you'll need to update these lines:

openverse/frontend/src/constants/meta.ts

Lines 27 to 31 in 0d95b62

	{ hid: "og:title", name: "og:title", content: "Openverse" },
	{
	hid: "og:image",
	name: "og:image",
	content: "/openverse-default.jpg",

[obulat]

Awesome work, @RogueCode007 ! Thank you for your contribution 🎉

[dhruvkb]

All good, LGTM. Tested locally and everything works. Thanks for the contribution @RogueCode007!