WordPress / openverse

Openverse is a search engine for openly-licensed media. This monorepo includes all application code.
https://openverse.org
MIT License
237 stars 188 forks source link

Add OpenGraph tags to Openverse WordPress.org Theme #125

Closed zackkrida closed 1 year ago

zackkrida commented 2 years ago

Problem

wp.org/openverse does not have an opengraph image set. We should set a default.

Description

This needs to be handled in our wp theme in the wp.org repo via php.

https://github.com/WordPress/wordpress.org/tree/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse

Example code (from the pattern directory!)

add_action( 'wp_head', __NAMESPACE__ . '\add_social_meta_tags' );

/**
 * Add meta tags for richer social media integrations.
 */
function add_social_meta_tags() {
    global $wporg_global_header_options;
    $default_image = get_stylesheet_directory_uri() . '/images/social-image.png';
    $og_fields = [];
    $og_fields = [
            'og:title'       => __( 'Block Pattern Directory', 'wporg-patterns' ),
            'og:description' => __( 'Add a beautifully designed, ready to go layout to any WordPress site with a simple copy/paste.', 'wporg-patterns' ),
            'og:site_name'   => $wporg_global_header_options['rosetta_title'] ?? 'WordPress.org',
            'og:type'        => 'website',
            'og:url'         => home_url(),
            'og:image'       => esc_url( $default_image ),
        ];

    foreach ( $og_fields as $property => $content ) {
        printf(
            '<meta property="%1$s" content="%2$s" />' . "\n",
            esc_attr( $property ),
            esc_attr( $content )
        );
    }

    if ( isset( $og_fields['og:description'] ) ) {
        printf(
            '<meta name="description" content="%1$s" />' . "\n",
            esc_attr( $og_fields['og:description'] )
        );
    }
}

Alternatives

Additional context

Implementation

zackkrida commented 2 years ago

These are now set client-side, but would need to be cached server-side in the PHP theme to display correctly in link previews, search engines, and so on.

https://github.com/WordPress/wordpress.org/pull/51

zackkrida commented 1 year ago

Closing since the planned iFrame approach makes this irrelevant.