archtechx/laravel-seo

v0.10.1 2024-05-03 22:09 UTC

README

这是一个简单的可扩展的包,用于通过元标签(如OpenGraph标签)改进SEO。

默认情况下,它使用 <title> 和OpenGraph标签。它还附带了一个Twitter扩展。当然,您也可以根据需要编写自己的扩展。

功能:

  • 从PHP设置SEO标签
  • 从Blade设置SEO标签
  • FlippPreviewify 集成,自动生成封面图片
  • 自定义扩展支持
  • 表达式简单API
  • 可自定义视图

示例用法

seo()
    ->title($post->title)
    ->description($post->excerpt)
    ->twitter()
    ->flipp('blog')

// Adds OpenGraph tags
// Adds Twitter card tags
// Generates social image using Flipp and sets it as the cover photo

安装

composer require archtechx/laravel-seo

并将以下行添加到布局文件的 <head> 标签中

<x-seo::meta />

用法

该包可以从任何PHP代码中使用,或通过Blade中的 @seo 指令具体使用。

PHP

使用 seo() 辅助函数检索SeoManager实例,然后您可以调用以下方法

可用方法

site(string $site)
url(string $url)
title(string $title)
description(string $description)
image(string $url)
type(string $type)
locale(string $locale)

twitterCreator(string $username)
twitterSite(string $username)
twitterTitle(string $title)
twitterDescription(string $description)
twitterImage(string $url)

示例用法

seo()->title('foo')->description('bar')

Blade视图

您可以使用 @seo 指令从Blade中调用方法

@seo('title') // Echoes the title
@seo('title', 'foo') // Sets the title & echoes it
@seo(['title' => 'foo']) // Sets the title without echoing it

通常,您会在视图的开始处使用 @seo(['title' => 'foo']) 来设置值,并在视图中使用 @seo('title') 来获取值。

即如果您在Blade中使用了助手。某些应用程序可能只会使用PHP助手。

对于Twitter,使用 twitter.author 格式,例如 @seo('twitter.author')

Twitter

默认情况下,不会包含Twitter标签。如果您通过在服务提供程序中调用以下内容手动启用扩展

seo()->twitter();

例如,扩展将被启用。

一旦启用,它将复制所有默认值(OpenGraph)并用于Twitter卡片模式。

当为Twitter设置特定值时,它将优先于通用回退值。

seo()->twitterTitle('About us')

Favicon

默认情况下,不会包含favicon链接。您可以手动通过调用启用扩展

seo()->favicon();

生成favicon

要生成favicon,请从artisan控制台运行

php artisan seo:generate-favicons public/path-to/logo.png

如果未提供路径参数,我们将回退到 public/assets/logo.png

我们将生成32x32px的 public/favicon.icopublic/favicon.png 图标。这应该适用于大多数情况。

请注意,您需要安装 imagick php 扩展和 intervention/image composer 包。

默认值

要配置默认值,请使用具有 default 参数的方法

seo()
    ->title(default: 'ArchTech — Meticulously architected web applications')
    ->description(default: 'We are a web development agency that ...');

额外标签

要向文档头部添加更多标签,可以使用 tag()rawTag() 方法

seo()->tag('fb:image', asset('foo'));
seo()->rawTag('<meta property="fb:url" content="bar" />');
seo()->rawTag('fb_url', '<meta property="fb:url" content="bar" />'); // Keyed, allows overrides later on

规范URL

要启用 og:url 和规范URL link 标签,请调用

seo()->withUrl();

这将使包从 request()->url() 读取(当前URL 不包含 查询字符串)。

如果您希望更改URL,请调用 seo()->url()

seo()->url(route('products.show', $this->product));

区域设置

要设置 og:locale 属性

seo()->locale('de_DE');

预期格式是 language_TERRITORY

修饰符

您可能希望在值插入模板之前修改某些值。例如,当它具有非默认值时,您可能希望将元 <title> 后缀为 | ArchTech

为此,只需将 modify 参数添加到方法调用中即可

seo()->title(modify: fn (string $title) => $title . ' | ArchTech');

当然,您可以将这些与默认设置组合使用

seo()->title(
    default: 'ArchTech — Meticulously architected web applications',
    modify: fn (string $title) => $title . ' | ArchTech'
);

这将使得在没有提供标题时,包将使用默认标题;如果提供标题,例如使用seo()->title('Blog'),它将在被插入到模板之前被修改。

Flipp集成

首先,您需要添加您的Flipp API密钥

  1. 将API密钥添加到FLIPP_KEY环境变量中。您可以从这里获取密钥。
  2. 前往config/services.php并添加
    'flipp' => [
        'key' => env('FLIPP_KEY'),
    ],

然后,注册您的模板,例如在AppServiceProvider

seo()->flipp('blog', 'v8ywdwho3bso');
seo()->flipp('page', 'egssigeabtm7');

之后,您可以通过调用seo()->flipp()来使用模板,如下所示

seo()->flipp('blog', ['title' => 'Foo', 'content' => 'bar'])`

调用将设置生成的图像作为OpenGraph和Twitter卡图像。生成的URL是签名的。

如果没有提供数据数组,该方法将使用当前SEO配置中的titledescription

seo()->title($post->title);
seo()->description($post->excerpt);
seo()->flipp('blog');

flipp()方法还返回一个指向图像的签名URL,这使得您可以在其他地方使用它,例如博客封面图像。

<img alt="@seo('title')" src="@seo('flipp', 'blog')">

Previewify集成

首先,您需要添加您的Previewify API密钥

  1. 将API密钥添加到PREVIEWIFY_KEY环境变量中。您可以从这里获取密钥。
  2. 前往config/services.php并添加
    'previewify' => [
        'key' => env('PREVIEWIFY_KEY'),
    ],

然后,注册您的模板,例如在AppServiceProvider

seo()->previewify('blog', 24);
seo()->previewify('page', 83);

之后,您可以通过调用seo()->previewify()来使用模板,如下所示

seo()->previewify('blog', ['title' => 'Foo', 'content' => 'bar'])`

调用将设置生成的图像作为OpenGraph和Twitter卡图像。生成的URL是签名的。

如果没有提供数据数组,该方法将使用当前SEO配置中的titledescription

seo()->title($post->title);
seo()->description($post->excerpt);
seo()->previewify('blog');

previewify()方法还返回一个指向图像的签名URL,这使得您可以在其他地方使用它,例如博客封面图像。

<img alt="@seo('title')" src="@seo('previewify', 'blog')">

注意 将自动在所有提供的数据键前添加previewify:前缀。

示例

服务提供商

此示例在一个服务提供商的boot()方法中设置默认状态

seo()
    ->site('ArchTech — Meticulously architected web applications')
    ->title(
        default: 'ArchTech — Meticulously architected web applications',
        modify: fn (string $title) => $title . ' | ArchTech'
    )
    ->description(default: 'We are a development agency ...')
    ->image(default: fn () => asset('header.png'))
    ->flipp('blog', 'o1vhcg5npgfu')
    ->twitterSite('@archtechx');

控制器

此示例从控制器配置SEO元数据。

public function show(Post $post)
{
    seo()
        ->title($post->title)
        ->description(Str::limit($post->content, 50))
        ->flipp('blog', ['title' => $page->title, 'content' => $page->excerpt]);

    return view('blog.show', compact($post));
}

视图

此示例使用Blade视图,使用传递给视图的值设置全局SEO配置。

@seo(['title' => $page->name])
@seo(['description' => $page->excerpt])
@seo(['flipp' => 'content'])

<h1>{{ $page->title }}</h1>
<p>{{ $page->excerpt }}</p>

<p class="prose">
    {{ $page->body }}
</p>

自定义

此包非常灵活,可以通过修改其视图(以更改现有模板)或开发扩展(以添加更多模板)来自定义。

视图

您可以通过运行php artisan vendor:publish --tag=seo-views来发布Blade视图。

扩展

要使用自定义扩展,创建一个带有所需元标签的Blade 组件。组件应该使用{{ seo()->get('foo') }}@seo('foo')读取数据。

例如

<meta name="facebook-title" content="@seo('facebook.foo')">

一旦创建了视图,注册扩展

seo()->extension('facebook', view: 'my-component');
// The extension will use <x-my-component>

要为扩展设置数据(在我们的例子中是facebook),只需在调用扩展名前添加驼峰命名的前缀,或使用->set()方法

seo()->facebookFoo('bar');
seo()->facebookTitle('About us');
seo()->set('facebook.description', 'We are a web development agency that ...');
seo(['facebook.description' => 'We are a web development agency that ...']);

要禁用扩展,将extension()调用中的第二个参数设置为false

seo()->extension('facebook', false);

开发

在本地运行所有检查

./check

代码风格将由php-cs-fixer自动修复。