onOffice-Web-Org / oo-wp-plugin

onOffice for WP-Websites
https://wp-plugin.onoffice.com
GNU General Public License v3.0
9 stars 9 forks source link

OpenGraph support #673

Closed fredericalpers closed 2 months ago

fredericalpers commented 8 months ago

Initiative

Improve the SEO support and settings of the onOffice for WP-Websites Plugin.

Epic

Implement OpenGraph support.

User story

As a real estate agent utilizing the onOffice for WP-Websites Plugin, I aim to enhance the visibility and appeal of my property listings on social media platforms. Currently, the plugin lacks native support for OpenGraph and Twitter Card data, necessitating the use of third-party SEO plugins. I request the implementation of integrated OpenGraph and Twitter card support within the plugin.

OpenGraph: https://ogp.me/

By implementing this feature, the onOffice for WP-Websites Plugin can provide real estate agents with an integrated solution for generating accurate and dynamic OpenGraph and Twitter Card datam enhancing the visual appeal and shareability of property linstings on social media platforms.

Tasks

yeneastgate commented 8 months ago
  • -- Toggle option that allows users to turn the automatic generation of OG and Twitter Card data on and off in case they want to use a third party SEO Plugin.

image

@fredericalpers Do you want to implement a "toggle option" like the image below?

fredericalpers commented 8 months ago

@yeneastgate yes! please go ahead and implement this as the toggle option :)

yeneastgate commented 8 months ago

@yeneastgate yes! please go ahead and implement this as the toggle option :)

@fredericalpers I need 4 days to implement and test it

dai-eastgate commented 7 months ago
  • "og:locale", "og:site name" based on property information.

@fredericalpers Please help me to confirm some points: 1. "og:locale" based on property information => Do you mean to display "map location of details estate"(based on longitude and latitude) for the "content" attribute for "og:locale" tag? ex: map location of details estate: Gnutz is in Germany (locale: de_DE) => <meta property="og:locale" content="de_DE">

image

My Suggest: Normally, third-party plugins (ex: Rank Math SEO and Yoast SEO), are taken according to the language the website supports. image

2. "og:site name" based on property information. => Can you explain specifically the information Which you want to display for the "content" attribute for the "og:site_name" tag?

My Suggest: Normally, 3rd party plugins (Rank Math SEO and Yoast SEO)

- Rank Math SEO: https://rankmath.com/kb/open-graph-meta-tags/ "site_name": get "site title" in WP settings. image

- Yoast SEO: https://yoast.com/help/website-name-alternate-website-name-and-alternate-organization-name/ "site_name": get "site title" in WP settings. image

dai-eastgate commented 7 months ago
  • "og:image: from enterprise images ( be aware of further meta properties of the og:images)"

@fredericalpers

  1. Do you mention "og:image:height" and "og:image:width"? image

Note: I found recommendations for the "og:image" tag: Open Graph: min: og:image:height = 200, og:image:width = 200 max: og:image:height = 1200, og:image:width = 630 image

Twitter Card: min: twitter:image:height = 300, twitter:image:width = 157 max: twitter:image:height = 4096, twitter:image:width = 4096 image

=> Do you want to implement the recommended sizes for "og:image:height" and "og:image:width"?

2. Block: "The image is not displayed when sharing links on Twitter." Cause: URL (URL image in onOffice enterprise) used for the "content" attribute of "og:image" tag is not passing Twitter's validator card ex: - URL in onOffice enterprise: https://image.onoffice.de/smart25/Objekte/index.php?kunde=MAT-TRAFFIC&datensatz=559&filename=83fad556-ffbb-42a2-8a6f-1d5d25917d2c.jpg - This is the link response of the API result: image

- Card validator of Twitter: https://cards-dev.twitter.com/validator - Result from check validate: ERROR: Fetching the page failed because it's denied by "robots.txt". => I need more time to check the solution to this block by robots.txt and respond to you the results investigation as soon as possible.

fredericalpers commented 7 months ago

@dai-eastgate

  1. "og:locale" based on property information

You are right, this is a mistake on my end. This should be set by the websites language.

  1. "og:site name" based on property information.

You are right, this is a mistake on my end. This should be set by the websites title.

Do you mention "og:image:height" and "og:image:width"?

Yes, I'm talking about all related meta properties of the og:image tag. Please go ahead and use the recommended widths and heights.

Block: "The image is not displayed when sharing links on Twitter."

I'm assuming this is something we can not fix then unless the robots.txt will be changed on the file hosting server?

dai-eastgate commented 7 months ago

You are right, this is a mistake on my end. This should be set by the websites language.

You are right, this is a mistake on my end. This should be set by the websites title.

Yes, I'm talking about all related meta properties of the og:image tag. Please go ahead and use the recommended widths and heights.

@fredericalpers I got it, thanks!

I'm assuming this is something we can not fix then unless the robots.txt will be changed on the file hosting server?

I'll find out more and let you know soon

dai-eastgate commented 7 months ago

@fredericalpers I have implemented Open Graph and Twitter Card integration into the onOffice plugin:

  1. For Open Graph:

    • og:title: OK
    • og:description: OK
    • og:image: OK
    • og:type: OK
    • og:url: OK
    • og:locale: OK
    • og:site name: OK
  2. For Twitter Cards:

    • twitter:title: OK
    • twitter:description: OK
    • twitter:image: Block because of robots.txt

Please take a look at my video demo and let me know your opinion about this. Thanks!

https://files.fm/u/wcqczwuwyt#/view/uhmfrzzp56

fredericalpers commented 7 months ago

@dai-eastgate looks good to me! this feature will make a lot of customers very happy :)

I will send a ticket about the blocking of twitter:image through the robots.txt to our IT-Department and update you as soon as possible.

fredericalpers commented 6 months ago

@dai-eastgate we want to implement everything even though the robots.txt might still be blocking the twitter:image, so that as soon as the robots.txt is changed the images will work. Therefore I will label this as "in review"