Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

Laravel layouts live in resources/views/layouts/. Most apps use app.blade.php as the base layout. Blade views extend layouts with @extends('layouts.app').

Add Open Graph meta tags

Add the following meta tags to your layout’s <head>. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms.

<!-- resources/views/layouts/app.blade.php -->
<html>
  <head>
    <meta property="og:title" content="@yield('og_title', 'My Site')">
    <meta property="og:description" content="@yield('og_description', 'Welcome to my site')">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="My Site">
    <meta property="og:type" content="@yield('og_type', 'website')">
    <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net/{{ request()->path() }}">
    <meta name="twitter:card" content="summary_large_image">
  </head>
  <body>
    @yield('content')
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with your connection URL, and "My Site" with your actual site name.

Note: request()->path() returns the path without a leading slash (e.g., posts/1 not /posts/1), so include the / after the connection URL domain.

What each tag does

Tag	Purpose
`og:title`	The title shown in the link preview
`og:description`	The description shown below the title
`og:url`	The canonical URL of the page
`og:site_name`	Your website’s name
`og:type`	Content type (`website`, `article`, `product`)
`og:image`	The social card image (powered by OpenGraph+)
`twitter:card`	Tells Twitter to show a large image card

Dynamic tags from views

Override the sections in child views to set page-specific values from your model data:

Blog posts

<!-- resources/views/posts/show.blade.php -->
@extends('layouts.app')

@section('og_title', $post->title)
@section('og_description', $post->excerpt)
@section('og_type', 'article')

@section('content')
  <h1>{{ $post->title }}</h1>
  <p>{{ $post->body }}</p>
@endsection

Products

<!-- resources/views/products/show.blade.php -->
@extends('layouts.app')

@section('og_title', $product->name)
@section('og_description', '$' . number_format($product->price, 2) . ' — ' . $product->description)
@section('og_type', 'product')

@section('content')
  <h1>{{ $product->name }}</h1>
@endsection

Verify

Start your development server and view the page source. Check that all og: meta tags are present with the correct values.

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image.